Skip to main content

User Interface

Со всеми приложениями пользователь взаимодействует через интерфейс - User Interface (UI). Ранее мы уже задели создание интерфейса, а в данном блоке рассмотрим эту тему детальнее.

Основы​

Для начала нужно ознакомиться с главными UI классами:

  • Activity - окно приложения, единственное что показывает UI в Android пользователю
  • Fragment - часть UI (может быть отдельным экраном приложения, может частью экрана)
  • View - небольшой блок пользовательского интерфейса, например текст, кнопка, поле ввода и т.д.

Для ознакомления на практике пройти уроки из официального Android курса - Android Basics - Layouts.

Про Fragment полезно пройти CodeLab - Advanced Android 01.1: Fragments (в CodeLab используется Java, но при выполнении можно использовать Kotlin).

Также, для изучения жизненного цикла Activity и Fragment, хорошо подойдет CodeLab Android Kotlin Fundamentals: Lifecycles and logging и её продолжение - Android Kotlin Fundamentals: Complex Lifecycle Situations

Вопросы для самопроверки:

  • Чем отличаются Activity и Fragment?
  • Какой жизненный цикл Activity?
  • Какой жизненный цикл Fragment?
  • Что произойдет с введенным в EditText текстом, если произойдет изменение конфигурации (например поворот экрана)?
  • Как сохранить положение скролла в RecyclerView или ScrollView при повороте экрана?

Экраны и навигация​

Современные android приложения строятся по подходу Single Activity, о котором рассказано в следующем видео.



В дополнение можно прочитать статью на русском языке.

Для построения навигации между экранами Google рекомендует использовать Android Navigation Component, который наиболее полнофункционален именно с подходом Single Activity, когда мы в пределах одного Activity переходим между разными Fragment'ами.

Более подробно изучить работу с навигацией и попрактиковаться можно по следующим урокам:

Обязательно прочитайте про передачу данных между компонентами. Из этой статьи вы узнаете:

  • как правильно передавать данные между Fragment-ами и Activity
  • почему следует передавать идентефикаторы данных, а не сами данные
  • как реализовать строгое API передачи данных

Верстка экрана​

Верстка UI в Android на данный момент возможна несколькими способами:

  1. Jetpack Compose - новый, современный подход, declarative UI
  2. XML layouts - все еще наиболее популярный, но начинающий устаревать

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

info

Тем кто заинтересован посмотреть что такое Jetpack Compose подойдет набор уроков от Google - Jetpack Compose

С версткой через xml можно познакомиться через CodeLab - Android Kotlin Fundamentals: LinearLayout using the Layout Editor

Многое в практиках от Google показывается через Layout Editor, но важно также смотреть и понимать что получается в результирующем xml. Чтобы понимать, к чему приводят действия в Layout Editor, читайте xml после действий в редакторе.

Также, общепринятой практикой при верстке через xml является использование tools для всех UI элементов.

ConstraintLayout​

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

Подробно про ConstraintLayout - Build a Responsive UI with ConstraintLayout. И практика для закрепления Use ConstraintLayout to design your Android views.

RecyclerView​

Важный элемент практически всех мобильных приложений - список элементов. На Android он реализуется с помощью RecyclerView. Подробно ознакомиться с концептом этого элемента и попрактиковаться можно в CodeLab - Android Kotlin Fundamentals: RecyclerView fundamentals.
Чтобы лучше разобраться с требованиями к RecyclerView.Adapter рекомендуем прочитать статью.

Вопросы для самопроверки:

  • Что такое RecyclerView?
  • В каких случаях нужен RecyclerView, а в каких достаточно LinearLayout?

Связь верстки и кода​

Для обращения к UI элементам из кода мы используем инструмент View Binding. Он из xml layout'ов автоматически генерирует классы, которые мы можем использовать в коде и обращаться к разным view как к полям этого сгенерированного класса.

Также можно посмотреть следующее видео:



AndroidX & Jetpack​

В текущем блоке мы использовали разные библиотеки от AndroidX и Jetpack. Разберемся с тем что это за библиотеки.

AndroidX - набор библиотек, обеспечивающих поддержку более новых API на старых версиях устройств. Они позволяют разработчику не задумываться о том, на какой версии android будет запускаться приложение, когда требуемый функционал менялся между разными релизами android. В прошлом этот набор библиотек назывался Android Support Libraries. Рекомендуется использовать AndroidX API, так как оно обновляется чаще релизов Android OS и может включать множество разных багфиксов (как и новых багов, куда без них).

Jetpack - набор библиотек (включающий и AndroidX), предоставляющий множество готовых решения для разных типовых задач разработки приложений - базы данных, архитектурные компоненты, работа с постраничной загрузкой, удобная работа с камерой и прочее (список библиотек большой, можно посмотреть на сайте).

Забота о User Experience (UX)​

Разработчики приложений должны стремиться к удобному и понятному пользовательскому опыту. Важно помнить, что мы пишем код не для себя, а чтобы пользователи могли получить приложение которое решает их задачи. Приложение может приносить боль при использовании, а может быть приятным, быстрым и удобным. Ставьте себя на место пользователя, когда делаете какой либо функционал, и спрашивайте "а пользовался бы я сам таким решением?".

В CodeLab Google подготовили набор советов, как сделать приложение удобнее и понятнее - Create a more polished user experience.

А также многое про удобство можно прочитать на сайте material.io - разделы Interaction и Communication очень детально и наглядно объясняют как можно создавать комфортное использование приложения. Многие принципы применимы не только на android, но и на любой системе с UI.

Изменения конфигурации​

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

Practice time​

Сделать приложение по дизайну.

  1. Создать приложение с шаблона Empty Activity
  2. Создать data class Contact(val firstName: String, val lastName: String, val avatarResourceId: Int)
  3. Объявить глобальное свойство contacts: List<Contact> в котором написать 5 или больше разных контактов - это будут данные нашего приложения
  4. Добавить 2 фрагмента - ContactsFragment и ContactFragment
  5. На фрагменте ContactsFragment расположить RecyclerView отрисовывающий множество элементов - разные контакты
  6. На фрагменте ContactFragment с помощью ConstraintLayout сверстать UI экрана просмотра контакта
  7. С помощью Android Navigation Component сделать переходы между списком и просмотром контакта
  8. Удостовериться в том, что приложение корректно обрабатывает смену конфигурации: локализации, темы, ориентации экрана, увеличение шрифта