Мобильная разработка

Учебник Jetpack Compose для начинающих

21 урок · 7 разделов · бесплатно, без регистрации

Начать с первого урока

Jetpack Compose — это современный декларативный фреймворк для построения интерфейсов Android прямо на Kotlin, без XML-разметки. В этом курсе вы пройдёте путь от первой @Composable-функции до полноценного экрана с состоянием, списками, темой Material 3 и навигацией. Мы разберём, как Compose думает об интерфейсе, почему состояние нужно «поднимать» наверх, как работает recomposition под капотом и какие ошибки чаще всего тормозят приложение. Курс рассчитан на тех, кто уже знаком с базовым Kotlin (функции, классы, лямбды, val/var) и хочет освоить именно UI-слой.

Курс «Jetpack Compose» состоит из 7 разделов и 21 урока: Знакомство с декларативным UI, Состояние и recomposition, Модификаторы и базовые компоненты, Раскладки и списки, Material 3 и навигация, Архитектура, эффекты и анимации и Производительность и частые ошибки. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Знакомство с декларативным UI

    1. Императивный и декларативный UI

      Разница между императивным подходом (View/XML, findViewById) и декларативным (Compose): почему описывать состояние проще, чем менять виджеты вручную.

    2. Первая @Composable-функция и превью

      Аннотация @Composable, правила именования composable-функций и аннотация @Preview для просмотра UI прямо в Android Studio без запуска приложения.

    3. Compose против XML: когда что выбирать

      Сравнение Jetpack Compose и старой системы View/XML: меньше шаблонного кода, единый язык, превью и анимации против привычной верстки и зрелой экосистемы.

  2. 2 Состояние и recomposition

    1. remember и mutableStateOf

      Как хранить изменяемое состояние в Compose: mutableStateOf создаёт наблюдаемое значение, а remember сохраняет его между recomposition.

    2. Recomposition: когда и что перерисовывается

      Recomposition в Compose: что это, что её запускает, почему перерисовываются только зависящие от состояния composable и зачем это знать.

    3. Подъём состояния (state hoisting)

      Однонаправленный поток данных и state hoisting в Compose: выносим состояние наверх, передаём value вниз и события onValueChange вверх для переиспользуемых компонентов.

  3. 3 Модификаторы и базовые компоненты

    1. Modifier: оформление и поведение

      Что такое Modifier в Compose: цепочка модификаторов padding, size, background, clickable и почему важен их порядок.

    2. Text, Button и обработка нажатий

      Базовые компоненты Compose: Text для вывода надписей со стилями и Button с лямбдой onClick для обработки нажатий.

    3. Image и TextField

      Компоненты Compose Image для отображения картинок и иконок и TextField для ввода текста с управляемым значением и обработкой onValueChange.

  4. 4 Раскладки и списки

    1. Column, Row и Box

      Основные раскладки Compose: Column располагает элементы вертикально, Row горизонтально, Box накладывает их друг на друга.

    2. Выравнивание, вес и Spacer

      Управление расположением в Compose: horizontalAlignment и Arrangement, Modifier.weight для распределения пространства и Spacer для отступов.

    3. Списки: LazyColumn и LazyRow

      Эффективные списки в Compose: LazyColumn и LazyRow создают элементы лениво, items для коллекций и key для стабильности при изменениях.

  5. 5 Material 3 и навигация

    1. Scaffold и TopAppBar

      Каркас экрана в Material 3: Scaffold предоставляет слоты для TopAppBar, нижней панели и кнопки FAB, корректно учитывая отступы системы.

    2. Темы и цвета Material 3

      Темизация в Compose: MaterialTheme, цветовая схема colorScheme, типографика и поддержка светлой и тёмной темы через единый источник стилей.

    3. Навигация: NavHost, маршруты и аргументы

      Навигация в Compose: NavController и NavHost задают граф экранов, composable-маршруты по строковым именам и передача аргументов между экранами.

  6. 6 Архитектура, эффекты и анимации

    1. ViewModel, StateFlow и collectAsState

      Архитектура UI в Compose: ViewModel хранит состояние и переживает поворот экрана, StateFlow отдаёт его потоком, collectAsState превращает поток в Compose-состояние.

    2. Побочные эффекты: LaunchedEffect

      Побочные эффекты в Compose: почему их нельзя писать в теле composable, как LaunchedEffect запускает корутину при входе и rememberCoroutineScope для эффектов по событию.

    3. Анимации: обзор

      Обзор анимаций в Compose: animateXxxAsState для плавных переходов значений и AnimatedVisibility для появления и исчезновения элементов.

  7. 7 Производительность и частые ошибки

    1. Тяжёлая recomposition и стабильность

      Почему Compose перерисовывает лишнее: чтение состояния слишком высоко, нестабильные параметры и вычисления в теле, и как этого избежать через derivedStateOf и стабильные типы.

    2. Состояние вне remember и его последствия

      Типичная ошибка Compose: состояние без remember сбрасывается при перерисовке, а rememberSaveable нужен, чтобы пережить поворот экрана и смерть процесса.

    3. Чек-лист правильного Compose

      Итоговый чек-лист Jetpack Compose: однонаправленный поток данных, состояние через remember, подъём состояния, ленивые списки с ключами, темы и стабильные параметры.