Як створити круговий ProgressBar в android? [зачинено]


152

Чи маєте ви якесь уявлення, як зробити кругову панель прогресу, як та, яка використовується у програмі Google Fit? Як і зображення нижче.

введіть тут опис зображення


7
Я фактично зробив щось подібне нещодавно. Це може бути корисною відправною точкою? github.com/daentech/CircularDemo
daentech

@daentech Чудово! дякую
Мохамед

1
Хтось отримав відповідь, де краї завантажувальної частини округлені, як у прикладі?
Siebe

1
@Siebe, ви можете використовувати бібліотеку, про яку я згадував у своїй відповіді.
WannaBeGeek

2
можливо, це може навести вас у правильному напрямку github.com/grmaciel/two-level-circular-progress-bar
gmemario

Відповіді:


128

Ви можете спробувати цю бібліотеку " Прогрес кола"

введіть тут опис зображення

введіть тут опис зображення

Примітка: будь ласка, завжди використовуйте однакову ширину та висоту для подання прогресу

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

як вони показують значення в процесі виконання спроб setProgress в захищеній порожнечі onProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues ​​(); }, але його не працює
Ерум

@Top Cat як я можу додати анімацію, як збільшити прогрес у колі чи mikinw.blogspot.com/2013/03/glow-effect.html
користувач3233280

29
найбільша ліцензія
radu122

19
Ліцензія WTF. Ха-ха.
z21

1
отримання помилкової помилки з префіксом
Animesh Mangla

338

Створити це самостійно легко

У свій макет включіть наступне ProgressBarз певним малюнком ( зверніть увагу, ви повинні отримати ширину замість розмірів ). Максимальне значення тут важливе:

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

Тепер створіть у своїх ресурсах малюнок із такою формою. Грайте з радіусом (можна використовувати innerRadiusзамістьinnerRadiusRatio ) та значеннями товщини.

круговий (до Lillipop АБО рівня API <21)

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

круговий (> = Lollipop АБО рівень API> = 21)

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

useLevel є "хибним" рівні Level 21 (Lollipop) за замовчуванням .

Запуск анімації

Далі у коді використовуйте, ObjectAnimatorщоб анімувати поле прогресу 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();

Зупинити анімацію

progressBar.clearAnimation();

PS на відміну від прикладів вище, він дає плавну анімацію.


6
кроки є, якщо дотримуватися цього, на 99% впевнені, що отримаєте результат.
Муртаза Хурсід Хуссей

5
Працює як Чарівність. Бажаю, що я можу підтримати це не раз
Муштак Джаміель,

2
Не працює для мене погляд не видно
JMRboosties

9
Я не знаю, що ви робите, перегляду не видно, не повний опис проблеми
Муртаза Хуршид Хуссей

6
Ваша відповідь виглядає, що це може спрацьовувати чудово .. але одне зображення = 1000 слів .. тож якщо ви додасте свій результат як скріншот, він може бути корисним майбутнім користувачам - ІМХО
Ранджіт Кумар
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.