воскресенье, 13 марта 2011 г.

Стилизация бесконечного ProgressBar

Хотела написать про эту фичу в статье про XML drawables, но как-то не вместилось. Так что пусть будет аддоном.

Например, хочется нам, чтобы в прогрессе крутилась не стандартная крутилка, а какая-нибудь такая:

Крутилка

Добавляем картинку в drawables-dpi, называем custom_spinner_image.png. И создаем xml-ресурс с таким содержанием:

spinner_png.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/custom_spinner"
    android:pivotX="50%"
    android:pivotY="50%"
    />

Теперь в разметке активности можно определять ProgressBar так:

<ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:indeterminateOnly="true"
    android:indeterminateDrawable="@drawable/spinner_png"
/>

А работать — так:

Пример работы animated-rotate

Я даже больше скажу. Крутилку можно задавать не изображением, а XML-разметкой. Например:

spinner_ring.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
>
    <shape android:shape="ring" android:innerRadiusRatio="4"
      android:thicknessRatio="5.333" android:useLevel="false">

      <size android:width="18dip" android:height="18dip" />

      <gradient android:type="sweep" android:useLevel="false"
        android:startColor="#006688cc" android:centerColor="#886688cc"
        android:endColor="#ff6688cc" android:centerY="0.50" />

    </shape>
</animated-rotate>

Результат:

Пример работы animated-rotate

Исходники

8 комментариев:

Анонимный комментирует...

Спасибо Даша! Продолжайте в том же духе!

dgorod комментирует...

Вот xml-разметкой это круто. Позволит сэкономить драгоценные байты как у apk, та и в момент исполнения.

Спасибо, Дарья :)

Анонимный комментирует...

А вот не компостировало бы мозги сообщество, да приняло бы формат APNG, не пришлось бы страдать фигнёй с разметкой.

Анонимный комментирует...

И вообще - пример отвратный. Это меня одно бесит, что фигура гуляет вправо-влево? Скажу по секрету, именно поэтому люди и делают такие вещи пре-рендеренными, потому что поворот изображения с точностью до хотя бы четверть пикселя - вовсе не тривиальная задача.

Кроме того, исходное изображение вообще неудачное - хотите экономить байты? Так на кой черт тут 62 цвета? Эта картинка чудно сжимается с 16 цветами с 2036 байт до... сюрприз! 650 байт. Куда ещё дальше экономить, скажите пожалуйста?

denis_russkih комментирует...

Класс! Спасибо за отличный урок!

P.S. Некоторые анонимы вечно всем недовольны, не обращайте внимания на бурчание таких персонажей. :)

darja комментирует...

В его претензиях есть здравая мысль. Только вот исправить у меня руки не доходят.

katso комментирует...

А как заставить крутиться изображение в другую сторону и назначить скорость вращения?

Foenix комментирует...

Даш, скажите, пожалуйста, а можно каким-то хитрым аналогичным способом сделать выделение в listView - каким-нибудь красивым градиентом вместо того, чтоб просто залить его цветом
v.setBackgroundColor(Color.WHITE);
или из xml-файла подставить цвет
green = getApplicationContext().getResources().getColor(R.color.green);
v.setBackgroundColor(green);
ХОчется, чтоб красиво заливать каким-нибудь градиентом от краев к середине.