AnimationDrawable: создание анимированной кнопки | android

Пошаговое описание процесса создания кнопки для приложения, при нажатии на которую будет проигрываться анимация. Такой эффект можно использовать для создания "объемных" кнопок и для других целей улучшения качества оформления приложения. Используется среда разработки Eclipse для Android и класс AnimationDrawable.

1. Сначала нужно подготовить кадры для анимированной кнопки. Эти кадры будут показаны в анимации друг за другом, что создаст эффект живого реального объекта. Кадры можно нарисовать вручную в Photoshop и сохранить в виде отдельных файлов формата PNG, либо можно экспортировать из готового GIF-а с помощью программы наподобие Easy2Convert GIF to PNG [1].

2. Добавьте картинки в проект Eclipse как ресурс. Для этого в Project Explorer создайте в папке res отдельную папку, и дайте ей имя drawable (если она еще не существует). После этого перетащите картинки анимации кнопки в эту папку. В ответ на запрос - "Копировать или создать ярлыки?" - выберите "Копировать". Предположим, что картинки анимации у Вас называются b01.png, b02.png, b03.png.

Внимание, это важно: имена файлов картинок должны начинаться с буквы, и в имени картинки не должно быть заглавных букв и пробелов (это правило касается всех файлов для ресурсов). В противном случае среда выдаст ошибку Syntax error on token "имя_картинки_без_расширения", invalid VariableDeclaratorId.

3. Создайте в папке button1 файл animbutton_description.xml (правая кнопка New -> Other... -> XML File). Добавьте в этот файл список анимации animation-list:

< animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/loading" 
android:oneshot="false" >
   < item android:drawable="@drawable/b01" android:duration="50" / >
   < item android:drawable="@drawable/b02" android:duration="50" / >
   < item android:drawable="@drawable/b03" android:duration="50" / >
< /animation-list >

Здесь drawable имя папки, где находятся картинки, а b01, b02, b03 имена картинок без расширения png.

4. В визуальном редакторе файла activity_main.xml бросьте на экран формы приложения объект ImageView. Поменяйте у него свойства следующим образом:

Примечание: правки можно делать как в визуальном редакторе, так и в текстовом виде, редактируя текстовый файл activity_main.xml. Переключение происходит нижними закладками "Graphical Layout" и "activity_main.xml".

В результате в файле activity_main.xml должно получиться примерно следующее описание ImageView:

    <ImageView
        android:clickable="true"
        android:id="@+id/imageView1"
        android:onClick="animButtonClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="29dp"
        android:layout_marginTop="35dp"
        android:background="@drawable/animbutton_description" />
        < !-- android:src="/@drawable/ic_launcher" -- >

5. Откройте модуль класса MainActivity (файл MainActivity.java) и добавьте в класс MainActivity две глобальные переменные:

//Картинка, которая будет работать как кнопка:
ImageView buttonImage;
//Анимация, которая будет проигрываться на кнопке:
AnimationDrawable animation;

6. Добавьте в обработчик события onCreate код для загрузки анимации и привязки его к размещенному на экране ImageView:

//загрузка ImageView заранее подготовленной анимацией из ресурса:
buttonImage = (ImageView) findViewById(R.id.imageView1);
buttonImage.setBackgroundResource(R.drawable.animbutton_description);
//загрузка объекта анимации:
animation = (AnimationDrawable) buttonImage.getBackground();
//анимация будет проигрываться только 1 раз:
animation.setOneShot(true);

7. Создайте в классе MainActivity код для обработчика клика на ImageView, он должен запускать анимацию.

public void animButtonClick(View v)
{
   Log.d("animButton", "Click");
   animation.stop();
   animation.start();
}

Вызов метода stop нужен для перезапуска анимации, без него анимация на нашей кнопке будет работать только 1 раз.

На скриншоте видно, как работает анимированная кнопка.

1. Easy2Convert GIF to PNG site:www.easy2convert.com.
2. Animation Resources site:developer.android.com.
3. Drawable Animation в приложении Android.
4. AnimationDrawable site:developer.android.com.
5. 140324animbutton-android.zip - проект Eclipse, демонстрирующий работу AnimationDrawable в качестве кнопки.