среда, 13 февраля 2013 г.

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


Кастомизация интерфейса: 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. Овальный «барашек»:
Кастомизация интерфейса: Progress Bar

Исходный код (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. «Барашек» в виде кольца:

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

Исходный код (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" – исключить влияние изображения на отрисовку градиента.
  • Второй способ: Вращение изображения

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

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

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


Исходный код (loader_1.xml)
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/preloader"
    android:pivotX="50%"
    android:pivotY="50%" /> 
  • Третий способ: Покадровая анимация

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

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

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

Исходный код (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

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

Отправить комментарий