Как создать круговой 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

Вы можете попробовать эту библиотеку 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


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 слов ... так что если вы добавите свой вывод в виде скриншота, это может быть полезно для будущих пользователей - ИМХО
Ранджит Кумар
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.