Jetpack Compose Kotlin: методы, примеры, установка |…

Что такое Jetpack Compose и зачем он нужен?

Jetpack Compose — это современный набор инструментов для создания пользовательских интерфейсов (UI) для Android, разработанный компанией Google. В отличие от традиционного подхода на основе XML-разметки и View-системы, Compose использует декларативный подход. Это означает, что вы описываете, как должен выглядеть UI при каждом состоянии данных, а не описываете последовательность шагов для его изменения.

Основные преимущества Jetpack Compose:

Декларативность: Вы описываете UI как функцию состояния. Когда состояние меняется, Compose автоматически перерисовывает только те части UI, которые изменились.
Меньше кода: По сравнению с XML + View, код на Compose обычно короче и читаемее.
Интуитивность: Используется язык Kotlin, что делает код более естественным для Android-разработчиков.
Производительность: Compose оптимизирован для работы с новыми архитектурами Android и минимизирует перерисовки.
Совместимость: Compose можно постепенно внедрять в существующие проекты, используя его вместе с традиционным View.

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

Установка Jetpack Compose

Поскольку Jetpack Compose — это библиотека для Android, она не устанавливается через pip (Python) или npm (JavaScript). Вместо этого она добавляется в проект Android через систему сборки Gradle. Вот пошаговая инструкция:

1. Настройка проекта в Android Studio

Создайте новый проект Android, выбрав шаблон "Empty Compose Activity". Android Studio автоматически настроит все необходимые зависимости.

2. Ручная настройка (если проект уже существует)

Откройте файл build.gradle.kts (на уровне проекта) и убедитесь, что в блоке plugins есть:

plugins {
    id("com.android.application") version "8.2.0" apply false
    id("org.jetbrains.kotlin.android") version "1.9.20" apply false
}

Затем откройте файл build.gradle.kts (на уровне модуля, обычно app) и добавьте:

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
}

android {
    namespace = "com.example.myapp"
    compileSdk = 34

    defaultConfig {
        applicationId = "com.example.myapp"
        minSdk = 24
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"
    }

    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.5"
    }

    kotlinOptions {
        jvmTarget = "17"
    }
}

dependencies {
    implementation(platform("androidx.compose:compose-bom:2024.01.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.compose.material3:material3")
    implementation("androidx.activity:activity-compose:1.8.2")
    debugImplementation("androidx.compose.ui:ui-tooling")
    debugImplementation("androidx.compose.ui:ui-test-manifest")
}

После синхронизации Gradle вы можете начать использовать Jetpack Compose.

Быстрый старт с примером кода

Самый простой способ начать — создать экран с текстом "Hello, World!". Для этого в вашей Activity (или в любом другом месте, где вы используете Compose) вызовите функцию setContent:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Тема Material3
            MyAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    // Наш первый Composable
                    Greeting("Android")
                }
            }
        }
    }
}

// Composable функция
@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello, $name!",
        modifier = Modifier.padding(16.dp)
    )
}

В этом примере:

setContent — точка входа в Compose.
MyAppTheme — функция, создающая тему Material3.
Surface — контейнер, который задаёт фон.
Greeting — наша собственная Composable функция, которая принимает имя и выводит текст.

Основные методы и функции Jetpack Compose

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

1. `Text`

Что делает: Отображает текстовую строку на экране. Это базовая функция для вывода любого текста.

Параметры:

text: String — сам текст.
modifier: Modifier — для настройки внешнего вида (отступы, размер, фон и т.д.).
color: Color — цвет текста.
fontSize: TextUnit — размер шрифта.
fontWeight: FontWeight — жирность.
textAlign: TextAlign — выравнивание.
maxLines: Int — максимальное количество строк.
overflow: TextOverflow — поведение при переполнении.

Пример:

@Composable
fun TextExample() {
    Text(
        text = "Привет, мир! Это длинный текст, который может быть обрезан.",
        modifier = Modifier.padding(16.dp),
        color = Color.Blue,
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold,
        maxLines = 2,
        overflow = TextOverflow.Ellipsis
    )
}

2. `Button`

Что делает: Создаёт кликабельную кнопку Material Design.

Параметры:

onClick: () -> Unit — лямбда-функция, которая выполняется при нажатии.
modifier: Modifier — модификатор.
enabled: Boolean — активна ли кнопка.
colors: ButtonColors — цвета кнопки.
content: @Composable RowScope.() -> Unit — содержимое кнопки (обычно текст или иконка).

Пример:

@Composable
fun ButtonExample() {
    var count by remember { mutableStateOf(0) }
    Button(
        onClick = { count++ },
        modifier = Modifier.padding(16.dp)
    ) {
        Text("Нажато: $count раз")
    }
}

3. `Column`

Что делает: Размещает дочерние элементы вертикально (сверху вниз). Это аналог LinearLayout с вертикальной ориентацией.

Параметры:

modifier: Modifier — модификатор.
verticalArrangement: Arrangement.Vertical — расположение по вертикали (например, Center, SpaceBetween).
horizontalAlignment: Alignment.Horizontal — выравнивание по горизонтали.

Пример:

@Composable
fun ColumnExample() {
    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Первый элемент")
        Text("Второй элемент")
        Button(onClick = { /* do something */ }) {
            Text("Кнопка")
        }
    }
}

4. `Row`

Что делает: Размещает дочерние элементы горизонтально (слева направо). Аналог LinearLayout с горизонтальной ориентацией.

Параметры:

modifier: Modifier — модификатор.
horizontalArrangement: Arrangement.Horizontal — расположение по горизонтали.
verticalAlignment: Alignment.Vertical — выравнивание по вертикали.

Пример:

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text("Слева")
        Text("По центру")
        Text("Справа")
    }
}

5. `Box`

Что делает: Контейнер, который накладывает дочерние элементы друг на друга. Полезен для создания слоёв (например, текст поверх изображения).

Параметры:

modifier: Modifier — модификатор.
contentAlignment: Alignment — выравнивание содержимого.
propagateMinConstraints: Boolean — передавать ли минимальные ограничения дочерним элементам.

Пример:

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(200.dp).background(Color.Gray),
        contentAlignment = Alignment.Center
    ) {
        Text("Текст по центру", color = Color.White)
        // Можно добавить ещё один элемент, который будет поверх
        Icon(Icons.Default.Favorite, contentDescription = null, tint = Color.Red)
    }
}

6. `Image`

Что делает: Отображает изображение (из ресурсов, сети или памяти).

Параметры:

painter: Painter — объект, который рисует изображение (например, painterResource(R.drawable.my_image)).
contentDescription: String? — описание для доступности.
modifier: Modifier — модификатор.
contentScale: ContentScale — как масштабировать изображение (например, Fit, Crop).
alignment: Alignment — выравнивание.

Пример:

@Composable
fun ImageExample() {
    Image(
        painter = painterResource(id = R.drawable.my_image),
        contentDescription = "Описание изображения",
        modifier = Modifier.size(150.dp).clip(CircleShape),
        contentScale = ContentScale.Crop
    )
}

7. `LazyColumn`

Что делает: Создаёт прокручиваемый список, который "лениво" загружает только видимые элементы. Это аналог RecyclerView.

Параметры:

modifier: Modifier — модификатор.
state: LazyListState — состояние списка (позиция прокрутки).
contentPadding: PaddingValues — отступы вокруг списка.
content: LazyListScope.() -> Unit — блок, в котором вы определяете элементы через <