Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

Введение в новые переходы активности Lollipop

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Dima (you can also view the original English article)

What You'll Be Creating

Введение

Одним из наиболее интересных аспектов спецификаций Material Design является визуальная непрерывность действий. С помощью всего лишь нескольких строк кода новые API Lollipop позволяют значительно трансформировать два действия благодаря бесшовной и непрерывной анимации. Это нарушает классические границы активности предыдущих версий Android и позволяет пользователю понять, как элементы переходят из одной точки в другую.

В этом уроке я покажу вам, как достичь этого результата, сделав пример приложения совместимым с Руководством Google Material Design.

Необходимые условия

В этом уроке я предполагаю, что вы уже знакомы с разработкой Android и используете Android Studio в качестве своей среды разработки. Я буду интенсивно использовать намерения Android, предполагая базовые знания жизненного цикла деятельности и новый виджет RecyclerView, представленный с API 21, в июне прошлого года. Я не буду погружаться в детали этого класса, но, если вам интересно, вы можете найти отличное объяснение в этом уроке Tuts +.

1. Создайте первое действие

Базовая структура приложения проста. Существует два основных действия MainActivity.java, задача которых состоит в отображении списка элементов, а вторая - DetailActivity.java, в котором будут показаны детали элемента, выбранного в предыдущем списке.

Шаг 1: Виджет RecyclerView

Чтобы отобразить список элементов, основное действие будет использовать виджет RecyclerView, представленный в Android Lollipop. Первое, что вам нужно сделать, - добавить следующую строку в раздел зависимостей в файле build.grade вашего проекта, чтобы обеспечить обратную совместимость:

Шаг 2: Определение данных

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

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

Определяя данные как public и static, каждый класс в проекте может ее прочитать. В некотором смысле мы имитируем поведение базы данных, за исключением того, что мы жестко кодируем ее в класс.

Шаг 3: Определение основных макетов

Макет основной деятельности прост, потому что список заполнит весь экран. Макет включает RelativeLayout в качестве корня, но он также может быть также LinearLayout- и RecyclerView как его единственный ребенок.

Поскольку виджет RecyclerView упорядочивает подэлементы и не более того, вам также нужно создать макет одного элемента списка. Мы хотим иметь цветной круг слева от каждого элемента списка контактов, поэтому вам сначала нужно определить drawable circle.xml.

Теперь у вас есть все элементы, необходимые для определения макета элемента списка.

Шаг 4. Отображение данных с помощью RecyclerView

Мы почти достигли конца первой части учебника. Вам все еще нужно написать RecyclerView.ViewHolder и RecyclerView.Adapter и назначить все для связанного представления в методе onCreate основного действия. В этом случае RecyclerView.ViewHolder также должен иметь возможность обрабатывать клики, поэтому вам нужно будет добавить определенный класс, способный это сделать. Давайте начнем определять класс, ответственный за обработку кликов.

Необходимо указать RecyclerView.Adapter, который я буду называть DataManager. Он отвечает за загрузку данных и вставку их в представления списка. Этот класс диспетчера данных также будет содержать определение RecyclerView.ViewHolder.

Наконец, добавьте следующий код в метод onCreate, ниже setContentView. Основное готово.

Это выглядит как приложение, если вы его создаете и запускаете.

First Activity when completed

2. Создайте детали действий

Шаг 1: Расположение

Второе действие намного проще. Он выбирает идентификатор контакта и извлекает дополнительную информацию, которую не показывает первая активность.

С точки зрения дизайна, макет этого действия имеет решающее значение, поскольку он является самой важной частью приложения. Но что касается XML, это тривиально. Макет - это серия экземпляров TextView, расположенных в приятном ключе с использованием RelativeLayout и LinearLayout. Вот как выглядит макет:

Шаг 2: Отправка и получение ID через Intent Extras

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

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

Это будет работать, но если вы примете этот подход и по какой-либо причине набор данных будет изменен во время выполнения, ссылка не будет соответствовать интересующему вас контакту. Именно по этой причине лучше использовать ID ad hoc. Эта информация является методом getId, определенным в классе Contact.

Измените обработчик onItemClick списка элементов, как показано ниже.

Функция DetailsActivity получит информацию из дополнительных опций Intent и построит правильный объект, используя ID в качестве ссылки. Это показано в следующем блоке кода.

Как и в методе onCreateViewHolder RecylerView, представления инициализируются с помощью метода findViewById и заполняются с помощью setText. Например, чтобы настроить поле имени, мы делаем следующее:

Этот процесс одинаковый для других полей. Второе действие наконец готово.

Second Activity when completed

3. Целенаправленные переходы

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

Шаг 1: Настройка проекта

Первое, что вам нужно сделать, это отредактировать свою тему в файле style.xml в папке values-v21. Таким образом, вы включаете переходы контента и устанавливаете вход и выход из представлений, которые не разделены между двумя действиями.

Обратите внимание, что ваш проект должен быть нацелен (и, следовательно, скомпилирован), по крайней мере, на Android API 21.

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

Шаг 2. Назначьте имя перехода в файлах макета

После того, как вы отредактировали файл style.xml, вы должны указать связь между двумя общими элементами представлений.

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

Затем для каждой из трех пар в файлах макета добавьте атрибут android: transitionName с соответствующим значением. Для цветного круга код выглядит следующим образом:

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

Шаг 3: Настройка намерения

С точки зрения кодирования вам нужно будет привязать конкретный пакет ActivityOptions к намерению. Вам нужен метод makeSceneTransitionAnimation, который принимает в качестве параметров контекст приложения и столько общих элементов, сколько нам нужно. В методе onItemClick RecyclerView отредактируйте ранее определенное Intent следующим образом:

Для каждого общего элемента, который нужно анимировать, вам нужно будет добавить в метод makeSceneTransitionAnimation новый элемент Pair. Каждая Pair имеет два значения, первая - это ссылка на представление, из которого вы переходите, вторая - значение атрибута transitionName.

Будьте осторожны при импорте класса Pair. Вам нужно будет включить пакет android.support.v4.util, а не пакет android.util. Кроме того, не забудьте использовать метод ActivityCompat.startActivity вместо метода startActivity, поскольку в противном случае вы не сможете запускать приложение в средах с API ниже 16.

Вот и все. Все готово. Это так просто.

Заключение

В этом уроке вы узнали, как красиво и плавно переходить между двумя видами деятельности, которые разделяют один или несколько общих элементов, позволяя визуально приятную и значимую непрерывность.

Вы начали с создания первого из двух видов деятельности, роль которых - отображение списка контактов. Затем вы завершили вторую деятельность, разработали ее макет и реализовали способ передачи уникальной ссылки между двумя видами деятельности. Наконец, вы посмотрели, как работает makeSceneTransitionAnimation, благодаря атрибуту XML transitionName.

Бонусный совет: стилистические подробности

Чтобы создать истинное приложение для создания Material Design, как показано на предыдущих снимках экрана, вам также нужно будет изменить цвета вашей темы. Измените базовую тему в папке values-v21, чтобы добиться хорошего результата.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.