Jetpack Compose и Composable Preview

Максимально используйте экран предварительного просмотра во время итеративной разработки

В новой версии Android Studio Electric Eel поддержка составных предварительных просмотров получила новые функции, такие как определение размера устройства Android, несколько предварительных просмотров с определением класса, примеры источников данных и многое другое.

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

Основное использование

Если в Android Studio создается новый составной объект, под ним создается вторая функция с тегом @Preview, которая служит отправной точкой для ваших предварительных просмотров. Следующий экран используется в качестве примера создания улучшенных превью.

Если в наш компонуемый добавить нужные параметры, мы получим следующий результат. Если превью отсутствует в вашем компонуемом файле, начните писать prev и появится подсказка от Android Studio. Нажав Enter, Android Studio сгенерирует весь необходимый код.

@Preview
@Composable
fun WelcomeScreenPreview() {
    AppTheme {
        val navController = rememberNavController()
        WelcomeScreen(navController = navController)
    }
}

Чтобы сделать его более реалистичным, мы можем добавить пару параметров в файл @Preview.

• showBackground — фон устройства заливается цветом по умолчанию или по параметру colorBackground
• backgroundColor — это 32-битный цвет ARGB в формате Long. Вам нужно вручную умножить шестнадцатеричное представление цвета на длинное число, потому что это число должно быть константой компилятора.
• showSystemUi — показывает нижнюю навигационную верхнюю панель со временем
• name — показывает пользовательское имя для предварительного просмотра
• apiLevel — какая целевая версия Android должна использоваться
• fontScale — масштабирование шрифта исходя из настроек телефона
• locale — изменить используемую локаль представлением
• uiMode — может изменить цветовую маскировку пользовательского интерфейса в соответствии с выбором (например, в темный режим)

@Preview(
    showBackground = true,
    backgroundColor = 256 * 256 * 256, // R * G * B
    showSystemUi = true,
    name = "Welcome Screen",
    fontScale = 1f,
    local = "en"
    apiLevel = Build.VERSION_CODES.TIRAMISU,
    uiMode = Configuration.UI_MODE_TYPE_NORMAL
)

Чтобы избежать интеграции фона, поместите в свое дерево компоновки Surface, Scaffoldили другой компонуемый фон, и он создаст фон для вас.

Размер предварительного просмотра

@Preview реализует изменение размера экрана. Экран может быть предварительно просмотрен на нескольких размерах экрана одновременно. Вы также можете выбрать предустановленные устройства или свою ширину и высоту. Написание id или spec внутри строки покажет подсказки.

// for defining the specific device - names are checked by IDE
@Preview(device = "id:pixel_5")
// for defining the screen specifications - values are checked by IDE too
@Preview(device = "spec:width=411dp,height=891dp,dpi=410,orientation=portrait")

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

Теги предварительного просмотра можно объединить в один класс и переназначить для любого другого представления. Создавать несколько превью для одного компонуемого больше не нужно. Чтобы создать несколько конфигураций экрана, необходимо определить annotation class:

@Preview(device = "id:pixel_5")
@Preview(device = "id:pixel") // you can add any number of previews together
annotation class MultipleScreenSizePreview
@MultipleScreenSizePreview
@Composable
fun WelcomeScreenPreview() {
    AppTheme {
        Surface {
            val navController = rememberNavController()
            WelcomeScreen(navController = navController)
        }
    }
}

Не стесняйтесь смешивать различные устройства и спецификации размера экрана.

Вы также можете смешивать свои пользовательские классы!

// set of bright screens
@Preview(device = "id:pixel_5")
@Preview(device = "id:pixel")
annotation class BrightScreens

// set of dark screens
@Preview(device = "id:pixel_5", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(device = "id:pixel", uiMode = Configuration.UI_MODE_NIGHT_YES)
annotation class DarkScreens

// combination of previews 
@BrightScreens
@DarkScreens
@Composable
fun WelcomeScreenPreview() {
    AppTheme {
        Surface {
            val navController = rememberNavController()
            WelcomeScreen(navController = navController)
        }
    }
}

Добавление образца данных для предварительного просмотра

Составляющим нужны некоторые данные для отображения или состояние для отображения. В большинстве случаев достаточно передать один-два параметра вручную. Однако, если нужно передать много состояний или больших данных, код заполняется всеми входными данными.

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

Вот пример экрана, который может идти между состояниями загрузки, успеха и ошибки.

Вот доступные состояния:

sealed class MainState {
    object LoadingState : MainState()
    object SuccessState : MainState()
    object ErrorState : MainState()
}

Чтобы создать PreviewParameterProvider<T>, поставщику необходимо реализовать этот интерфейс и определить класс данных. Вот вам и удобство запечатанных классов.

class MainStateProvider : PreviewParameterProvider<MainState> {
    override val values = sequenceOf(
        MainState.LoadingState,
        MainState.SuccessState,
        MainState.ErrorState,
    )
}

Поле Values переопределено и дает нам место для размещения наших пользовательских данных. Для каждой записи поставщик создаст новый предварительный просмотр. Входной параметр аннотируется нашим провайдером @PreviewParameter(MainStateProvider::class), а компилятор позаботится обо всем остальном.

@Preview(device = "id:pixel_5")
@Composable
fun MainScreenPrev(@PreviewParameter(MainStateProvider::class) state: MainState) {
    MainScreen(state)
}

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

Последние мысли

• Предварительные просмотры позволяют быстро просматривать изменения, повторять и сравнивать представления без запуска эмулятора.
• Создание превью заставит вас хранить отдельные логику и пользовательский интерфейс, потому что это займет меньше времени.
• Чтобы получить мгновенную обратную связь по нескольким конфигурациям устройств в одной сетке.
• Предварительные просмотры могут создавать изображения, щелкая по ним правой кнопкой мыши. Изображениями можно поделиться с другими разработчиками или менеджерами для быстрой обратной связи.
• К сожалению, предварительные версии не заменяют тестирование пользовательского интерфейса и сквозное тестирование.
• Будь проще!

Спасибо за прочтение!

Ресурсы