Главная » Делаем анимированную кнопку с помощью 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 раз, в строке Наша анимация не сильно красива, поэтому сложно увидеть ей применение, но если создать красивую анимацию, то использование такого элемента в интерфейсе программы может оказаться очень полезным и приятным. Кстати, похожую работу мы выполняли в уроке по созданию фреймовой анимации. | |
|
Всего комментариев: 1 | |
0
Спам
| |