воскресенье, 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 комментариев:

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

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

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

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

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

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

    ОтветитьУдалить
  5. Класс! Спасибо за отличный урок!

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

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

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

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

    ОтветитьУдалить

Пожалуйста, пишите содержательные комментарии и соблюдайте вежливость.