Preview сложных элементов в Compose

Поскольку все больше разработчиков Android переходят на Jetpack Compose из-за его декларативного подхода к пользовательскому интерфейсу, ему необходимо быстро просматривать сложные макеты. Однако не так-то просто отображать изображения с URL-адреса в Preview Jetpack Compose, поскольку редактор дизайна Android Studio не поддерживает сетевые вызовы. В этой статье я рассмотрю некоторые стратегии по преодолению ограничений; уделив особое внимание реальным решениям для улучшения рабочего процесса разработки.

Проблемы с загрузкой изображений в Preview

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

«Покажите мне свой код»

Давайте рассмотрим простой код:

@Composable fun ProfileImage(modifier: Modifier = Modifier) {     Column(         verticalArrangement = Arrangement.Center,         horizontalAlignment = Alignment.CenterHorizontally,         modifier = Modifier.padding(32.dp)     ) {         AsyncImage(             model = "https://www.meme-arsenal.com/memes/482d613fe35bccd06d4fdbe1a2a06cdd.jpg",             contentDescription = null,             contentScale =  ContentScale.FillHeight,             modifier = Modifier                 .fillMaxWidth()                 .aspectRatio(16/9F)         )         Text(             text = "Profile picture",             style = MaterialTheme.typography.titleLarge         )     } }  @Preview(showBackground = true) @Composable fun ProfileImagePreview() {     EmptyImagePreviewTheme {         ProfileImage()     } }

И, очевидно, мы увидим такой Preview:

Давайте исправим это:

@Composable fun ProfileImage(     modifier: Modifier = Modifier ) {     Column(         verticalArrangement = Arrangement.Center,         horizontalAlignment = Alignment.CenterHorizontally,         modifier = modifier.padding(32.dp)     ) {         val imageModifier = Modifier             .fillMaxWidth()             .aspectRatio(16/9F)         if (LocalInspectionMode.current) {              Image(                 painter = painterResource(R.drawable.natash),                 contentDescription = null,                  modifier = imageModifier             )         } else {             AsyncImage(                 model = "https://www.meme-arsenal.com/memes/482d613fe35bccd06d4fdbe1a2a06cdd.jpg",                 contentDescription = null,                 contentScale =  ContentScale.FillHeight,                 modifier = imageModifier,             )         }         Text(             text = "Profile picture",             style = MaterialTheme.typography.titleLarge         )     } }

И вот результат:

Объяснение

В Android Jetpack Compose LocalInspectionMode.current — это CompositionLocal, который предоставляет способ проверки того, находится ли текущий контекст Compose в режиме inspection mode, например, когда код отображается в Android Studio Preview.

Назначение LocalInspectionMode.current
— Позволяет разработчикам настраивать пользовательский интерфейс или поведение Composable специально для режима предварительного просмотра в Android Studio.
— Полезно для избежания определенной логики или элементов пользовательского интерфейса, которые не имеют смысла или функциональны в статическом контексте предварительного просмотра, например: сетевые запросы, загрузка данных в реальном времени, анимации или сложные изменения состояния

Заключение

Используя LocalInspectionMode.current, вы можете сделать ваш Preview более надежными и содержательными, не влияя на поведение во время выполнения вашего приложения.