Как создать круговой ProgressBar в Android? [закрыто]

152

У вас есть идея, как сделать круговую шкалу, как в приложении Google Fit? Как на картинке ниже.

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

Mohamed
источник
7
Я недавно сделал что-то подобное. Это может быть полезной отправной точкой? github.com/daentech/CircularDemo
daentech
@daentech Отлично! спасибо
Мохамед
1
Кто-нибудь получил ответ, где края загрузочной части закруглены, как в примере?
Siebe
1
@Siebe, вы можете использовать библиотеку, которую я упомянул в своем ответе. Она может быть настроена так, чтобы загружать часть, как вы хотите.
WannaBeGeek
2
может быть, это может указать вам правильное направление github.com/grmaciel/two-level-circular-progress-bar
gmemario

Ответы:

128

Вы можете попробовать эту библиотеку Circle Progress

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

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

Примечание: всегда используйте одинаковую ширину и высоту для просмотра прогресса

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 в защищенном void onProgressUpdate () {super.onProgressUpdate (); Log.d (TAG, "onProgressUpdate"); progressBar.setProgress (progressBar.getProgress () + j); Log.d (TAG, "onProgressUpdate perc:" + j); updateMemoryAndCountValues (); } но это не работает
Erum
@Top Cat, как я могу добавить анимацию, например, увеличение масштаба круга или mikinw.blogspot.com/2013/03/glow-effect.html
user3233280
29
Самая
19
Лицензия WTF. Ха - ха.
z21
1
ошибка несвязанного префикса
Анимеш Мангла
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) и значениями толщины.

круговой (Pre Lollipop ИЛИ уровень 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 по умолчанию имеет значение «false» в API 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
Работает как Шарм. Жаль, что я не могу проголосовать больше, чем один раз
Mushtaq Jameel
2
У меня не работает вид не виден
JMRboosties
9
Я не знаю, что вы делаете, вид не виден, не полное описание проблемы
Муртаза Хуршид Хуссейн
6
Ваш ответ выглядит очень хорошо ... но одна картинка = 1000 слов ... так что если вы добавите свой вывод в виде скриншота, это может быть полезно для будущих пользователей - ИМХО
Ранджит Кумар