Главная » Разработка для Android » РЕАЛИЗАЦИЯ АНИМИРОВАННОГО ЭКРАНА-ЗАСТАВКИ

0

Вопросы, рассматриваемые в этом часе:

•             разработка дизайна экрана-заставки;

•             обновление макета экрана-заставки;

•             работа с анимацией.

В этом часе мы сосредоточимся на реализации экрана-заставки для приложения «Been There, Done That!*. Создав эскиз дизайна экрана-заставки, вы сможете точно определить, какие элементы пользовательского интерфейса View платформы Android вам понадобится включить в файл макета splash.xml. Когда вы будете удовлетворены внешним видом макета экрана- заставки. вы сможете добавить несколько анимаций движения, чтобы при­дать экрану-заставке некую пикантность. Наконец, вам нужно создать плавный переход между экраном-заставкой и экраном с основным меню, когда воспроизведение ваших анимаций будет завершено.

РАЗРАБОТКА ДИЗАЙНА ЭКРАНА-ЗАСТАВКИ

Вы будете реализовывать приложение «Been There, Done That!», начав с экрана-заставки, который будет виден пользователям сразу после запуска приложения. Как было отмечено в часе 6, к этому экрану есть несколько требований. В частности, на нем должна отображаться определенная информация о приложении (его название и версия), и затем, по истечении небольшого промежутка времени, должен происходить автоматический переход к экрану основного меню. На рис. 7.1 изображен эскиз дизайна экрана-заставки.

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

 

Рис. 7.2. Дизайн-макет экрана-заставки для приложения «Been There, Done That!»

В дизайне экрана-заставки вы можете использовать элемент-контейнер LinearLayout с вертикальной ориентацией, чтобы разместить элементы пользовательского интерфейса данного экрана в следующем порядке: элемент TextView, элемент-контейнер TableLayout с несколькими элементами TableRow, содержащими элементы ImageView, и два дополнительных элемента TextView. На рис. 7.2 изображен дизайн- проект экрана-заставки.

Добавление новых ресурсов в проект

Теперь, когда у вас есть дизайн-макет экрана-заставки для приложения, настаю время соз­дать строковые ресурсы, ресурсы цветов и размеров, которые будут использованы в макете.

Сначала вы добавите четыре новых графических ресурса в каталог /res/drawable (создав при необходимости этот каталог): splashl.png, splash2.png, splash3.png и splashl.png. Эти изображения будут отображаться внутри элемента-контейнера Table Layout в центре экрана-заставки.

КСТАТИ ________________________________________________________________

Код для данного проекта доступен на прилагаемом к книге диске в папке /Книга/Час 07

Затем вы можете добавить три новых строковых ресурса в файл ресурсов /res/values/strings.xml: один для верхнего заголовка (Been There), один для нижнего заго­ловка (Done That!) и один для информации о версии приложения (эта информация будет многострочной). Строковый ресурс splash теперь можно удалить, поскольку он больше не будет использоваться.

После этого вы создадите новый файл ресурсов /res/values/colors.xml, который будет содержать три необходимых ресурса цвета: один для текста заголовка (золотисто- желтый), один для текста версии приложения (серовато-белый) и один для цвета фона, поверх которого будет отображаться текст версии (насыщенно-синий).

КСТАТИ _______________________________________________________________

Поскольку общий цвет фона заставки будет черным, вам не нужно создавать отдель­ный ресурс цвета. Вместо этого вы просто воспользуетесь встроенным ресурсом плат­формы Android @android: color/black.

Наконец, вам нужно создать несколько ресурсов размеров в новом файле ресурсов /res/values/dimens.xml. Вам потребуется три новых значения размеров: один для управления размером шрифта заголовка (24pt), один для управления размером шрифта версии приложения (5pt) и один для задания промежутка между строками текста с информацией о версии приложения (3 pt).

После того, как вы сохраните файлы ресурсов, можно приступать к использованию новых ресурсов в файле макета splash.xml.

Обновление макета экрана-заставки

Вы могли бы изменить существующий макет splash.xml, но иногда бывает проще начать с нуля, используя редактор ресурсов в среде разработки Eclipse, чтобы удалить все сущест­вующие элементы пользовательского интерфейса. Затем нужно выполнить следующие шаги, чтобы создать желаемый макет экрана в соответствии с разработанным дизайн- макетом.

1.                                  Сначала добавьте новый элемент-контейнер LinearLayout и присвойте его атрибуту background значение @android:color/black, а атрибуту orientation — значение vertical. Все остальные элементы пользовательского интерфейса будут добавляться в элемент-контейнер LinearLayout. Для добавления элементов-представлений View внутрь других элементов или для их перемещения удобно использовать панель Outline (Обзор).

2.                                 Добавьте элемент TextView под названием TextViewTopTitie. При­свойте его атрибуту layout_width значение fill_parent, а атрибуту layout_height — значение wrap_content. Присвойте атрибуту text соответствующий строковый ресурс, атрибуту textColor — ресурс желтого цвета, а атрибуту textSize — соответствующий ресурс размера.

3.                                 Дoбaвьтe элeмeнт-кoнтeйнep TableLayout пoд нaзвaниeм TabeLayout01. Присвойте атрибуту layout_width этого элемента значение fill_parent, а атрибуту layout_height — значение wrap_content. Также присвойте атрибуту stretchColumns значение *, которое позволяет при необходи­мости растягивать любой столбец, чтобы заполнить свободное пространство экрана.

4.                                 Добавьте элемент TableRow внутрь добавленного элемента-контейнера TableLayout. Добавьте два элемента ImageView внутрь элемента TableRow. Для первого элемента ImageView присвойте атрибуту src значение @drawable/splashl, которое соответствует графическому ресурсу splas1.png. Добавьте второй элемент ImageView и присвойте его атрибуту src значение, соответствующее графическому ресурсу splash2.png.

5.                                 Повторите шаг 4, создав второй элемент TableRow. Опять же добавьте два элемента ImageView для графических ресурсов splash3.png и splash4. png.

6.                                 По аналогии с шагом 2 добавьте еще один элемент TextView под назва­нием TextViewBottomTitle внутрь родительского элемента-контейнера

LinearLayout. Присвойте его атрибуту layout_width значение fill___ parent,

а атрибуту layout_height — значение wrap_content. Присвойте атрибуту text соответствующий строковый ресурс, атрибуту textColor — ресурс желтого цвета, а атрибуту textSize — соответствующий ресурс размера.

7.                                  Для отображения информации о версии последний элемент TextView под названием TextViewBottomVersion. Присвойте его атрибутам layout_width и layout_height значение fill_parent. Присвойте атрибуту text соответствующий строковый ресурс, атрибуту textColor – ресурс сероватого цвета, а атрибуту textSize – соответствующий ресурс размера. Также присвойте атрибуту background соответствующий ресурс цвета (темно-синий) и атрибуту lineSpacingExtra – соответствующий ресурс размера, определяющий расстояние между строками.

8.                                 Настройте значения атрибутов layout_gravity и gravity добавленных элементов пользовательского интерфейса, чтобы макет выглядел приемлемо в редакторе ресурсов среды разработки Eclipse.

Теперь сохраните файл макета splash.xml и запустите приложение «Been There, Done That!» на эмуляторе Android. Экран-заставка должен выглядеть так, как показано на рис. 7.3.

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

Рис. 7.3. Экран-заставка приложения «Been There, Done That!»

ИСПОЛЬЗОВАНИЕ АНИМАЦИИ

Отличный способ придать экспрессии вашему экрану-заставке — добавить движение. Платформа Android поддерживает четыре типа анимации:

•             Анимированные GIF-изображения. Это графические файлы, состоящие из нескольких кадров.

•             Покадровая анимация. Инструментарий Android SDK предоставляет механизм покадровой анимации, схожий с механизмом создания анимированных GIF- изображений, когда разработчик добавляет отдельные графические кадры и настраивает переходы между ними (дополнительную информацию можно найти в описании класса AnimationDrawable).

•             Анимация движения. Анимация движения — это простой и универсальный способ определения анимационных действий, которые в дальнейшем могут быть применены к любому элементу-представлению или элементу-контейнеру.

•             Интерфейс OpenGL ES. Интерфейс OpenGL ES платформы Android предоставляет широкие возможности для трехмерного рисования, создания анимаций, настройки освещения и наложения текстур.

Для вашего приложения лучше всего подходит анимация движения. Платформа Android поддерживает анимацию движения с применением альфа- канала, вращения, масштабирования и перемещения. Вы можете создавать наборы анимационных действий, которые могут выполняться одновременно, последовательно или в заданное время. Таким образом, анимация движения — отличный выбор для экрана-заставки.

Создать анимацию движения можно либо программным путем, либо добавив анимационный ресурс в каталог /res/anim. Для каждой анимационной последовательности необходимо создавать отдельный XML-файл, но при этом созданная анимация может применяться к любому числу элементов- представлений View.

ЗНАЕТЕ ЛИ ВЫ, ЧТО… __________________________________

Вы можете использовать анимационные клипы, доступные в классе android.R. anim.

Добавление анимационных ресурсов

Для заставки вам потребуется создать три пользовательских анимационных последова­тельности в виде XML-файлов и сохранить их в каталоге ресурсов /res/anim: fade_in.xml, fade_in2.xml и custom_anim.xml.

Первая анимация, представленная файлом fade_in.xml, плавно увеличивает непрозрачность (альфа-канал) целевого элемента от значения 0 (прозрачный) до значения 1 (непрозрачный) в течение 2500 миллисекунд, или 2,5 секунд. В среде Eclipse нет редактора анимации. Содержимое XML-файла fade_in.xml выглядит следующим образом:

<?xml version=”1.0″ encoding=”utf-8″ ?> <set

xmlns:android=http://schemas.android.com/apk/res/android

android:shareInterpolator=”false”>

<alpha

android:fromAlpha=”0.0″ android:toAlpha=”1.0″ android:duration=”2500″> </alpha> </set>

Вы можете применить эту анимацию к верхнему элементу TextView с названием вашего приложения.

Теперь создайте анимацию fade_in2.xml. Она делает то же самое, что и fade_in.xml, за исключением того, что атрибуту startOffset будет присвоено значение 2500 миллисекунд. Это значит, что ее продолжительность будет составлять 5 секунд: после задержки, равной 2,5 секунды, начинается плавное отображение элемента-представления в течение 2,5 секунды. Поскольку для заставки пяти секунд вполне достаточно, но завершении анимации fade_in2.xml начинается переход к экрану с основным меню.

Наконец, вам потребуется некая забавная анимация для изображений внутри элемента- контейнера TableLayout. В данном случае ваш набор анимационных действий включает несколько операций, выполняющихся одновременно: вращение, масштабирование и изменение альфа-прозрачности, В результате целевой элемент- представление View будет совершать полный оборот вокруг своею центра. Содержимое файла custom_anim.xml выглядит следующим образом:

< ?xmj’version= “1. 0″ encorfhly=”u.tf- 8 ” ?>

<set

xmlns:android=http://schemas.android.com/apk/res/android

android:shareInterpolator=”false”> <rotate

android:fromDegrees=”0″ android:toDegrees=”360″ android:pivotX=”50%” android:pivotY=”50%” android:duration=”2000″ /> <alpha

android:fromAlpha=”0.0″ android:toAlpha=”1.0″ android:duration=”2000″> </alpha> <scale

android:pivotX=”50%” android:pivotY=”50%” android:fromXScale=”.1″ android:fromYScale=”.1″ android:toXScale=”1.0″ android:toYScale=”1.0″ android:duration=”2000″ />

</set>

Как видим, поворот на 360 градусов занимает 2 секунды, при этом вращение осуществляется вокруг центра элемента-представления. Операция по изменению альфа- прозрачности должна быть вам знакома; плавное изменение прозрачности происходит в течение тех же 2 секунд. Наконец, операция по изменению масштаба от 10% до 100% также происходит в течение двухсекундного интервала. Воспроизведение всей анимации занимает 2 секунды.

Сохранив все три файла анимации, вы можете приступать к применению анимаций к конкретным элементам-представлениям.

Анимация конкретных элементов-представлений

Применение и управление анимациями должно производиться программным путем. Не забывайте, что ресурсоемкие операции должны прекращаться, если выполнение приложения приостанавливается по какой-либо причине. Воспроизведение анимации может быть продолжено после того, как приложение снопа перейдет в активное состояние.

Давайте начнем с простейшего случая: применим анимацию fade_in.xml к элементу-пред­ставлению TextView под названием TextviewTopTitle, используемого для отображения названия приложения. Все, что вам нужно, – это получить экземпляр вашего элемента TextView в методе onCreate() класса QuizSplashActivity, загрузить анимационный ресурс в объект Animation и вызвать метод startAnimation() элемента-представления TextView:

TextView logol = (TextView) findViewById(R.id.TextviewTopTitle); Animation fadel = AnimationUtils.loadAnimation(this, R.anim. fade in); logol.startAnimation(fadel);

Если воспроизведение анимации должно быть остановлено — например, в методе onPause() соответствующей деятельности, — вы просто вызываете метод clearAnimation() . Например, следующий метод onPause() демонстрирует этот подход для угловых логотипов:

@Override

protected void onPause() { super.onPause();

// Stop the animation

TextView logo1 = (TextView) findViewById(R.id.TextViewTopTitle);

logo1.clearAnimation();

TextView logo2 = (TextView)

findViewById(R.id.TextViewBottomTitle);

logo2.clearAnimation();

// … stop other animations

}

Анимация всех элементов в элементе-контейнере

Помимо возможности применения анимаций к отдельным элементам View, вы также можете применить анимации к каждому элементу View, содержащемуся в элементе- контейнере (например, в элементе-контейнере TableLayout и к каждому элементу

TableRow), используя класс LayoutAnimationController.

Чтобы анимировать элементы-представления View с использованием данного подхода, вы должны загрузить соответствующую анимацию, создать экземпляр класса LayoutAnimationController, произвести необходимые настройки этого экземпляра и затем вызвать метод setLayoutAnimation() элемента-контейнера. Например, следующий код загружает анимацию custum_anim, создает экземпляр класса LayoutAnimationController и затем применяет эту анимацию к каждому элементу TableRow в элемент-контейнере TableLayout:

Animation spinin = AnimationUtils.loadAnimation(this, R.anim.custom anim);

LayoutAnimationController controller =

new LayoutAnimationController(spinin); TableLayout table = (TableLayout) findViewById(R.id.TableLayoutOl); for (int i = 0; i < table.getChildCount(); i++) { TableRow row = (TableRow) table.getChildAt(i); row.setLayoutAnimation(controller);

}

В данном случае нет необходимости вызывать метод startAnimation(), поскольку для вас это сделает экземпляр класса LayoutAnimationController. При использовании данного подхода анимация применяется к каждому дочернему элементу- представлению, однако воспроизведение каждой анимации начинается в разное время. (По умолчанию задержка составляет 50% от длительности анимации — в данном случае эта задержка равна 1 секунде.) Это создает красивый эффект, когда каждый из элементов- предстаатений ImageView поочередно делает полный оборот вокруг своего центра.

Остановка анимаций, реализуемых при помощи экземпляра класса LayoutAnimationController, ничем не отличается от остановки отдельных анимаций: для этого применяется метод clearAnimation() . Дополнительные строки кода, которые потребуется добавить в существующий метод onPause (), представлены ниже:

TableLayout table = (TableLayout) findViewById(R.id.TableLayout01); for (int i = 0; i < table.getChildCount(); i++) { TableRow row = (TableRow) table.getChildAt(i); row.clearAnimation();

}

Обработка событий жизненного цикла анимаций

Теперь, когда вы не можете нарадоваться на ваши анимации, осталось создать переход между деятельностями QuizSplashActivity и QuizMenuActivity по завершении воспроизведения анимаций. Для этого вы создадите новый объект типа Intent, который будет создавать экземпляр класса QuizMenuActivity и вызывать метод startActivity(). Вы также должны вызывать метод finish() класса QuizMenuActivity, поскольку хранить эту деятельность в стеке нет необходимости (если вы не хотите, чтобы при нажатии на кнопку Back пользователь возвращался к экрану-заставке).

Из всех ваших анимаций самая длинная — fade_in2, продолжительностью 5 секунд. Таким образом, момент завершения воспроизведения этой анимации можно использовать in я запуска процесса перехода к экрану с основным меню. Для этого нужно создать экземпляр класса AnimationListener, который имеет методы обработки событий для жизненного цикла анимации: начало, конец и повторение. В данном случае нас интересует только метод onAnimationEnd () . Ниже представлен код, который создает экземпляр класса AnimationListener и реализует метод обработки событий onAnimationEnd() :

Animation fade2 = AnimationUtils.loadAn7maft’on(this, R.anim.fade_in2); fade2.setAnimationListener(new AnimationListener() { public void onAnimationEnd(Animation animation) { startActivity(new Intent(QuizSplashActivity.this,

QuizMenuActivity. class)); QuizSplashActivity. this.finish();

}

});

Теперь, если снова запустить приложение «Been There, Done That!» на эмуляторе или на мобильном телефоне, вы увидите привлекательную анимацию на экране-заставке. После завершения воспроизведения анимации происходит плавный переход к экрану с основным меню, реализацией которого вы займетесь в следующем часе.

ИТОГИ

Примите наши поздравления! Вы завершили работу над вашим первым экраном опроса- викторины «Been There, Done That!». В этом часе вы разработали дизайн экрана-заставки, а также определили подходящий дизайн- макет и элементы представления View, необходимые для реализации данного дизайна. После этого вы добавили необходимые ресурсы и внесли изменения в файл макета splash.xml. Наконец, вы добавили несколько анимаций движения на заставку и затем реализовали переход между деятельностями QuizSplashActivity и QuizManuActivity.

ВОПРОСЫ И ОТВЕТЫ

Вопрос: Насколько хорошо платформа Android справляется с анимациями?

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

Вопрос: Почему в цикле вы обращаетесь к каждому дочернему элементу в элементе- контейнере TableLayout вместо того, чтобы обращаться к каждому элементу

TableRow(R. id. TableRowOl и R. id.TableRow02)по его имени?

Ответ: Обращаться к каждому элементу TableRow по его имени совершенно допустимо при условии, что это имя существует. Вы сможете воспользоваться преимуществом данного итеративного подхода в дальнейшем, когда будете адаптировать ваш проект для различных ориентаций экрана. На данный момент экран-заставка отображается хорошо только в портретной ориентации.

Вопрос: Что произойдет, если применить экземпляр класса Layout

AnimationController к элементу-контейнеру TableLayout, а не к каждому элементу TableRow?

Ответ: Если применить экземпляр класса LayoutAnimationController к элементу- контейнеру TableLayout, полный оборот вокруг своего центра совершит каждый элемент TableRow, а не каждый элемент ImageView. Это будет совершенно другой, менее привлекательный, эффект.

ПРАКТИКУМ Контрольные вопросы

1.                                 Не существует способа остановить воспроизведение анимации. Верно ли этой?

2.                                 Какие типы операций поддерживаются анимациями движения?

A.                                Альфа-прозрачность, движение и трехмерное вращение.

B.                                 Альфа-прозрачность, масштабирование, вращение и переходы.

C.                                Танцы, пение и веселье.

3.                 Элемент-контейнер LinearLayout может быть использован для размеще­

ния всех дочерних элементов-представлений View друг за другом (по вертикали). Верно ли это?

Литература: Дэрси JI., Android за 24 часа. Программирование приложений под операционную систему Google/ ДэрсиЛ., КондерШ. — М.: Рид Групп, 2011. — 464 с. — (Профессиональные компьютерные книги). ISBN 978-5-4252-0318-2

По теме:

  • Комментарии