Чи маєте ви якесь уявлення, як зробити кругову панель прогресу, як та, яка використовується у програмі Google Fit? Як і зображення нижче.
Чи маєте ви якесь уявлення, як зробити кругову панель прогресу, як та, яка використовується у програмі Google Fit? Як і зображення нижче.
Відповіді:
Ви можете спробувати цю бібліотеку " Прогрес кола"
Примітка: будь ласка, завжди використовуйте однакову ширину та висоту для подання прогресу
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"/>
Створити це самостійно легко
У свій макет включіть наступне 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 на відміну від прикладів вище, він дає плавну анімацію.