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