Руководство по интерфейсу андроид

В конце декабря 2021-го Android обновил рекомендации по архитектуре мобильных приложений. Публикуем перевод гайда в пяти частях:

Обзор архитектуры

Слой UI (вы находитесь здесь)

События UI

Доменный слой

Слой данных

UI отображает данные приложения на экране: это основное место взаимодействия с пользователями. Если отображаемые данные меняются — из-за взаимодействия с пользователем (например, нажатия кнопки) или внешнего воздействия (например, отклика сети) — UI должен обновиться и отразить изменения. По сути UI – это состояние приложения, полученное из слоя данных и представленное визуально.

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

Разберём простой пример

Представим приложение с новостями: оно показывает экран со статьями. Если пользователь вошёл в систему, он может добавлять интересные материалы в закладки. Статей много, поэтому у читателя должна быть возможность фильтровать их по категориям.

Таким образом, приложение позволяет пользователям:

• Просматривать доступные для прочтения статьи.

• Фильтровать их по категориям.

• Войти в систему и добавить интересные статьи в закладки.

• Пользоваться премиальными фичами, если к ним есть доступ.

В следующих разделах будем использовать это приложение как пример. Вы познакомитесь с принципами Unidirectional Data Flow (UDF) и узнаете, с какими проблемами в контексте архитектуры приложения в слое UI они помогают разобраться.

Архитектура слоя UI

Под термином UI подразумеваются UI-элементы (например, Activity и Fragment), которые отображают данные: вне зависимости от того, какими API они пользуются для этой цели — View или Jetpack Compose. Цель слоя данных — хранить данные приложения, управлять ими и открывать к ним доступ. Поэтому слой UI должен:

1. Принимать данные приложения и преобразовывать их в данные, которые UI легко сможет отрисовать.

2. Принимать данные, которые может отрисовать UI, и преобразовывать их в элементы UI, которые будут показаны пользователю.

3. Принимать события о вводе данных пользователем от элементов UI из пункта 2 и отражать в данных UI изменения, которые они вносят.

4. Повторять шаги 1–3 необходимое количество раз.

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

• Как описать UI-состояние.

• UDF: как с его помощью создать UI-состояние и управлять им.

• Как открывать доступ к UI-состоянию с помощью данных типа observable в соответствии с принципами UDF.

• Как реализовать UI, который принимает UI-состояние типа observable.

Самая базовая из этих задач — описание UI-состояния.

Как описывать UI-состояния

Вернёмся к примеру: UI показывает список статей и метаданные для каждой из них. Информация, которую приложение показывает пользователю, и есть UI-состояние.

UI – то, что пользователь видит на экране. С помощью UI state приложение управляет тем, что пользователь увидит на экране.

Два этих понятия — как две стороны одной монеты: UI — это визуальное представление UI-состояния. Любые изменения UI-состояния немедленно отражаются в UI.

Чтобы выполнить требования новостного приложения, информацию, необходимую для полной отрисовки UI, можно инкапсулировать в класс данных NewsUiState, который описывают следующим образом:

data class NewsUiState(

    val isSignedIn: Boolean = false,

    val isPremium: Boolean = false,

    val newsItems: List<NewsItemUiState> = listOf(),

    val userMessages: List<Message> = listOf()

)

data class NewsItemUiState(

    val title: String,

    val body: String,

    val bookmarked: Boolean = false,

    ...

)

Неизменяемость

В предыдущем примере UI-состояние описано как неизменяемое. Основное преимущество такого подхода — неизменяемые объекты гарантируют целостность состояния приложения в любой момент времени. 

Благодаря этому UI может полностью сконцентрироваться на единственной задаче: считывать состояние и в соответствии с ним обновлять элементы UI. Из этого следует, что менять UI-состояние в UI напрямую нельзя — если только UI сам по себе не является единственным источником получаемых им данных. 

Если нарушить этот принцип, у одной и той же информации появится несколько source of truth (источников истины), что приведёт к противоречивости данных и багам, которые трудно обнаружить.

Скажем, если бы в флаг bookmarked в объекте NewsItemUiState из UI-состояния обновлялся в классе Activity, за статус статьи «сохранена» отвечали бы параллельно и этот флаг, и слой данных. Неизменяемые классы помогают успешно предотвратить возникновение таких антипаттернов.

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

Правила именования в этом гайде

Классы UI-состояния названы в соответствии с описываемой ими функциональностью на экране или части экрана. Правило выглядит следующим образом:

функциональность + UiState

К примеру, состояние, при котором на экране отображены новости, будет называться NewsUiState. Состояние, при котором статья отображается в списке статей, — NewsItemUiState.

Как управлять состоянием с помощью UDF

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

Лучше обрабатывать эти взаимодействия с помощью дополнительной сущности:

• она будет описывать логику, применяемую к каждому событию,

• и трансформировать данные, получаемые из источников, чтобы создать UI-состояние. 

Такие взаимодействия и их логика могут располагаться непосредственно в UI, однако такой подход быстро приведёт к нагромождению кода: UI будет постепенно выходить за рамки своего определения, начнёт распоряжаться данными, производить их, преобразовывать и так далее. 

Это может сказаться и на удобстве тестирования: код превратится в сплав тесно связанных элементов без чётко выраженных границ. По большому счёту UI только выигрывает от того, что нагрузка на него сокращается. Единственной ответственностью UI должно быть получение и отображение UI-состояния — за исключением случаев, когда UI-состояние элементарно.

В этом разделе рассматривается UDF — архитектурный шаблон, который помогает привести код в порядок, разделив ответственности.

State holder

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

В последнем случае его реализация – это, как правило, экземпляр ViewModel. Однако, в зависимости от требований приложения, иногда можно обойтись обычным классом. Так, новостное приложение из примера использует в качестве state holder класс NewsViewModel: он производит UI-состояние для экрана, изображённого в начале статьи.

Ключевой момент: тип ViewModel — реализация, у которой есть доступ к слою данных. С помощью него рекомендуется управлять UI-состоянием в масштабе целого экрана. Помимо прочего, он автоматически переживает изменения конфигураций. Класс ViewModel определяет логику, которая применяется к событиям в приложении, и в результате производит обновлённое состояние.

Смоделировать взаимозависимость между UI и сущностью, которая производит его состояние, можно множеством способов. Так как под взаимодействием между UI и его классом ViewModel по большей части подразумевают ввод некоего события и вывод соответствующего состояния, их отношения можно изобразить следующим образом:

UDF — паттерн, в котором поток состояния направлен вниз, а поток событий – вверх. Вот что этот паттерн даёт архитектуре приложения:

• ViewModel хранит состояние и открывает к нему доступ для UI. UI-состояние – это данные приложения, преобразованные ViewModel.

• UI уведомляет ViewModel о пользовательских событиях.

• ViewModel обрабатывает действия пользователя и обновляет состояние.

• Обновлённое состояние возвращается обратно в UI, а тот его отрисовывает.

• Все предыдущие пункты повторяются с каждым событием, меняющим состояние.

В случае с конечными точками навигации или экранами ViewModel получает данные из репозиториев или классов UseCase, а затем преобразует их в UI-состояния, применяя к ним эффекты событий, вызвавших изменение состояния. В упомянутом ранее примере есть список статей: у каждой указаны заголовок, описание, источник, имя автора, дата публикации и возможна пометка «добавлено в закладки». UI каждой статьи выглядит так:

Когда пользователь отправляет запрос, чтобы добавить статью в закладки, он создаёт событие, которое способно изменить состояние. Так как ViewModel производит состояния, его ответственность – описывать логику, необходимую для заполнения всех полей в UI-состоянии, и обрабатывать события, без которых UI не сможет отрисоваться полностью.

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

Виды логики

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

• Логика поведения UI или логика UI — то, как мы отображаем изменения состояния на экране. Например, с помощью Android Resources получаем текст, который нужно отобразить на экране; переходим на нужный экран, когда пользователь нажимает на кнопку; или показываем пользователю сообщение на экране с помощью Toast или Snackbar.

Логика UI, в особенности когда она затрагивает такие типы UI, как Context, должна находиться в UI, а не во ViewModel. Если UI приложения усложняется, и вам хочется делегировать логику UI другому классу, чтобы разделить ответственности и легче тестировать приложение, можно создать простой класс, который будет выполнять роль экземпляра state holder. Простые классы, созданные в UI, могут получать зависимости от Android SDK: их жизненный цикл ограничен жизненным циклом UI, в то время как объекты ViewModel живут дольше.

Подробнее о state holder и том, как он помогает построить UI, можно почитать в гайде «Jetpack Compose State».

Зачем использовать UDF

UDF моделирует цикл производства состояний, как показано на рисунке выше. Также он отделяет источник изменений состояния от места их трансформации и получения. Благодаря такому разделению UI может выполнять только те действия, которые следуют из его названия: отслеживать изменения состояния и сообщать о намерениях пользователя, передавая эти изменения во ViewModel, а в результате отображать информацию.

Другими словами, UDF позволяет добиться:

• Согласованности данных. У UI есть только один источник правды.

• Удобства тестирования. Источник состояния изолирован, а значит, его можно тестировать отдельно от UI.

• Надёжности. Изменение состояния следует чётко заданному паттерну: изменения вызываются пользовательскими событиями и источниками данных, которые они запрашивают.

Как предоставлять доступ к UI-состоянию

После того, как вы описали UI-состояние и определили, как будете управлять его производством, следующий шаг – предоставить UI доступ к готовому состоянию. 

Так как вы управляете производством состояния с помощью UDF, рекомендуется сделать производимое состояние потоком — другими словами, в процессе работы программы будет произведено несколько версий этого состояния. В таком случае доступ к UI-состоянию следует предоставить с помощью observable-обёртки над данными, к примеру LiveData или StateFlow. Это нужно сделать, чтобы UI мог реагировать на все изменения, внесённые в состояние, и вам не приходилось вручную получать данные прямо из ViewModel. 

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

Views

class NewsViewModel(...) : ViewModel() {

val uiState: StateFlow = …

}

Compose

class NewsViewModel(...) : ViewModel() {
  
    val uiState: NewsUiState = …
  
}

Вводную информацию об использовании LiveData в качестве observable-обёртки над данными можно прочитать в этом кодлабе. Вводную информацию о flow в Kotlin — в статье «Flow в Kotlin на Android».

Важно: чтобы предоставить доступ к UI-состоянию в приложениях с Jetpack Compose, можно использовать его родные observable State API, например mutableStateOf или snapshotFlow. Все указанные в этом гайде типы observable-обёрток над данными, такие как StateFlow или LiveData, легко можно использовать в Compose с помощью соответствующих extension функций.

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

Поток данных UiState зачастую создают, предоставляя из ViewModel доступ к приватному изменяемому потоку как к неизменяемому: например, доступ к MutableStateFlow<UiState> как к StateFlow<UiState>.

Views

class NewsViewModel(...) : ViewModel() {

    private val _uiState = MutableStateFlow(NewsUiState())

    val uiState: StateFlow<NewsUiState> = _uiState.asStateFlow()

    ...

}

Compose

class NewsViewModel(...) : ViewModel() {

    var uiState by mutableStateOf(NewsUiState())
        private set

    ...
}

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

Views

class NewsViewModel(
    private val repository: NewsRepository,
    ...
) : ViewModel() {

    private val _uiState = MutableStateFlow(NewsUiState())
    val uiState: StateFlow<NewsUiState> = _uiState.asStateFlow()

    private var fetchJob: Job? = null

    fun fetchArticles(category: String) {
        fetchJob?.cancel()
        fetchJob = viewModelScope.launch {
            try {
                val newsItems = repository.newsItemsForCategory(category)
                _uiState.update {
                    it.copy(newsItems = newsItems)
                }
            } catch (ioe: IOException) {
                // Handle the error and notify the notify the UI when appropriate.
                _uiState.update {
                    val messages = getMessagesFromThrowable(ioe)
                    it.copy(userMessages = messages)
                 }
            }
        }
    }
}

Compose

class NewsViewModel(
    private val repository: NewsRepository,
    ...
) : ViewModel() {

   var uiState by mutableStateOf(NewsUiState())
        private set

    private var fetchJob: Job? = null

    fun fetchArticles(category: String) {
        fetchJob?.cancel()
        fetchJob = viewModelScope.launch {
            try {
                val newsItems = repository.newsItemsForCategory(category)
                uiState = uiState.copy(newsItems = newsItems)
            } catch (ioe: IOException) {
                // Handle the error and notify the notify the UI when appropriate.
                val messages = getMessagesFromThrowable(ioe)
                uiState = uiState.copy(userMessages = messages)
            }
        }
    }
}

В примере выше класс NewsViewModel пытается составить выборку статей определённой категории. Затем отражает результаты попытки — удачные или неудачные — в UI-состоянии, на которое UI реагирует соответствующим образом. Чтобы узнать больше о работе с ошибками, прочитайте раздел «Отображение ошибок на экране».

Важно: шаблон из предыдущего примера, где состояние изменяют посредством функций во ViewModel, — одна из наиболее популярных реализаций UDF.

Дополнительные рекомендации

Предоставляя доступ к UI-состоянию, следует учитывать:

• Объект UI-состояния должен обрабатывать состояния, которые связаны друг с другом. В таком случае неконсистентность будет возникать реже, а код будет проще понять. Если открыть доступ к списку статей и количеству сохранённых статей в двух разных потоках данных, можно оказаться в ситуации, где одни данные обновились, а другие – нет. Если использовать один поток, оба элемента будут содержать актуальные данные.

  Более того, в некоторых случаях бизнес логика может потребовать слияния источников. К примеру, вам может потребоваться показывать кнопку «добавить в закладки» только если пользователь зарегистрировался и подписан на премиум услугу. В таком случае класс UI-состояния можно описать следующим образом:

data class NewsUiState(
    val isSignedIn: Boolean = false,
    val isPremium: Boolean = false,
    val newsItems: List<NewsItemUiState> = listOf()
)

val NewsUiState.canBookmarkNews: Boolean get() = isSignedIn && isPremium

В этом описании наличие или отсутствие кнопки «добавить в закладки» — это свойство, унаследованное от двух других свойств. Чем сложнее становится бизнес-логика приложения, тем удобнее иметь один единственный класс UiState, где в вашем распоряжении есть все свойства.

• UI-состояния: один поток или несколько? Если вы выбираете, открыть доступ к UI-состоянию в одном потоке или в нескольких, основным ориентиром должен стать предыдущий пункт: связь между отправляемыми элементами.

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

  • Типы данных, не связанные друг с другом. Некоторые состояния, необходимые для отрисовки UI, могут абсолютно не зависеть друг от друга. В таких случаях результат объединения различных состояний может не оправдать затраченных ресурсов, в особенности если одно из состояний обновляется чаще второго.

  • Сравнение UiState. Чем больше в объекте UiState полей, тем вероятнее, что поток будет отправлять данные при обновлении одного из его полей. View обновляется в каждом случае: у него нет механизма сравнения, с помощью которого можно было бы понять, отличаются отправляемые друг за другом данные или нет. В такой ситуации для решения проблемы вам могут потребоваться Flow API или методы типа distinctUntilChanged() на LiveData.

Как принимать UI-состояния

Чтобы UI начал получать UiState из потока, используется терминальный оператор, соответствующий конкретному observable-типу данных в коде. Например, в случае с LiveData используется метод observe(), а в случае с flow в Kotlin – метод collect() или его вариации.

Когда запускаете получение observable-обёрток над данными в UI, убедитесь, что учли жизненный цикл UI. Это важно: UI не должен отслеживать UI-состояние, когда view пользователю не показывают. 

Подробнее тему можно изучить в посте «A safer way to collect flows from Android UIs». Когда используется LiveData, LifecycleOwner сам решает вопрос жизненных циклов. В случае с flow лучше использовать соответствующий coroutine scope и repeatOnLifecycle API:

Views

class NewsActivity : AppCompatActivity() {

    private val viewModel: NewsViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                viewModel.uiState.collect {
                    // Update UI elements
                }
            }
        }
    }
}

Compose

@Composable
fun LatestNewsScreen(
    viewModel: NewsViewModel = viewModel()
) {
    // Show UI elements based on the viewModel.uiState
}

Важно: объекты StateFlow, использованные в этом примере, не прекращают работу, когда у них нет активных получателей данных. Но, работая с flow, вы можете и не знать, как они реализованы. Получение данных flow с учётом жизненного цикла позволяет вносить подобные изменения в потоки ViewModel позднее — без необходимости дорабатывать код получателя данных.

Как отображать прогресс выполнения операций

Проще всего отобразить состояние загрузки в классе UiState с помощью поля boolean:

data class NewsUiState(

    val isFetchingArticles: Boolean = false,

    ...

)

Значение этого флага указывает на наличие или отсутствие прогресс-бара в UI.

Views

class NewsActivity : AppCompatActivity() {

    private val viewModel: NewsViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        lifecycleScope.launch {
            repeatOnLifecycle(Lifecycle.State.STARTED) {
                // Bind the visibility of the progressBar to the state
                // of isFetchingArticles.
                viewModel.uiState
                    .map { it.isFetchingArticles }
                    .distinctUntilChanged()
                    .collect { progressBar.isVisible = it }
            }
        }
    }
}

Compose

@Composable
fun LatestNewsScreen(
    modifier: Modifier = Modifier,
    viewModel: NewsViewModel = viewModel()
) {
    Box(modifier.fillMaxSize()) {

        if (viewModel.uiState.isFetchingArticles) {
            CircularProgressIndicator(Modifier.align(Alignment.Center))
        }

        // Add other UI elements. For example, the list.
    }
}

Отображение ошибок на экране

Показывать ошибки в UI – то же самое, что показывать прогресс выполнения операции: оба случая легко представить с помощью Boolean-значения, которое обозначает наличие или отсутствие чего-либо. 

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

Возьмём пример из предыдущего раздела, где в процессе поиска статей отображался прогресс-бар. Если в результате операции возникнет ошибка, вы, возможно, захотите показать пользователю сообщение «что пошло не так».

data class Message(val id: Long, val message: String)

data class NewsUiState(

    val userMessages: List<Message> = listOf(),

    ...

)

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

Потоки и параллелизм

Любая операция, которую мы выполняем в ViewModel, должна быть main-safe: вызывать её из главного потока должно быть безопасно. За переключение работы в другой поток отвечают слои данных и предметной области.

Если ViewModel выполняет продолжительные операции, она также отвечает за перемещение этой логики в фоновый поток. Корутины в Kotlin – отличный способ управления параллельными операциями, а Jetpack Architecture Components предоставляют встроенную поддержку корутин. Вы можете подробнее узнать о том, как использовать корутины в приложениях на Android, если прочитаете статью «Корутины Kotlin в Android».

Навигация

Изменения в навигации приложения зачастую обусловлены получением событий или подобных им сущностей. К примеру, после того, как класс SignInViewModel выполняет регистрацию, поле isSignedIn в UiState может иметь значение true. Такие триггеры следует принимать так же, как и описанные в предыдущем разделе Как принимать UI-состояния. Единственное исключение состоит в том, что получатель состояния следует реализовать, полагаясь на Navigation component.

Пагинация

Paging library передает на UI-класс PagingData. Так как PagingData представляет и содержит элементы, которые могут меняться с течением времени (то есть не относятся к неизменяемому типу), его не следует представлять в неизменяемом UI-состоянии. Логичнее будет предоставить к нему доступ из ViewModel в отдельном потоке. Конкретные примеры можно посмотреть в кодлабе Android Paging.

Анимации

Чтобы анимации переходов были качественными и плавными, иногда приходится подождать, пока загрузятся данные со следующего экрана, прежде чем стартовать анимацию. В Android view фреймворке есть методы, с помощью которых можно отсрочить переход между фрагментами с postponeEnterTransition() API и startPostponedEnterTransition() API. Эти API помогают убедиться, что элементы UI на следующем экране (как правило, изображения, которые загружаются из сети) готовы к отрисовке, прежде чем UI анимирует переход на этот экран. Подробную информацию и способы применения вы найдёте в Android Motion sample.

Читайте далее

Обзор архитектуры

События UI

Доменный слой

Слой данных

---

Больше полезного про Android — в нашем телеграм-канале Surf Android Team. Здесь мы публикуем кейсы, лучшие практики, новости и вакансии Surf, а также проводим прямые эфиры. Присоединяйтесь!

Android Layout is used to define the user interface that holds the UI controls or widgets that will appear on the screen of an android application or activity screen. Generally, every application is a combination of View and ViewGroup. As we know, an android application contains a large number of activities and we can say each activity is one page of the application. So, each activity contains multiple user interface components and those components are the instances of the View and ViewGroup. All the elements in a layout are built using a hierarchy of View and ViewGroup objects.

View

A View is defined as the user interface which is used to create interactive UI components such as TextView, ImageView, EditText, RadioButton, etc., and is responsible for event handling and drawing. They are Generally Called Widgets.

A ViewGroup act as a base class for layouts and layouts parameters that hold other Views or ViewGroups and to define the layout properties. They are Generally Called layouts.

The Android framework will allow us to use UI elements or widgets in two ways:  

• Use UI elements in the XML file
• Create elements in the Kotlin file dynamically

Types of Android Layout

• Android Linear Layout: LinearLayout is a ViewGroup subclass, used to provide child View elements one by one either in a particular direction either horizontally or vertically based on the orientation property.
• Android Relative Layout: RelativeLayout is a ViewGroup subclass, used to specify the position of child View elements relative to each other like (A to the right of B) or relative to the parent (fix to the top of the parent).
• Android Constraint Layout: ConstraintLayout is a ViewGroup subclass, used to specify the position of layout constraints for every child View relative to other views present. A ConstraintLayout is similar to a RelativeLayout, but having more power.
• Android Frame Layout: FrameLayout is a ViewGroup subclass, used to specify the position of View elements it contains on the top of each other to display only a single View inside the FrameLayout.
• Android Table Layout: TableLayout is a ViewGroup subclass, used to display the child View elements in rows and columns.
• Android Web View: WebView is a browser that is used to display the web pages in our activity layout.
• Android ListView: ListView is a ViewGroup, used to display scrollable lists of items in a single column.
• Android Grid View: GridView is a ViewGroup that is used to display a scrollable list of items in a grid view of rows and columns.

Use UI Elements in the XML file

Here, we can create a layout similar to web pages. The XML layout file contains at least one root element in which additional layout elements or widgets can be added to build a View hierarchy. Following is the example:  

Load XML Layout File and its elements from an Activity

When we have created the layout, we need to load the XML layout resource from our activity onCreate() callback method and access the UI element from the XML using findViewById. 

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // finding the button
        val showButton = findViewById<Button>(R.id.showInput)

        // finding the edit text
        val editText = findViewById<EditText>(R.id.editText)

Here, we can observe the above code and finds out that we are calling our layout using the setContentView method in the form of R.layout.activity_main. Generally, during the launch of our activity, the onCreate() callback method will be called by the android framework to get the required layout for an activity. 

Create elements in the Kotlin file Dynamically

We can create or instantiate UI elements or widgets during runtime by using the custom View and ViewGroup objects programmatically in the Kotlin file. Below is the example of creating a layout using LinearLayout to hold an EditText and a Button in an activity programmatically. 

Different Attribute of the Layouts

XML attributes	Description
android:id	Used to specify the id of the view.
android:layout_width	Used to declare the width of View and ViewGroup elements in the layout.
android:layout_height	Used to declare the height of View and ViewGroup elements in the layout.
android:layout_marginLeft	Used to declare the extra space used on the left side of View and ViewGroup elements.
android:layout_marginRight	Used to declare the extra space used on the right side of View and ViewGroup elements.
android:layout_marginTop	Used to declare the extra space used in the top side of View and ViewGroup elements.
android:layout_marginBottom	Used to declare the extra space used in the bottom side of View and ViewGroup elements.
android:layout_gravity	Used to define how child Views are positioned in the layout.

Last Updated :
21 Feb, 2022

Like Article

Save Article

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

Если вы являетесь одним из таких людей, мы предоставим вам самую важную информацию о том, как разобраться в системе, познакомим с её главными функциями. В общем, перед вами своеобразная инструкция под названием «Андроид для чайников», где собраны все актуальные советы по работе с платформой.

Начало пользования системой Андроид

Включаем устройство, заходим в свой аккаунт и устанавливаем соединение с интернетом

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

• Выбрать язык интерфейса.
  
• Подключится к интернету через Wi-Fi — если у вас нет поблизости сети, то этот шаг можно пропустить. Почему это меню появляется при первом же включении? Из-за того, что большинство программ разработаны для использования при рабочем интернет-подключении. Это вовсе не значит, что телефон или планшет бесполезен без интернета, подобный шаг создан скорее для удобства — мол, подключитесь к нему сразу, чтобы потом об этом не беспокоиться.
  
• Далее системный мастер предложит зайти в ваш Google-аккаунт или создать его, если вы ещё не обзавелись учётной записью. Крайне советуем завести себе аккаунт, ведь сама система Андроид сильно привязана к сервисам компании Google. Без него вы не зайдёте в магазин приложений, не сможете пользоваться почтой. Кроме того, учётную запись создать нетрудно, зато она всегда будет с вами на всех устройствах, где вы только пожелаете, что довольно удобно.
  
• В следующем меню вам нужно подтвердить время и дату, которые практически всегда определяются автоматически, либо ввести их вручную.
  
• В последнем окне вы увидите пункты, касающиеся определения вашего местоположения — лучше не выключать их, чтобы все сервисы правильно работали и смартфон верно определял время и дату.

Что представляет собой интерфейс системы?

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

Что он собой представляет? Вам будут предложены следующие символы и иконки:

• Время и дата — у вас могут отображаться отдельные часы или календарь, или эти данные будут расположены в правом нижнем углу, как это чаще всего принято на планшетах.
• Снизу в большинстве случаев размещены три знака — кнопка назад, главное меню и контекстное меню, где отображаются запущенные приложения.
  
• На рабочем столе, как правило, размещаются самые важные и наиболее используемые программы. Их можно удалить — просто нажмите и задержите палец на программе, через пару секунд значок станет перемещаемым и его можно будет перетянуть на крестик.
• Рабочих столов может быть несколько — они перемещаются при выполнении перелистывающих движений по экрану, при желании их тоже можно добавить или удалить — убирается виджет так же, как и отдельная программа. Чтобы добавить ещё один рабочий стол, коснитесь 2 пальцами экрана и сведите их, после чего появится плюсик — на него и следует нажать.
  
• На рабочие столы можно добавлять программы из общего списка меню. Где его найти? Нажмите главную клавишу на планшете или смартфоне, или на среднюю кнопку внизу экрана — о ней мы уже упоминали. Когда перед вами откроется список, вы можете выбрать один из элементов, зажать палец на той части экрана, где он расположен, после чего его можно передвинуть на любое место рабочего стола.

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

Мы рассмотрели, как выглядит рабочий стол, теперь перейдём к основному меню Android.

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

Пользование интернетом на Андроид

Если вы уже установили подключение к интернету, самое время узнать, как пользоваться браузером. В случае, когда Wi-Fi выключен, активировать его вы можете в упомянутом меню уведомлений или через настройки, которые вы найдёте в меню. После того как вы откроете раздел беспроводного соединения, активируйте работу Wi-Fi, затем, устройство выполнит автоматический поиск сетей. Дело остаётся за малым — выбрать сеть из списка, ввести пароль, если это необходимо и нажать «Подключить».

Как зайти в интернет на Андроид?

Для этого следуйте таким инструкциям:

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

В целом ничего сложного в работе с браузером на планшете или смартфоне нет — если вы не знаете некоторых функций или значков, просто попробуйте их.

Мы упустили только один момент — чтобы ввести адрес сайта, вам нужна клавиатура.

Как работать с клавиатурой?

Клавиатура будет автоматически открываться всякий раз, когда вы будете нажимать на строку, где вводится тот или иной текст, сообщение. Поэтому её запуск — дело нехитрое, а если нужно убрать средство ввода просто нажмите «Назад».

О работе с клавиатурой стоит знать следующее:

• Расположение клавиш здесь такое же, как и на компьютерной клавиатуре.
• Значок глобуса служит для смены языка ввода.
• Прозрачная стрелка меняет клавиши на заглавные, если нажать два раза подряд — включится режим Caps Lock.
• Стрелка с крестиком стирает символы, большая кнопка справа служит для переноса курсора вниз — как компьютерная клавиша Enter.
• Чтобы переместить курсор, прикоснитесь к необходимой области на экране.
• На некоторых клавишах размещены несколько символов — чтобы выбрать дополнительный, а не основной знак, просто немного придержите палец на нём.
  
• Как правило, под буквами на клавиатуре размещены кнопки для её переключения на цифровую раскладку или список с символами — просто нажимайте на неё, чтобы открыть нужный набор знаков.
• Если вам нужно выделить текст и скопировать, вырезать или переместить его, выполните длинное нажатие на строке, где начинается нужный вам кусок, после чего появятся две стрелки. Растягивая их, вы можете выделить необходимое количество символов, а в верхнем меню выбрать операцию для выделенного текста.

Как добавить другие языки на клавиатуру?

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

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

Как пользоваться Google Play Market?

Этот сервис представляет собой приложение, где вы найдёте тысячи всевозможных программ для вашего устройства с Android. Как правило, Play Market есть по умолчанию в меню вашего планшета или смартфона, для пользования им нужна учётная запись Google — если ранее вы не выполняли вход, то сделаете это при первом запуске магазина.

Итак, как пользоваться этим чудом? Всё очень просто — выбираете понравившееся приложение или находите его через строку поиска, нажимаете «Установить», а далее оборудование справится со всем самостоятельно.

Если вам нужно удалить программу или перенести её на карту памяти — последнее необходимо, когда на самом устройстве мало места, а сделать это вы можете в настройках. В отдельном разделе вынесены все приложения, установленные на вашем гаджете.

Файловый менеджер и как смотреть фильмы и слушать музыку на Андроид

Для просмотра файлов мультимедиа есть отдельное приложение под названием Галерея или Хранилище Мультимедиа, которое вы найдёте в главном меню. Ничего сложного в пользовании им нет, по созданным папкам распределяются фотографии, видео, находящиеся в памяти устройства или на карте.

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

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

Как установить мелодию на звонок?

Если вы пользуетесь смартфоном на Андроид, то наверняка хотите слышать любимую мелодию на звонке. Делается это через настройки — зайдите в меню Звук, нажмите на строку Мелодия звонка, где вы сможете выбрать необходимый файл. Как видите, в этом меню вы можете полностью редактировать настройки звонков. Установить понравившуюся мелодию вы можете и в плеере при прослушивании музыки — в меню вы найдёте соответствующую функцию.

Благодаря этой краткой инструкции по Android вы узнали минимальный набор самых важных разделов и настроек системы, которые позволят начать своё уверенное пользование смартфоном или планшетом. Главное — не бойтесь пробовать и узнавать то, чего вы раньше не видели. В целом же пользование этой платформой наверняка будет для вас простым и понятным, ведь в ней всё продумано логично и последовательно.

Графический интерфейс строится из набора компонентов, каждый из которых может иметь различные состояния и форму. Интерфейс Android-устройств — не исключение. Базовым для всех визуальных элементов является класс View. С помощью него и его наследников можно написать желаемый пользовательский интерфейс и настроить взаимодействие с пользователем.

По следам лекции Александра Смилянского, разработчика команды мобильных Карт и Навигатора Яндекса, для Школы мобильной разработки мы составили памятку по работе с View и его наследниками. 

Элементы интерфейса

Основные элементы пользовательского интерфейса представлены текстовыми полями, кнопками, картинками, слайдерами и другими компонентами. В Android для них используются классы TextView, Button, ImageView и ProgressBar. Это далеко не единственные наследники класса View, но одни из наиболее часто используемых стандартных компонентов.

Чтобы компоненты отображались корректно, необходимо задать им параметры. Сделать это можно как с помощью объекта в Java или Kotlin, так и в XML.

Размеры элементов и отступы

Чтобы задать параметр, нужно понимать, в чём он измеряется. Например, есть несколько единиц измерения размера текста: 

— px — размер в пикселях;

— dp (density-independent-pixels) позволяет задавать размер текста одинаково для всех устройств, независимо от разрешения и размера экрана;

— sp (scalable pixels) работает схожим образом, что и dp, но дополнительно проверяет настройки устройства. Если пользователь задал в настройках увеличение текста, то параметр также будет его увеличивать. Это позволяет сделать приложение более доступным и удобным для людей с нарушениями зрения, но в отдельных случаях может повлиять на макет, поэтому использование sp надо тщательно тестировать.

Размеры элемента задаются следующими единицами измерения:

— match_parent — элемент займёт всё место родительского компонента;

— wrap_content — элемент займет только необходимое для него место;

— 0dp — специальный размер, позволяющий задать динамический размер в отдельных случаях.

Кроме того, можно указать размер в px или dp.

Отступ элементов можно задавать с помощью параметров padding и layout_margin:

— padding определяет внутренние отступы элемента, которые позволяют его расширить, подвинув другие элементы;

— layout_margin определяет внешние отступы от элемента, при этом сам элемент не меняется в размерах.

Группировка элементов

Для группировки элементов интерфейса используются контейнеры — наследники класса ViewGroup. Контейнеры определяют расположение и размер дочерних объектов View. Чаще всего используются следующие контейнеры: FrameLayout, LinearLayout и ConstraintLayout.

FrameLayout — самый легковесный контейнер. Он используется для вывода на экран одного визуального элемента, а также для расположения элементов с gravity-атрибутами (сверху или снизу экрана). Также с помощью FrameLayout удобно создавать другие контейнеры, как это сделано, например, в ScrollView.

LinearLayout используется для вывода на экран списков. Он располагает элементы по горизонтали или по вертикали. 

ConstraintLayout позволяет задавать расположение элементов относительно друг друга. Используется в сложных интерфейсах, где много связанных между собой компонентов. 

RecyclerView

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

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

В отличие от LinearLayout, в RecyclerView доступна ограниченная загрузка элементов: то есть они отрисовываются не сразу, а по ходу того, как появляются на экране. Это даёт ощутимый прирост производительности приложения.

Подробнее о том, как работать с RecyclerView в реальных проектах, смотрите в видеоуроке старшего разработчика команды мобильных Карт Сергея Кришталя для Школы мобильной разработки, которая прошла в 2021 году.

Присоединяйтесь к Открытому лекторию Летних школ Академии Яндекса и узнайте о других современных инструментах мобильной разработки.