Jak utworzyć cykliczny pasek postępu w systemie Android? [Zamknięte]

152

Czy masz pomysł, jak zrobić okrągły pasek postępu, taki jak w aplikacji Google Fit? Jak na obrazku poniżej.

wprowadź opis obrazu tutaj

Mohamed
źródło
7
Właściwie ostatnio zrobiłem coś takiego. Może to być pomocny punkt wyjścia? github.com/daentech/CircularDemo
daentech
@daentech Świetnie! dziękuję
Mohamed
1
Ktoś dostał odpowiedź, w której krawędzie części ładującej są zaokrąglone jak w przykładzie?
Siebe
1
@Siebe, możesz skorzystać z biblioteki, o której wspomniałem w mojej odpowiedzi. Można ją dostosować, aby ładować część, jak chcesz.
WannaBeGeek
2
może to wskaże Ci właściwy kierunek github.com/grmaciel/two-level-circular-progress-bar
gmemario

Odpowiedzi:

128

Możesz wypróbować tę bibliotekę Circle Progress

wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj

Uwaga: zawsze używaj tej samej szerokości i wysokości w widokach postępu

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"/>
Top Cat
źródło
jak pokazują wartości w toku. Im próbuję setProgress in on protected void onProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues ​​(); } ale to nie działa
Erum,
@Top Cat Jak mogę dodać animację, taką jak powiększanie w kręgu lub mikinw.blogspot.com/2013/03/glow-effect.html
user3233280
29
największa licencja
radu122
19
Licencja WTF. Ha ha.
z21
1
błąd uzyskiwania niezwiązanego prefiksu
Animesh Mangla
338

Łatwo jest to stworzyć samodzielnie

W swoim układzie umieść następujące elementy ProgressBarz określonym rysunkiem ( pamiętaj, że zamiast tego powinieneś uzyskać szerokość z wymiarów ). Ważna jest tutaj wartość maksymalna:

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

Teraz utwórz element do rysowania w swoich zasobach o następującym kształcie. Graj z wartościami promienia (możesz użyć innerRadiuszamiast innerRadiusRatio) i grubości.

okólnik (Pre Lollipop LUB poziom API <21)

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

okrągły (> = Lollipop LUB poziom API> = 21)

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

useLevel ma domyślnie wartość „false” na poziomie API 21 (Lollipop).

Rozpocznij animację

Następnie w swoim kodzie użyj znaku ObjectAnimatordo animowania pola postępu ProgessBarukładu.

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();

Zatrzymaj animację

progressBar.clearAnimation();

PS w przeciwieństwie do powyższych przykładów zapewnia płynną animację.

Murtaza Khursheed Hussain
źródło
6
kroki są dostępne, jeśli będziesz postępować zgodnie z nimi, na 99% otrzymasz wynik.
Murtaza Khursheed Hussain
5
Działa jak marzenie. Chciałbym móc zagłosować za tym więcej niż jeden raz
Mushtaq Jameel
2
U mnie nie działa, widok nie jest widoczny
JMRboosties
9
Nie wiem, co robisz, widok nie jest widoczny to nie jest pełny opis problemu
Murtaza Khursheed Hussain
6
Twoja odpowiedź wygląda na to, że może działać świetnie ... ale jedno zdjęcie = 1000 słów ... więc jeśli dodasz swoje wyjście jako zrzut ekranu, może to być przydatne dla przyszłych użytkowników - IMHO
Ranjith Kumar