Comment créer une barre de progression circulaire sous Android? [fermé]


152

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.

entrez la description de l'image ici


7
J'ai fait quelque chose comme ça récemment. Cela pourrait être un point de départ utile? github.com/daentech/CircularDemo
daentech

@daentech Super! merci
Mohamed

1
Quelqu'un a-t-il eu une réponse où les bords de la partie de chargement sont arrondis comme dans l'exemple?
Siebe

1
@Siebe vous pouvez utiliser la bibliothèque que j'ai mentionnée dans ma réponse. Elle peut être personnalisée pour obtenir une partie de chargement comme vous le souhaitez.
WannaBeGeek

2
peut-être que cela peut vous orienter dans la bonne direction github.com/grmaciel/two-level-circular-progress-bar
gmemario

Réponses:


128

Vous pouvez essayer cette bibliothèque Circle Progress

entrez la description de l'image ici

entrez la description de l'image ici

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

comment ils affichent les valeurs en cours im essayant setProgress in on protected void onProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues ​​(); } mais
ça

@Top Cat comment puis-je ajouter une animation comme un zoom avant dans la progression du cercle ou mikinw.blogspot.com/2013/03/glow-effect.html
user3233280

29
great

19
Licence WTF. Haha.
z21 du

1
obtention d'une erreur de préfixe non liée
Animesh Mangla

338

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

Dans votre mise en page, incluez les éléments suivants ProgressBaravec 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 innerRadiusplace 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 ObjectAnimatorpour animer le champ de progression ProgessBarde 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.


6
étapes sont là, si vous suivez ceci, 99% sûr que vous obtenez le résultat.
Murtaza Khursheed Hussain

5
Fonctionne comme un charme. J'aimerais pouvoir voter pour cela plus d'une fois
Mushtaq Jameel

2
Ne fonctionne pas pour moi, la vue n'est pas visible
JMRboosties

9
Je ne sais pas ce que vous faites, la vue n'est pas visible n'est pas une description complète du problème
Murtaza Khursheed Hussain

6
Votre réponse semble que cela fonctionne beaucoup .. mais une image = 1000 mots .. donc si vous ajoutez votre sortie comme capture d'écran, cela peut être utile pour les futurs utilisateurs - IMHO
Ranjith Kumar
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.