Кастомизация ProgressBar в Android

8 Июн
2012

Периодически возникает потребность заменить стандартный круговой ProgressBar на какой-либо свой.

Обычно визуальное восприятие у людей более обострено, так что сразу приведу пример нескольких вариантов ProgressBar



На блоге обсуждались некоторые ресурсы генерации прелоадеров, можно использовать их для создания изображения, которое в последствии попадет в ProgressBar.

Для кастомизации ProgressBar’a нужно выполнить несколько вполне тривиальных шагов:

1. Создать Android проект
2. Добавить в проект файл, содержащий лоадер (например res/drawable/loader1.png)
3. Создать файл анимации (например res/drawable/loader1_progress.xml)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
  3.   android:drawable="@drawable/loader1"
  4.   android:pivotX="50%"
  5.   android:pivotY="50%" />

4. Разместить ProgressBar в Активити и сказать чтобы использовал наш ресурс анимации, созданный на предыдущем шаге (например res/layouts/)
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.   android:layout_width="fill_parent"
  4.   android:layout_height="fill_parent"
  5.   android:orientation="vertical" >  
  6.     <ProgressBar
  7.       android:indeterminateDrawable="@drawable/loader1_progress"
  8.       android:layout_height="50dp"
  9.       android:layout_width="50dp">   
  10.     </ProgressBar>
  11. </LinearLayout>


Кроме использования готовых изображений лоадеров, можно также использовать функционал android для создания лоадера вручную (например /res/drawable/custom_progress.xml)
Рассмотрим на примере фигуры кольца. Цвета указаны в формате #aarrggbb, где аа указывает значение альфа (прозрачность).
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
  3.   android:pivotX="50%"
  4.   android:pivotY="50%">
  5.   <shape android:shape="ring"
  6.     android:innerRadiusRatio="5"
  7.     android:thicknessRatio="6"
  8.     android:useLevel="false">
  9.     <gradient
  10.       android:type="sweep"
  11.       android:useLevel="false"
  12.       android:centerY="0.10"
  13.       android:startColor="#0020ffcc"
  14.       android:centerColor="#8820ffcc"
  15.       android:endColor="#ff20ffcc" />
  16.   
  17.     <size android:width="18dip"
  18.        android:height="18dip" />
  19.   </shape>
  20. </animated-rotate>


Код примера доступен на github
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх