Hai idea di come creare una barra di avanzamento circolare come quella dell'applicazione Google Fit? Come l'immagine qui sotto.
Hai idea di come creare una barra di avanzamento circolare come quella dell'applicazione Google Fit? Come l'immagine qui sotto.
Risposte:
Puoi provare questa libreria Circle Progress
NB: utilizzare sempre la stessa larghezza e altezza per le viste di avanzamento
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"/>
È facile crearlo da soli
Nel tuo layout includi quanto segue ProgressBar
con un disegno specifico ( nota invece che dovresti ottenere la larghezza dalle dimensioni ). Il valore massimo è importante qui:
<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" />
Ora crea il disegno nelle tue risorse con la seguente forma. Gioca con il raggio (puoi usare innerRadius
invece di innerRadiusRatio
) e i valori di spessore.
circolare (Pre Lollipop o livello API <21)
<shape
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="3.8sp" >
<solid android:color="@color/yourColor" />
</shape>
circolare (> = Lollipop OR Livello API> = 21)
<shape
android:useLevel="true"
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="3.8sp" >
<solid android:color="@color/yourColor" />
</shape>
useLevel è "false" per impostazione predefinita nel Livello API 21 (Lollipop).
Inizia l'animazione
Successivamente nel tuo codice usa un ObjectAnimator
per animare il campo di avanzamento ProgessBar
del tuo layout.
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();
Ferma l'animazione
progressBar.clearAnimation();
PS a differenza degli esempi sopra, dà un'animazione fluida.