Wie erstelle ich eine zirkuläre ProgressBar in Android? [geschlossen]


152

Haben Sie eine Idee, wie Sie einen kreisförmigen Fortschrittsbalken wie den der Google Fit-Anwendung erstellen können? Wie das Bild unten.

Geben Sie hier die Bildbeschreibung ein


7
Ich habe in letzter Zeit tatsächlich so etwas gemacht. Dies könnte ein hilfreicher Ausgangspunkt sein? github.com/daentech/CircularDemo
daentech

@ daentech Großartig! Vielen Dank
Mohamed

1
Hat jemand eine Antwort bekommen, bei der die Kanten des Ladeteils wie im Beispiel abgerundet sind?
Siebe

1
@Siebe Sie können die Bibliothek verwenden, die ich in meiner Antwort erwähnt habe. Sie kann angepasst werden, um das Laden eines Teils nach Ihren Wünschen zu erhalten.
WannaBeGeek

2
Vielleicht kann dies Sie in die richtige Richtung weisen. github.com/grmaciel/two-level-circular-progress-bar
gmemario

Antworten:


128

Sie können diese Circle Progress- Bibliothek ausprobieren

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

NB: Bitte verwenden Sie für Fortschrittsansichten immer die gleiche Breite und Höhe

DonutProgress:

 <com.github.lzyzsd.circleprogress.DonutProgress
        android:id="@+id/donut_progress"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:circle_progress="20"/>

CircleProgress:

  <com.github.lzyzsd.circleprogress.CircleProgress
        android:id="@+id/circle_progress"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:circle_progress="20"/>

ArcProgress:

<com.github.lzyzsd.circleprogress.ArcProgress
        android:id="@+id/arc_progress"
        android:background="#214193"
        android:layout_marginLeft="50dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        custom:arc_progress="55"
        custom:arc_bottom_text="MEMORY"/>

wie sie laufende Werte anzeigen beim Versuch setProgress in on protected void onProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues ​​(); } aber es funktioniert nicht
Erum

@ Top Cat wie kann ich Animationen wie das Vergrößern des
Kreisfortschritts

29
größte Lizenz
radu122

19
WTF-Lizenz. Haha.
21.

1
immer ungebundenen Präfixfehler
Animesh Mangla

338

Es ist einfach, dies selbst zu erstellen

ProgressBarFügen Sie in Ihr Layout Folgendes mit einem bestimmten Zeichen hinzu ( beachten Sie, dass Sie die Breite stattdessen aus den Abmessungen erhalten sollten ). Der Maximalwert ist hier wichtig:

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:max="500"
    android:progress="0"
    android:progressDrawable="@drawable/circular" />

Erstellen Sie nun das Zeichnungsobjekt in Ihren Ressourcen mit der folgenden Form. Spielen Sie mit den Werten für Radius (Sie können innerRadiusanstelle von verwenden innerRadiusRatio) und Dicke.

Rundschreiben (Pre Lollipop OR API Level <21)

   <shape
        android:innerRadiusRatio="2.3"
        android:shape="ring"
        android:thickness="3.8sp" >
        <solid android:color="@color/yourColor" />
   </shape>

Rundschreiben (> = Lollipop OR API Level> = 21)

    <shape
        android:useLevel="true"
        android:innerRadiusRatio="2.3"
        android:shape="ring"
        android:thickness="3.8sp" >
        <solid android:color="@color/yourColor" />
     </shape>

useLevel ist in API Level 21 (Lollipop) standardmäßig "false" .

Animation starten

Verwenden Sie als Nächstes in Ihrem Code ein ObjectAnimator, um das Fortschrittsfeld ProgessBarIhres Layouts zu animieren .

ProgressBar progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
ObjectAnimator animation = ObjectAnimator.ofInt(progressBar, "progress", 0, 500); // see this max value coming back here, we animate towards that value
animation.setDuration(5000); // in milliseconds
animation.setInterpolator(new DecelerateInterpolator());
animation.start();

Animation stoppen

progressBar.clearAnimation();

PS Im Gegensatz zu den obigen Beispielen bietet es eine reibungslose Animation.


6
Schritte sind da, wenn Sie dies befolgen, sind Sie zu 99% sicher, dass Sie das Ergebnis erhalten.
Murtaza Khursheed Hussain

5
Klappt wunderbar. Ich wünschte, ich könnte dies mehr als einmal positiv bewerten
Mushtaq Jameel

2
Funktioniert nicht für mich die Ansicht ist nicht sichtbar
JMRboosties

9
Ich weiß nicht, was Sie tun, Ansicht ist nicht sichtbar ist keine vollständige Problembeschreibung
Murtaza Khursheed Hussain

6
Ihre Antwort sieht so aus, als würde es sehr gut funktionieren. Aber ein Bild = 1000 Wörter. Wenn Sie also Ihre Ausgabe als Screenshot hinzufügen, kann dies für zukünftige Benutzer nützlich sein - IMHO
Ranjith Kumar
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.