Jetpack Compose — это современный фреймворк для создания UI в Android-приложениях, разработанный Google. Он основан на декларативном подходе, вдохновлённом такими фреймворками, как React и Flutter. Compose позволяет создавать интерфейсы с помощью чистого Kotlin-кода, без необходимости использовать XML, как это было в традиционном Android UI.

Основные принципы Jetpack Compose

1. Декларативность. Вместо пошаговой императивной настройки элементов (например, findViewById, setText, setOnClickListener) разработчик описывает, как должен выглядеть UI в зависимости от состояния.

2. UI как функция состояния. Любой UI в Compose — это функция, принимающая данные (состояние) и возвращающая отображение. При изменении состояния UI автоматически перерисовывается.

3. Никакого XML. Вся верстка описывается на Kotlin-языке, что упрощает синхронизацию логики и интерфейса, улучшает читаемость и рефакторинг.

4. Композиция. Compose построен на "Composable" функциях, которые можно легко комбинировать, переиспользовать и вкладывать друг в друга.

Как Kotlin используется в Jetpack Compose

Jetpack Compose полностью построен на Kotlin и использует ряд его мощных возможностей:

1. Функции высшего порядка

Компоненты UI определяются через аннотированные функции @Composable:

@Composable
fun Greeting(name: String) {
Text("Hello, $name!")
}

2. DSL (Domain Specific Language)

Compose использует Kotlin DSL-подход. Благодаря этому код интерфейса похож на декларативный шаблон:

Column {
Text("Заголовок")
Button(onClick = { /\* действие \*/ }) {
Text("Нажми меня")
}
}

3. Корутины и Flow

Compose тесно интегрируется с StateFlow, LiveData и корутинами:

@Composable
fun Screen(viewModel: MyViewModel) {
val data by viewModel.data.collectAsState()
Text(data)
}

4. Скопы (remember, derivedStateOf, LaunchedEffect)

Эти инструменты управляют жизненным циклом данных и побочными эффектами:

@Composable
fun Timer() {
var time by remember { mutableStateOf(0) }
LaunchedEffect(Unit) {
while (true) {
delay(1000)
time++
}
}
Text("Time: $time")
}

Основные строительные блоки Jetpack Compose

1. @Composable функции

Базовый кирпич. Любая функция с этой аннотацией может быть частью интерфейса.

2. Recomposition

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

3. State и MutableState

Compose отслеживает состояние через mutableStateOf, remember, derivedStateOf, и др.

@Composable
fun Counter() {
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: $count")
}
}

4. Layouts: Column, Row, Box

Эти компоненты определяют структуру расположения элементов.

Column {
Text("Название")
Button(onClick = {}) {
Text("Кнопка")
}
}

5. Modifier

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

Text(
"Пример текста",
modifier = Modifier
.padding(16.dp)
.background(Color.Gray)
.clickable { }
)

Работа со State и ViewModel

Jetpack Compose хорошо интегрируется с архитектурой MVVM. StateFlow, LiveData, ViewModel легко встраиваются в UI:

@Composable
fun ProfileScreen(viewModel: ProfileViewModel) {
val state by viewModel.uiState.collectAsState()
when (state) {
is UiState.Loading -> CircularProgressIndicator()
is UiState.Success -> Text("Hello ${(state as UiState.Success).name}")
is UiState.Error -> Text("Ошибка")
}
}

Интеграция с другими библиотеками

• Navigation-Compose — библиотека навигации, полностью на Kotlin и Compose.

• Accompanist — дополнительные компоненты и эффекты.

• Compose Material, Material3 — стандартные компоненты Material Design.

Инструменты Kotlin, используемые внутри Compose

Преимущества Jetpack Compose над традиционным UI

Пример простого экрана на Compose

@Composable
fun LoginScreen(onLogin: (String, String) -> Unit) {
var username by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
TextField(value = username, onValueChange = { username = it }, label = { Text("Логин") })
TextField(value = password, onValueChange = { password = it }, label = { Text("Пароль") })
Button(onClick = { onLogin(username, password) }) {
Text("Войти")
}
}
}

Unit и UI тестирование

Jetpack Compose имеет собственную тестовую библиотеку:

@get:Rule
val composeTestRule = createComposeRule()
@Test
fun testButtonClickChangesText() {
composeTestRule.setContent {
MyScreen()
}
composeTestRule.onNodeWithText("Нажми меня").performClick()
composeTestRule.onNodeWithText("Вы нажали!").assertExists()
}