Jetpack Compose и Kotlin: как разрабатывать современные UI

Если раньше пользовательские интерфейсы приходилось писать вручную, то сейчас достаточно освоить инструмент для разработки интерфейсов Jetpack Compose и язык Kotlin. Так можно создавать современные UI с минимальным кодингом и максимальной эффективностью решений. Сегодня разберемся в основах Jetpack Compose и Cotlin и узнаем, как применять инструменты в своих проектах.

Jetpack Compose: что это за зверь

Jetpack Compose — современный инструмент для создания пользовательских интерфейсов на Android, который использует декларативный подход. Разработчик описывает, как должен выглядеть UI в зависимости от данных, а система автоматически обновляет его при изменении этих данных. Так, вместо императивного управления элементами интерфейса, как в традиционной Android-разработке, Compose позволяет сосредоточиться на конечном результате.

Чем Compose отличается от традиционного XML

Традиционно интерфейсы в Android создаются с помощью XML-разметки, но этот метод имеет ряд недостатков:

• Разделяет логику интерфейса (XML) и управления им (Kotlin/Java), что усложняет поддержку;
• Усложняет код по мере роста приложения;
• Необходимо вручную обновлять UI при изменении данных.

Compose заменяет XML-разметку Kotlin-кодом, в котором UI описывается с помощью функций. Фреймворк сам отслеживает изменения данных и обновляет только нужные элементы.

Основные концепции: Composable-функции, Recomposition, State

Composable-функции

Основной строительный блок интерфейсов в Jetpack Compose — Composable-функции. Они представляют собой модули, из которых можно собирать весь UI. Каждая функция отвечает за определённую часть интерфейса, а сложные экраны формируются путем комбинирования элементов.

Recomposition

Одна из ключевых особенностей Jetpack Compose — механизм Recomposition. Если изменяются данные, система пересчитывает и обновляет только те элементы интерфейса, которые зависят от этих данных. Это повышает производительность и избавляет разработчика от необходимости вручную следить за обновлениями UI.

State

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

Jetpack Compose упрощает разработку UI на Android. Вместо сложных XML-разметок и ручного обновления элементов, разработчики теперь могут сосредоточиться на логике и удобстве использования своих приложений.

Как установить и настроить проект

Добавьте зависимости

Это первый шаг в освоении Jetpack Compose. Чтобы начать работу, нужно открыть build.gradle файл и добавить туда следующие строки:

			dependencies {
 implementation "androidx.compose.ui:ui:1.0.5"
 implementation "androidx.compose.material:material:1.0.5"
 implementation "androidx.compose.ui:ui-tooling-preview:1.0.5"
 androidTestImplementation "androidx.compose.ui:ui-test-junit4:1.0.5"}
		

Так подключаются основные библиотеки для работы с Compose UI и Material Design.

Проверьте минимальные требования

В первую очередь, нужно обновить Android Studio хотя бы до версии Arctic Fox или выше. Также необходимо апдейтнуть Gradle до 7.x и Kotlin до версии 1.5.x.

Минимальная версия API проекта должна быть не ниже 21 (да простят нас пользователи старых телефонов). Если хотите использовать все фишки Compose по максимуму — не ниже 23.

Легко запустите пустой проект

Запустив Android Studio и создав новый проект, выберите шаблон Empty Compose Activity. В итоге увидите проект со всеми добавленными настройками и фрагментами.

Если же вы начинаете проект с нуля, то просто вставьте зависимости из первого пункта и проверьте настройки compileSdkVersion и minSdkVersion.

Как создать базовые компоненты UI

Если раньше разработка интерфейсов была долгим и сложным логическим процессом, то с Kotlin и Jetpack Compose работа с UI превратилась в старый добрый тетрис, где задача — просто контролировать расположение блоков.

Работа с текстами

Создать текстовый элемент здесь очень просто:

			Text(text = "Привет, это Tproger")
		

Если нужно работать с оформлением и стилем текста, то:

			Text(
    text = "Привет, это Tproger",
    style = TextStyle(
        fontWeight = FontWeight.Bold,
        fontSize = 24.sp
    )
)
		

Кнопки и их стилизация

В Compose кнопки создаются так же легко, как и текст:

			Button(onClick = { /* TODO: Обработать клик */ }) {
    Text("Подписаться")}
		

Ещё кнопки можно стилизовать:

			Button(
    onClick = { /* TODO: Обработать клик */ },
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Cyan),
    shape = RoundedCornerShape(16.dp)
) {
    Text("Подписаться")
}
		

Организация макетов: Column, Row, Box

В компоновке элементов UI всё должно быть на своих местах. В Jetpack Compose есть 3 главных инструмента для организации макета: Column, Row и Box.

Column используется для вертикального расположения элементов:

			Column {
    Text("Первый элемент")
    Text("Второй элемент")
}
		

И наоборот, когда элементы должны располагаться горизонтально, используется Row:

			Row {
    Text("Лево")
    Spacer(modifier = Modifier.width(16.dp))
    Text("Право")
}
		

Box — инструмент для наложения элементов друг на друга:

			Box {
    Image(painterResource(id = R.drawable.sample), contentDescription = null)
    Text("Текст поверх изображения", modifier = Modifier.align(Alignment.Center))
}
		

Как управлять состоянием в Jetpack Compose

В Jetpack Compose концепция State играет очень важную роль. State — часть данных приложения, которая может меняться со временем. Здесь «лежать» способно что угодно: от простого текста до информации о данных пользователя.

Использование remember и mutableStateOf

Как управлять состоянием в Kotlin и Jetpack Compose? Здесь на помощь приходят функции remember и mutableStateOf.

Когда вы пересоздаете UI (например, из-за изменения данных), remember поможет сохранить значения.

Пример с кнопкой-счётчиком:

			@Composable
fun Counter() {
    val count = remember { mutableStateOf(0) }
    Button(onClick = { count.value++ }) {
        Text("Clicked ${count.value} times")
    }
}
		

Здесь mutableStateOf(0) создаёт изменяемое состояние с начальным значением 0, а remember удерживает это состояние во время пересозданий компонента Counter. Так, при клике значение увеличивается на единицу.

Поддержание реактивности интерфейса

Один из главных плюсов Jetpack Compose — его реактивность. Изменения состояния автоматически обновляют пользовательский интерфейс без ручного ввода.

Когда Counter вызывается заново из-за высокого значения count после клика, система Jetpack Compose автоматически обновляет только те части интерфейса, которые зависят от этих данных.

Управление состоянием — база в создании UI на основе Kotlin и Jetpack Compose.

Темизация и стилизация

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

Работа с темами: Light и Dark mode

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

Определение кастомной темы приложения

Для создания уникальной темы, которая будет отражать ваш бренд, можно использовать кастомизацию темы приложения.

Сначала нужно определить основные цвета, оттенки фона и акценты. Далее выбрать шрифты, их размер для разных текстовых элементов. Очень важно уделить внимание формам элементов (кнопкам и карточкам) — здесь можно выбрать обводку и углы закругления.

Использование Material Design 3

С выходом Material Design 3, на Android можно создавать ещё более интуитивные и адаптивные дизайны — всё зависит от ваших предпочтений и нужд.

Например, с помощью поддержки динамической цветовой схемы (Dynamic Color), можно адаптировать цвета интерфейса к обоям устройства и другим условиям.

Кроме того, в Material Design 3 есть обновлённый набор компонентов UI с адаптацией под разрешение экрана и ориентацию устройства.

Сложные интерфейсы

Эффективность, удобство и привлекательность — 3 кита, на которых строится успешное приложение. Разбираемся, как с помощью Kotlin и Jetpack Compose создавать сложные интерфейсы.

Работа со списками: LazyColumn и LazyRow

Можно работать с LazyColumn и LazyRow — они используются для отображения больших наборов данных без «утяжеления» производительности приложения.

LazyColumn — вертикальный список элементов, который подгружает данные по мере необходимости. Для создания списка используется @Composable, а сами элементы списка создаются внутри блока items:

			LazyColumn {
    items(itemsList) { item ->
        Text(text = item.name)
    }
}
		

А LazyRow позволяет создавать горизонтальные списки — подойдёт для каруселей или галерей:

			LazyRow {
    items(imagesList) { image ->
        Image(painter = painterResource(id = image.resourceId), contentDescription = null)
    }
}
		

Также с помощью этих компонентов вы можете добавлять разделители и/или анимации:

			LazyColumn {
  items(users, key = { user -> user.id }) { user ->
      PersonView(
          name = user.name, modifier = Modifier
              .fillMaxWidth()
              .padding(8.dp)
              .animateItemPlacement()
      )
  }
}
		

Создание пользовательских Composable-компонентов

Собственные composable-компоненты — возможность создавать уникальные элементы интерфейса. Для этого достаточно поместить логику отображения элементов с помощью @Composable:

			@Composable
fun CustomButton(onClick: () -> Unit, label: String) {
    Button(onClick = onClick) {
        Text(text = label)
    }
}
		

@Composable можно использовать, например, с настройкой параметров onClick и label — так улучшается модульность кода.

Анимации в Jetpack Compose: плавные переходы и визуальные эффекты

В Jetpack Compose есть API для создания плавных переходов между блоками через функции по типу animateDpAsState и animateColorAsState. Например, для изменения размера можно использовать анимацию:

			val size by animateDpAsState(targetValue = if (expanded) 100.dp else 50.dp)
Box(
    Modifier.size(size).background(Color.Blue)
)
		

Также необходима библиотека Accompanist или функции вроде AnimatedVisibility, для динамического отображения контента с эффектом появления/исчезновения:

			AnimatedVisibility(visible = isVisible) {
    Text(text = "Это Tproger.")
}
		

Интеграция с существующими Android-компонентами

Jetpack Compose можно использовать в существующих Android-приложениях, не переписывая их с нуля. Для этого предусмотрена интеграция с компонентами View через ComposeView.

Встраивание Compose в существующие приложения

В приложениях, где уже используется XML-разметка, элементы Compose можно добавлять через ComposeView, вставляя их прямо в макет или Activity:

Например: добавим Text в XML-разметку через ComposeView:

			<com.google.android.material.composethemeadapter.ComposeView
    android:id="@+id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

		

Далее, в Activity:

			val composeView = findViewById<ComposeView>(R.id.compose_view)
composeView.setContent {
    Text("Ваш текст")
}

		

Использование View и Compose вместе (interop)

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

			class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val composeView = findViewById(R.id.compose_view)
        composeView.setContent {
            Column {
                TextField(
                    value = "",
                    onValueChange = { /* Обработчик изменения текста */ },
                    label = { Text("Ваш текст") }
                )
            }
        }
    }
		

Такой подход позволяет постепенно внедрять Compose в проект, сохраняя совместимость с существующим кодом.

Тестирование интерфейсов

Инструменты для тестирования Jetpack Compose

В Jetpack Compose есть набор инструментов для тестирования UI. Один из главных — библиотека Compose Test, в которой вы можете найти функции для проверки UI. Она работает с Android Testing Framework, а значит, можно не забывать привычный для разработчиков синтаксис.

С помощью Compose Test можно:

• Проверять отображение и свойства элементов UI;
• Симулировать пользовательские действия (нажатия, прокрутку, ввод текста);
• Изменять состояние приложения в тестовой среде.

UI-тесты и проверка состояния

В автоматизированных тестах есть 2 основных типа: юнит-тесты (фокус на коде) и UI-тесты (фокус на интерфейсе и взаимодействии пользователя с ним).

UI-тесты позволяют проверить, правильно ли отображаются элементы, и реагируют ли они на действия пользователя. Например, можно проверить:

• Отображается ли нужная кнопка на экране;
• Изменяется ли текст после нажатия;
• Работает ли прокрутка списков.

Jetpack Compose делает UI-тестирование удобнее, позволяя работать с декларативным подходом и минимизировать сложность тестов.

Примеры написания тестов

Несколько примеров UI-тестов с использованием библиотеки Compose Test.

Пример 1: проверка наличия элемента

			@Test
fun testElementIsDisplayed() {
    composeTestRule.setContent {
        MyApp()
    }
    composeTestRule.onNodeWithText("Ваш текст").assertIsDisplayed()
}
		

Пример 2: работа с элементами

			@Test
fun testButtonClick() {
    composeTestRule.setContent {
        MyApp()
    }
    composeTestRule.onNodeWithText("Тык сюда").performClick()
    composeTestRule.onNodeWithText("Button Clicked").assertIsDisplayed()
}
		

Пример 3: проверка изменения состояния

			@Test
fun testTextFieldInput() {
    composeTestRule.setContent {
        MyApp()
    }
    val inputText = "Какой-то текст"
    composeTestRule.onNodeWithTag("inputField").performTextInput(inputText)
    composeTestRule.onNodeWithText(inputText).assertIsDisplayed()
}
		

Вообще инструменты Jetpack Compose крайне хороши для тестирования: повышается качество приложений за счёт поиска ошибок в интерфейсе.

Советы по оптимизации производительности

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

Избегайте избыточной рекомпозиции

Рекомпозиция — пересоздание части интерфейса при изменении состояния приложения. Из минусов — она может сильно замедлить приложение.

Как свести рекомпозицию к минимуму:

1. Используйте remember, чтобы не было пересоздания одного и того же состояния. Так снижается нагрузка на систему, а работа приложения ускоряется.
2. Разделяйте состояния композиций так, чтобы изменения одного элемента не приводили к рекомпозиции других элементов. Здесь поможет принцип SRP.
3. Чем более простой элемент, тем быстрее наступят изменения.

Используйте инструментов Android Studio для анализа производительности

Основные инструменты:

1. Layout Inspector. Позволяет создать дерево компоновки приложения в реальном времени, показывая затраты на выполнение функций и методов.
2. Profiler. Даёт полную информацию об использовании ресурсов приложения и определяет потенциальные проблемы с производительностью.
3. Сравнительный анализ. Помогает выявить слабые места при взаимодействии пользователя с приложением.

Вы можете создавать более интерактивные и интересные (с точки зрения визуала) приложения с меньшими затратами времени и усилий. Вообще Jetpack Compose не только ускоряет процесс создания UI, но и поднимает качество приложения. Пользуйтесь!

Если хочешь освоить больше инструментов по мобильной разработке, собираем все актуальные новости тут.