Avez-vous une idée de la façon de créer une barre de progression circulaire comme celle de l'application Google Fit? Comme l'image ci-dessous.
Avez-vous une idée de la façon de créer une barre de progression circulaire comme celle de l'application Google Fit? Comme l'image ci-dessous.
Réponses:
Vous pouvez essayer cette bibliothèque Circle Progress
NB: veuillez toujours utiliser la même largeur et hauteur pour les vues de progression
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"/>
C'est facile de le créer vous-même
Dans votre mise en page, incluez les éléments suivants ProgressBar
avec un dessin spécifique ( notez que vous devriez obtenir la largeur à partir des dimensions à la place ). La valeur max est ici importante:
<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" />
Créez maintenant le dessinable dans vos ressources avec la forme suivante. Jouez avec le rayon (vous pouvez utiliser à la innerRadius
place de innerRadiusRatio
) et les valeurs d'épaisseur.
circulaire (Pre Lollipop OU API Level <21)
<shape
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="3.8sp" >
<solid android:color="@color/yourColor" />
</shape>
circulaire (> = Lollipop OU Niveau API> = 21)
<shape
android:useLevel="true"
android:innerRadiusRatio="2.3"
android:shape="ring"
android:thickness="3.8sp" >
<solid android:color="@color/yourColor" />
</shape>
useLevel est "false" par défaut dans l'API Level 21 (Lollipop).
Lancer l'animation
Ensuite, dans votre code, utilisez un ObjectAnimator
pour animer le champ de progression ProgessBar
de votre mise en page.
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();
Arrêter l'animation
progressBar.clearAnimation();
PS contrairement aux exemples ci-dessus, il donne une animation fluide.