Делаем анимированную кнопку с помощью ImageView
Главная » Делаем анимированную кнопку с помощью ImageView

Кнопки являются самым часто используемым элементом любого Android приложения. Сегодня мы немного расширим свои способности в области создания кнопок и сделаем анимированную кнопку.

Создаем новый проект, выбираем Blank Activity. Основные шаги создания будут следующими:

1) создаем интерфейс программы, состоящий всего то из одного элемента ImageView, который и будет играть роль кнопки;

2) создаем анимацию из набора изображений;

3) ну и напоследок кодим в MainActivity.java.

Начнем с работы с интерфейсом. Открываем файл activity_main.xml и добавляем туда элемент ImageView, задав ему определенные рамки, чтоб он в итоге не занимал нам весь экран:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:background="#FFFFFF">
 <ImageView
 android:clickable="true"
 android:id="@+id/imageView"
 android:onClick="animButtonClick"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_marginLeft="50pt"
 android:layout_marginTop="50pt"
 android:layout_marginBottom="50pt"
 android:layout_marginRight="50pt"
 android:background="@drawable/anim_button"/>
</LinearLayout>

Пока что Android Studio ругает нас на строчке  android:background="@drawable/anim_button", чтобы это исправить, переходим к выполнению второго пункта плана: создание анимации. Как вы наверное уже догадались, анимация в приложении будет представлена xml файлом anim_button.xml. Перед тем, как его создать, добавим в проект приложения несколько изображений, которые и будут составлять анимацию. Я не слишком крутой дизайнер (мягко говоря), поэтому если вам не понравиться мой набор картинок, можете подобрать что-нибудь свое. Изображения нужно поместить в папке res/drawable проекта. 

Теперь в этой же папке res/drawable создаем новый xml файл по имени anim_button.xml и добавим в него наши картинки:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/loading"
 android:oneshot="false" >
 <item android:drawable="@drawable/ba1" android:duration="200"/>
 <item android:drawable="@drawable/ba2" android:duration="200"/>
 <item android:drawable="@drawable/ba3" android:duration="200"/>
 <item android:drawable="@drawable/ba4" android:duration="200"/>
</animation-list>

Команда duration регулирует продолжительность показа одного изображения в миллисекундах, можете подобрать оптимальное для вас значение.

Переходим к работе в файле MainActivity.java. Нам нужно объявить и инициализировать переменные ImageView и AnimationDrawable, настроить файл anim_button.xml в качестве анимации для элемента ImageView и настроить запуск самой анимации при нажатии на элемент ImageView. Чтобы все это сделать, добавляем следующий код:

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {

 //Объявляем использование ImageView
 ImageView anim_image;
 //Объявляем использование анимации AnimationDrawable
 AnimationDrawable animation;


 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 //Связываем объект ImageView с нашим элементом ImageView
 //и задаем ему на фон созданную анимацию:
 anim_image = (ImageView) findViewById(R.id.imageView);
 anim_image.setBackgroundResource(R.drawable.anim_button);

 //Загружаем объект анимации:
 animation = (AnimationDrawable)anim_image.getBackground();

 //Выставляя значение false, добиваемся бесконечного
 //повторения анимации (true - только 1 повторение):
 animation.setOneShot(false);}


 //Метод обработки нажатия на ImageView:
 public void animButtonClick(View v) {
 Log.d("animButton", "Click");
 animation.stop();
 animation.start();

 }
}

Ну вот и все на этот раз, запускаем и смотрим что получилось:

Вид запущенного рабочего приложения

Кнопочка с ImageView работает нормально. Чтобы анимация повторилась 1 раз, в строке 
animation.setOneShot(false) нужно выставить значение true.

Наша анимация не сильно красива, поэтому сложно увидеть ей применение, но если создать красивую анимацию, то использование такого элемента в интерфейсе программы может оказаться очень полезным и приятным. Кстати, похожую работу мы выполняли в уроке по созданию фреймовой анимации

Категория: Уроки программирования | Просмотров: 1491 | Добавил: Oleg | Теги: анимация, ImageView, программирование Android, анимированная кнопка | Рейтинг: 0.0/0
Всего комментариев: 1
avatar
1 tanyameow13 • 02:30, 17.05.2015
Огромное спасибо! Мучилась с этой кнопкой уже сутки! С Вашим уроком все наконец-то встало на свои места и заработало)
avatar