Bagaimana cara membuat ProgressBar melingkar di android? [Tutup]

152

Apakah Anda tahu cara membuat bilah kemajuan bundar seperti yang ada di aplikasi Google Fit? Seperti gambar di bawah ini.

masukkan deskripsi gambar di sini

Mohamed
sumber
7
Saya sebenarnya membuat sesuatu seperti ini baru-baru ini. Ini mungkin titik awal yang bermanfaat? github.com/daentech/CircularDemo
daentech
@daentech Hebat! terima kasih
Mohamed
1
Adakah yang mendapat jawaban di mana tepi bagian pemuatan dibulatkan seperti pada contoh?
Siebe
1
@ Siebe Anda dapat menggunakan perpustakaan yang saya sebutkan dalam jawaban saya. Dapat disesuaikan untuk mendapatkan bagian pemuatan seperti yang Anda inginkan.
WannaBeGeek
2
mungkin ini dapat mengarahkan Anda ke arah yang benar github.com/grmaciel/two-level-circular-progress-bar
gmemario

Jawaban:

128

Anda dapat mencoba pustaka Circle Progress ini

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

NB: harap selalu menggunakan lebar dan tinggi yang sama untuk tampilan kemajuan

Kemajuan Donut:

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

Kemajuan Circle:

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

Kemajuan Arc:

<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"/>
Kucing bagus
sumber
bagaimana mereka menunjukkan nilai yang sedang dalam proses, saya mencoba setProgress in on void onProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues ​​(); } tetapi tidak berfungsi
Erum
@Top Cat bagaimana saya dapat menambahkan animasi seperti memperbesar kemajuan lingkaran atau mikinw.blogspot.com/2013/03/glow-effect.html
user3233280
29
lisensi terbesar
radu122
19
Lisensi WTF. Ha ha.
z21
1
mendapatkan kesalahan awalan tak terikat
Animesh Mangla
338

Mudah membuat ini sendiri

Dalam tata letak Anda, sertakan hal-hal berikut ProgressBardengan gambar yang dapat ditarik ( perhatikan bahwa Anda seharusnya mendapatkan lebar dari dimensi ) Nilai maks penting di sini:

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

Sekarang buat drawable di sumber daya Anda dengan bentuk berikut. Mainkan dengan jari-jari (Anda bisa menggunakan innerRadiusbukan innerRadiusRatio) dan nilai ketebalan.

bundar (Pre Lollipop ATAU API Level <21)

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

bundar (> = Lollipop ATAU Tingkat API> = 21)

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

useLevel adalah "false" secara default di API Level 21 (Lollipop).

Mulai Animasi

Selanjutnya dalam kode Anda gunakan a ObjectAnimatoruntuk menghidupkan bidang kemajuan ProgessBartata letak Anda.

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

Hentikan Animasi

progressBar.clearAnimation();

PS tidak seperti contoh di atas, ini memberikan animasi yang halus.

Murtaza Khursheed Hussain
sumber
6
langkah-langkahnya ada, jika Anda mengikuti ini, 99% yakin Anda mendapatkan hasilnya.
Murtaza Khursheed Hussain
5
Bekerja seperti Mantra. Seandainya saya bisa memperbaiki ini lebih dari satu kali
Mushtaq Jameel
2
Bagi saya tidak berfungsi, pandangan tidak terlihat
JMRboosties
9
Saya tidak tahu apa yang Anda lakukan, tampilan tidak terlihat bukan deskripsi masalah yang lengkap
Murtaza Khursheed Hussain
6
Jawaban Anda kelihatannya bekerja sangat baik .. tetapi satu gambar = 1000 kata .. jadi jika Anda menambahkan output sebagai tangkapan layar, mungkin berguna untuk pengguna di masa mendatang - IMHO
Ranjith Kumar