Android'de dairesel ProgressBar nasıl oluşturulur? [kapalı]


152

Google Fit uygulamasında olduğu gibi dairesel bir ilerleme çubuğunun nasıl oluşturulacağına dair bir fikriniz var mı? Aşağıdaki resim gibi.

resim açıklamasını buraya girin


7
Aslında son zamanlarda böyle bir şey yaptım. Bu yardımcı bir başlangıç ​​noktası olabilir mi? github.com/daentech/CircularDemo
daentech

@daentech Harika! teşekkür ederim
Mohamed

1
Yükleme kısmının kenarlarının örnekte olduğu gibi yuvarlandığı bir cevap var mı?
Siebe

1
@Siebe cevabımda bahsettiğim kütüphaneyi kullanabilirsiniz.Yükleme parçasını istediğiniz gibi almak için özelleştirilebilir.
WannaBeGeek

Yanıtlar:


128

Bu Circle Progress kütüphanesini deneyebilirsiniz

resim açıklamasını buraya girin

resim açıklamasını buraya girin

Not: ilerleme görünümleri için lütfen her zaman aynı genişlik ve yüksekliği kullanın

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

devam eden değerleri nasıl gösterdikleri im setProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues (); } ama çalışmıyor
Erum

@Top Cat, daire ilerlemesinde yakınlaştırma veya mikinw.blogspot.com/2013/03/glow-effect.html
user3233280 21:14

29
en büyük lisans
radu122

19
WTF lisansı. Haha.
z21

1
bağlanmamış önek hatası alma
Animesh Mangla

338

Bunu kendiniz oluşturmak kolaydır

Düzeninize ProgressBarbelirli bir çekilebilir ile aşağıdakileri ekleyin ( bunun yerine genişliği boyutlardan almanız gerektiğini unutmayın ). Burada maksimum değer önemlidir:

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

Şimdi kaynaklarınızdaki çekmeceyi aşağıdaki şekil ile oluşturun. Yarıçap ( innerRadiusyerine kullanabilirsiniz innerRadiusRatio) ve kalınlık değerleri ile oynayın .

dairesel (Lolipop Öncesi VEYA API Seviyesi <21)

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

dairesel (> = Lolipop VEYA API Seviyesi> = 21)

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

API Seviye 21'de (Lollipop) useLevel varsayılan olarak "false" değeridir .

Animasyonu Başlat

Kodunuzda , mizanpajınızın ObjectAnimatorilerleme alanını canlandırmak için a tuşunu kullanın ProgessBar.

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

Animasyonu Durdur

progressBar.clearAnimation();

PS, yukarıdaki örneklerden farklı olarak, düzgün bir animasyon verir.


6
adımları takip ederseniz, bunu izlerseniz, sonucu% 99 elde edersiniz.
Murtaza Khursheed Hussain

5
Tıkır tıkır çalışıyor. Keşke ben daha fazla bir kez bu oy
Mushtaq Jameel

2
Benim için çalışmıyor görünümü görünmüyor
JMRboosties

9
Ne yaptığını bilmiyorum, görünüm görünmüyor tam bir problem açıklaması değil
Murtaza Khursheed Hussain

6
Cevabınız çok işe yarayabilir görünüyor ama bir resim = 1000 kelime .. Çıktınızı ekran görüntüsü olarak eklerseniz, gelecekteki kullanıcılar için yararlı olabilir - IMHO
Ranjith Kumar
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.