Программирование Android AnimationDrawable: создание анимированной кнопки Thu, January 19 2017  

Поделиться

нашли опечатку?

Пожалуйста, сообщите об этом - просто выделите ошибочное слово или фразу и нажмите Shift Enter.

AnimationDrawable: создание анимированной кнопки Печать
Добавил(а) microsin   

Пошаговое описание процесса создания кнопки для приложения, при нажатии на которую будет проигрываться анимация. Такой эффект можно использовать для создания "объемных" кнопок и для других целей улучшения качества оформления приложения. Используется среда разработки 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. Поменяйте у него свойства следующим образом:

Свойство Значение Описание
Id @+id/imageView1 Идентификатор ресурса, которое используется для его поиска функцией findViewById (см. далее в примере кода).
ImageView -> Src удалите старое значение По умолчанию здесь вставлена картинка @drawable/ic_launcher (зеленый робот). Нам она не нужна, поэтому очистите это свойство.
View -> Background @drawable/animbutton_description Здесь подставляется путь и имя XML файла описания кадров для кнопки
View -> On Click animButtonClick Имя метода, который вызывается, если кликнуть на объект 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 раз.

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

AnimationDrawable-button-work

[Ссылки]

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 в качестве кнопки.

 

Комментарии  

 
+1 #1 Леша 28.12.2015 22:02
Полезная статья! Спасибо! ;-) А как сделать чтоб анимация проигралась полностью, т. е. я нажимаю кнопку и держу, идет воспроизведение анимации. Но только я отпускаю кнопку, анимация прекращается. А хочется, чтобы воспроизводилас ь до конца, даже если сразу отпущу кнопку.
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Top of Page