Кастомизация интерфейса: Progress Bar

Сегодня мы будем кастомизировать элемент «Spinning Wheel», или «барашек». В этой статье будут раскрыты 3 способа изменения этого элемента.

Практика

Для одного из способов кастомизации потребуются ресурсы. Создайте xml файл для цвета. Эти ресурсы будут задавать градиент для нашего «барашка».

Исходный код (colors.xml)

<resources>

    <color name="color_preloader_start">#000000</color>

    <color name="color_preloader_center">#000000</color>

    <color name="color_preloader_end">#ff56a9c7</color>

</resources>

• Первый способ. С помощью Shape

Создание форм для вращения ограничивается только вашей фантазией. В этой статье будут расмотрены только две формы: овал и кольцо

1. Овальный «барашек»:

Исходный код (loader_0_1.xml)

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromDegrees="0"

    android:pivotX="50%"

    android:pivotY="50%"

    android:toDegrees="360" >

    <shape android:shape="oval" >

        <gradient

            android:centerColor="@color/color_preloader_center"

            android:centerY="0.50"

            android:endColor="@color/color_preloader_end"

            android:startColor="@color/color_preloader_start"

            android:type="sweep" />

    </shape>

</rotate>

rotate позволяет нашей форме вращаться от 0 до 360 градусов с точкой вращения в центре фигуры. Наша фигура заливается развернутым градиентом (sweep gradient). Градиент задается тремя цветами и начинает заливаться в центре фигуры.

2. «Барашек» в виде кольца:

Исходный код (loader_0.xml)

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromDegrees="0"

    android:pivotX="50%"

    android:pivotY="50%"

    android:toDegrees="360" >

    <shape

        android:innerRadiusRatio="3"

        android:shape="ring"

        android:thicknessRatio="8"

        android:useLevel="false" >

        <gradient

            android:centerColor="@color/color_preloader_center"

            android:centerY="0.50"

            android:endColor="@color/color_preloader_end"

            android:startColor="@color/color_preloader_start"

            android:type="sweep"

            android:useLevel="false" />

    </shape>

</rotate>

Для кольца необходимо задать следующие параметры:

android:innerRadiusRatio – внутренний радиус кольца

android:thicknessRatio – толщина кольца

android:useLevel="false" – исключить влияние изображения на отрисовку градиента.

• Второй способ: Вращение изображения

Данный способ использует подготовленное заранее изображение для его вращения.

Пример изображений (скачать):

Исходный код (loader_1.xml)

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/preloader"

    android:pivotX="50%"

    android:pivotY="50%" /> 

• Третий способ: Покадровая анимация

Пример изображений (скачать):

В том случае, когда наш «барашек» невозможно анимировать с помощью вращения, можно использовать покадровую анимацию.

Замечание: размер элемента должен быть равен или больше используемых изображений.

Исходный код (loader_2.xml)

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item

        android:drawable="@drawable/progress_1"

        android:duration="200"/>

    <item

        android:drawable="@drawable/progress_2"

        android:duration="200"/>

    <item

        android:drawable="@drawable/progress_3"

        android:duration="200"/>

    <item

        android:drawable="@drawable/progress_4"

        android:duration="200"/>

    <item

        android:drawable="@drawable/progress_5"

        android:duration="200"/>

</animation-list>

android:duration – время отображения текущего кадра.

Теперь разместим все наши элементы на экране. Чтобы кастомизировать ProgressBar, необходимо использовать  атрибут android:indeterminateDrawable.

Исходный код (main.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <ProgressBar

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:indeterminateDrawable="@drawable/loader_0" />

    <ProgressBar

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:indeterminateDrawable="@drawable/loader_0_1" />

    <ProgressBar

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:indeterminateDrawable="@drawable/loader_1" />

    <ProgressBar

        android:layout_width="119dp"

        android:layout_height="119dp"

        android:indeterminateDrawable="@drawable/loader_2" />

</LinearLayout>

Ссылки по теме

• Исходные коды данного проекта можно скачать отсюда: zip