Предварительный просмотр интерфейса
Используйте @Preview для быстрой итерации.
«Предварительный просмотр интерфейса» — бесплатный урок Android Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.
Зачем нужны предварительные просмотры
Сборка и запуск приложения на устройстве занимают время. Compose предлагает более быстрый способ увидеть пользовательский интерфейс — предварительный просмотр.
Предварительный просмотр отображает компонуемый элемент прямо в Android Studio, поэтому вы можете проверить макет, не запуская всё приложение на эмуляторе или телефоне.
Аннотация @Preview
Чтобы просмотреть компонуемый элемент, создайте отдельную функцию и пометьте её с помощью @Preview. После этого Android Studio покажет результат её отображения на панели дизайна.
Сама функция предварительного просмотра также является компонуемой, поэтому у неё есть обе аннотации: @Preview и @Composable.
@Preview
@Composable
fun GreetingPreview() {
Greeting("World")
}Предварительные просмотры не принимают параметры
Функция предварительного просмотра не должна принимать параметры. Compose должен самостоятельно вызвать её, поэтому он не может передать ей аргументы.
Поэтому создают оболочку: предварительный просмотр вызывает ваш настоящий компонуемый элемент и передаёт ему демонстрационные данные для отображения.
@Preview
@Composable
fun ProfilePreview() {
ProfileCard(name = "Ada")
}Именование функций предварительного просмотра
Распространённое соглашение — называть предварительный просмотр по имени отображаемого компонуемого элемента, добавляя в конце Preview. Для Greeting вы напишете GreetingPreview.
Так сразу понятно, какому компонуемому элементу принадлежит предварительный просмотр, особенно когда файл разрастается.
@Preview
@Composable
fun HeaderPreview() {
Header()
}Назначение имени предварительному просмотру
Вы можете дать предварительному просмотру название с помощью параметра name. Этот заголовок появится над отображаемым предварительным просмотром в Android Studio.
Понятные названия помогают сразу отличать несколько предварительных просмотров друг от друга.
@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
ProfileCard("Ada")
}Отображение фона
По умолчанию предварительный просмотр может отображаться на прозрачном фоне. Установите showBackground = true, чтобы нарисовать сплошную поверхность позади компонуемого элемента.
Так на панели дизайна гораздо проще оценивать расстояния и цвета.
@Preview(showBackground = true)
@Composable
fun TextPreview() {
Text("Hello!")
}Несколько предварительных просмотров одновременно
Вы можете добавить несколько аннотаций @Preview к одной функции или написать несколько функций предварительного просмотра. Каждая из них отображается отдельно.
Это удобно для проверки одного и того же пользовательского интерфейса с разными демонстрационными данными, например с коротким и длинным именем.
@Preview
@Composable
fun ShortNamePreview() {
Greeting("Ada")
}
@Preview
@Composable
fun LongNamePreview() {
Greeting("Grace Hopper")
}Предварительный просмотр разных размеров
Параметры widthDp и heightDp задают размер области предварительного просмотра. Благодаря этому можно проверить, как выглядит макет в маленькой или большой области.
Настройка размера предварительного просмотра помогает обнаружить неудачные переносы текста или выход содержимого за границы.
@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
Greeting("Hi")
}Предварительные просмотры в тёмном режиме
С помощью параметра uiMode, установленного в ночной режим, можно проверить, как пользовательский интерфейс выглядит в тёмной теме. Это помогает обнаружить цвета, которые плохо смотрятся на тёмном фоне.
Если заранее проверить оба варианта — светлый и тёмный, — позже вас будет ждать меньше неожиданностей.
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
ProfileCard("Ada")
}Интерактивные и обновляемые предварительные просмотры
Android Studio может обновлять предварительный просмотр по мере ввода кода, поэтому изменения появляются почти мгновенно. Также есть интерактивный режим, в котором можно нажимать элементы без полной сборки.
Предварительные просмотры не заменяют запуск приложения, но значительно ускоряют разработку экранов.
Предварительные просмотры предназначены только для отладки
Функции предварительного просмотра — это инструменты разработки. Они не входят в поставляемое приложение и не показываются пользователям.
Поэтому можете добавлять сколько угодно предварительных просмотров с демонстрационными данными. Они влияют только на то, что вы видите в среде разработки.
@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
InfoBlock()
}Быстрая проверка
Повторим важное правило о функциях предварительного просмотра.
Итоги
Вы узнали, что @Preview отображает компонуемый элемент внутри Android Studio, и для этого не требуется устройство. Функции предварительного просмотра не принимают параметров, поэтому они оборачивают настоящий компонуемый элемент и передают ему демонстрационные данные.
Полезные параметры включают name, showBackground, widthDp, heightDp и uiMode для тёмного режима. Предварительные просмотры — это инструменты только для отладки. Далее вы объедините всё изученное и создадите настоящую карточку профиля.
Часто задаваемые вопросы
Урок «Предварительный просмотр интерфейса» бесплатный?
Да — полный текст урока «Предварительный просмотр интерфейса» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.
Чему я научусь в уроке «Предварительный просмотр интерфейса»?
Используйте @Preview для быстрой итерации. Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Android Academy?
Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Предварительный просмотр интерфейса»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Android Academy?
Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое Composable
- Основы Text и Column
- Предварительный просмотр интерфейса
- Создание карточки профиля