Android Academy · Урок

Предпросмотр и горячая перезагрузка

Быстро вносите изменения с помощью предпросмотра Compose

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

Предварительный просмотр на этапе разработки

Одна из лучших возможностей Compose — @Preview: Вы можете увидеть отрисованный компонуемый элемент в Android Studio без запуска приложения на устройстве или эмуляторе.

Аннотация @Preview

Добавьте @Preview над функцией @Composable. Android Studio отобразит её на панели дизайна.

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Preview")
}

Предварительному просмотру не нужны параметры

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

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada", followers = 42)
}

Именование функций предварительного просмотра

По соглашению обёртки предварительного просмотра называют именем компонуемого элемента с суффиксом Preview, например GreetingPreview. Так их легко находить, а также понятно, что они не используются в рабочей версии приложения.

Параметры предварительного просмотра

@Preview принимает аргументы для настройки отображения, например showBackground, name и widthDp.

@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
    Greeting(name = "Hi")
}

showBackground

По умолчанию предварительный просмотр имеет прозрачный фон. Передайте showBackground = true, чтобы отобразить непрозрачную поверхность: так текст будет лучше виден при разработке.

Несколько вариантов предварительного просмотра

Можно разместить несколько аннотаций @Preview над одной функцией, чтобы видеть разные конфигурации рядом — например, небольшую и большую ширину.

@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
    HomeScreen()
}

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

Android Studio предлагает для предварительного просмотра интерактивный режим. Он позволяет нажимать кнопки и вызывать изменения состояния прямо в предварительном просмотре, не устанавливая приложение.

Live Edit / горячая перезагрузка

При использовании Live Edit изменения в телах компонуемых элементов почти мгновенно появляются в предварительном просмотре и даже на работающем устройстве — полная пересборка не нужна. Это значительно ускоряет цикл разработки.

Предварительные просмотры бесплатны

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

Полный пример

Вот компонуемый элемент и его предварительный просмотр. Откройте панель дизайна, чтобы сразу увидеть результат.

@Composable
fun Badge(label: String) {
    Text(text = label, color = Color.White)
}

@Preview(showBackground = true)
@Composable
fun BadgePreview() {
    Badge(label = "NEW")
}

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

Почему функция @Preview не должна принимать параметры?

Повторение

Предварительные просмотры ускоряют разработку в Compose:

Добавьте @Preview над компонуемым элементом без параметров.
Используйте такие параметры, как showBackground и widthDp.
Размещайте несколько предварительных просмотров; используйте интерактивный режим и Live Edit для быстрой итерации.

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

Урок «Предпросмотр и горячая перезагрузка» бесплатный?

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

Чему я научусь в уроке «Предпросмотр и горячая перезагрузка»?

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

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

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

Сколько времени занимает урок «Предпросмотр и горячая перезагрузка»?

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

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

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

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

← Назад к Android Academy