web-dev-qa-db-fra.com

Comment créer ProgressBar circulaire dans Android?

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.

enter image description here

androidandroid-progressbar
150
Mohamed

Vous pouvez essayer ceci Circle Progress library

enter image description here

enter image description here

NB: veuillez toujours utiliser les mêmes 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"/>
127
Top Cat

C'est facile de créer ça vous-même

Dans votre mise en page, incluez la ProgressBar suivante avec une note dessinable spécifique ( vous devriez obtenir la largeur à partir de dimensions à la place ). La valeur max est importante ici:

<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" />

Maintenant, créez le dessin dans vos ressources avec la forme suivante. Jouez avec le rayon (vous pouvez utiliser innerRadius au lieu de innerRadiusRatio) et les valeurs d'épaisseur.

circulaire (Pré Lollipop OR Niveau API <21)

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

circulaire (> = Lollipop OR Niveau de l'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).

Démarrer l'animation

Ensuite dans votre code, utilisez un ObjectAnimator pour animer le champ de progression du 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();

P.S. contrairement aux exemples ci-dessus, il donne une animation fluide.

335
Murtaza Khursheed Hussain