Android Academy · Урок

Что такое Jetpack Compose

Разберитесь с декларативным пользовательским интерфейсом в Android

«Что такое Jetpack Compose» — бесплатный урок Android Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.

Что такое Jetpack Compose

Jetpack Compose — современный инструментарий Android для создания нативного пользовательского интерфейса. Вместо написания XML-файлов макета вы описываете интерфейс непосредственно в коде Kotlin.

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

Старый подход: представления XML

Традиционно экран Android состоял из двух частей:

Файл макета XML, описывающий элементы интерфейса.
Код Kotlin/Java, который находит эти представления с помощью findViewById и изменяет их.

Синхронизация XML и кода была утомительной и часто приводила к ошибкам.

<!-- res/layout/activity_main.xml -->
<TextView
    android:id="@+id/greeting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Императивный и декларативный подходы

При использовании представлений XML вы пишете императивный код: находите представление, а затем пошагово изменяете его.

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

// Imperative (old views)
val tv = findViewById<TextView>(R.id.greeting)
tv.text = "Hello"
tv.visibility = View.VISIBLE

Компонуемые функции

Строительный блок Compose — это компонуемая функция: обычная функция Kotlin с аннотацией @Composable, которая создаёт пользовательский интерфейс.

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

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

Без findViewById

В Compose нет findViewById и идентификаторов представлений. Интерфейс является вызовом функции. Чтобы показать другой текст, достаточно передать другой аргумент и позволить Compose выполнить рекомпозицию.

@Composable
fun Screen() {
    Greeting(name = "Ada")
    Greeting(name = "Linus")
}

Интерфейс как функция состояния

Основная идея: UI = f(state). Экран — это результат работы компонуемых функций при текущем состоянии. Измените состояние — и та же функция создаст новый интерфейс.

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

Всё — Kotlin

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

@Composable
fun Items(names: List<String>) {
    for (n in names) {
        Text(text = n)
    }
}

Меньше шаблонного кода

Compose устраняет огромное количество связующего кода. Не нужны ни разворачивание XML, ни адаптеры для простых списков, ни ручное связывание макета с логикой.

Результат: меньше файлов и меньше ошибок.

Совместимость с представлениями

Вам не нужно переписывать всё приложение целиком. Compose совместим со старой системой представлений. Можно встроить Compose в существующий экран XML или встроить представление в Compose.

Это позволяет командам постепенно переходить на Compose.

Что вам понадобится

Чтобы использовать Compose, вам понадобятся:

Недавняя версия Android Studio.
Зависимости Compose в вашем файле Gradle.
Activity, вызывающая setContent { } для размещения компонуемых функций.

Небольшой экран

Перед вами полностью готовый минимальный экран Compose. setContent — это мост между Android Activity и миром Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "World")
        }
    }
}

Быстрая проверка

Как лучше всего описать Jetpack Compose?

Итоги

Вы узнали, что Jetpack Compose — декларативный инструментарий для пользовательского интерфейса, ориентированный прежде всего на Kotlin. Основные идеи:

Интерфейс строится из функций @Composable.
Не нужны XML и findViewById.
UI = f(state) — измените состояние, и Compose перерисует интерфейс.

Часто задаваемые вопросы

Урок «Что такое Jetpack Compose» бесплатный?

Да — полный текст урока «Что такое Jetpack Compose» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.

Чему я научусь в уроке «Что такое Jetpack Compose»?

Разберитесь с декларативным пользовательским интерфейсом в Android Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Android Academy?

Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Что такое Jetpack Compose»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Android Academy?

Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Android Academy