Параметры контента

Введение

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

Добавляем параметры в Figma

Давайте добавим параметры контента в наш компонент.

1. Переключитесь на Фигму. В NewsCardTutorial выберите слой миниатюры изображения в варианте главного элемента (⌘ + щелчок на Mac или Ctrl + щелчок по изображению в Windows и Linux).

2. В плагине Relay for Figma нажмите + и выберите image-content в раскрывающемся меню, затем измените имя на «миниатюра».

   

3. Выберите слой с текстом заголовка , нажмите + и выберите text-content . Повторите те же шаги для автора и слоев текста с датой в варианте главного элемента. Назовите их «заголовок», «автор» и «дата» соответственно.

   

4. Нажмите на параметр миниатюры в плагине. Обратите внимание, что в каждом варианте компонента слой миниатюр представляет собой изображение и выбран.

   Поскольку три слоя имеют одно и то же имя («миниатюра») и один и тот же тип данных (изображение-контент), параметр контента был подключен к нему во всех трех вариантах. Это означает, что один параметр предоставляет одни и те же данные для нескольких вариантов. Это также справедливо для параметров заголовка, автора и даты.

   

Сохранить названную версию

Давайте теперь отметим эту версию как готовую для импорта в код.

1. Откройте плагин Figma Relay, если он еще не открыт.

2. Нажмите «Поделиться с разработчиком» .

3. На экране «Поделиться с разработчиком» введите имя и описание версии.

   Пример названия : Добавленные параметры

   Пример описания : добавлены параметры контента на карточку.

4. Нажмите Сохранить .

Обновление компонента в Android Studio

Давайте обновим компонент NewsCard :

1. В Android Studio убедитесь, что окно инструмента «Проект» находится в представлении Android . Затем щелкните правой кнопкой мыши app/ui-packages/news_card/ и выберите « Обновить пакет пользовательского интерфейса» .

   

2. Нажмите на для создания вашего проекта. При этом будет использован обновленный пакет пользовательского интерфейса и сгенерирована обновленная версия составного кода.

   

3. Если вы посмотрите app/java (generated)/com/example/hellonews/newscard/NewsCard.kt , вы увидите, что добавленные нами параметры контента ( thumbnail , headline , author , date ) появляются в списке параметров нашего составного объекта.

   // View to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list
   *
   * This composable was generated from the UI package 'news_card'.
   * Generated code; don't edit directly.
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem,
       thumbnail: Painter = EmptyPainter(),
       headline: String = "",
       author: String = "",
       date: String = ""
   ) {
   ...
   

Интегрировать в приложение

Давайте вернемся к нашему приложению, пользовательский интерфейс которого мы еще не изменили. Он содержит список обычных новостей и список аудиоисторий. Это два компонента, к которым нам нужно добавить наш компонент NewsCard :

• Составной элемент PostListArticleStories отвечает за регулярные новости.
• Параметр postTop представляет главную новость.
• Параметр сообщений представляет остальную часть историй.
• Составной элемент PostListAudioStories визуализирует аудионовостные истории.

  

  Теперь давайте интегрируем наш компонент NewsCard на главный экран.

1. В app/java/com/example/hellonews/ui/home/HomeScreen.kt добавьте следующие строки импорта рядом с другими строками импорта в верхней части файла: import com.example.hellonews.newscard.NewsCard

   import com.example.hellonews.newscard.View

2. Оставаясь в HomeScreen.kt , прокрутите вниз до PostListArticleStories .

   @Composable
   fun HomeScreen(...)
   
   @Composable
   private fun PostList(...)
   
   @Composable
   private fun PostListArticleStoriesSection(...)
   
   @Composable
   private fun SearchArticlesSection(...)
   
   @Composable
   private fun PostListArticleStories(
       postTop: Post,
       posts: List<Post>,
       createOnTapped: (String, String) -> () -> Unit
   ) {...}
   
   @Composable
   private fun AudioStoriesTitle(...)
   
   @Composable
   private fun PostListAudioStories(...)
   
   @Composable
   fun Dialog(...)
   ...
   

3. Для postTop замените компонент Text нашим недавно импортированным NewsCard , используя представление HeroItem .

   @Composable
   private fun PostListArticleStories(
       postTop: Post,
       posts: List<Post>,
       createOnTapped: (String, String) -> () -> Unit
   ) {
       ...
       Column(
           horizontalAlignment = Alignment.Start,
           modifier = ...
       ) {
           Spacer(modifier = Modifier.size(12.dp))
           NewsCard(
               thumbnail = painterResource(postTop.imageId),
               headline = postTop.title,
               author = postTop.metadata.author.name,
               date = postTop.metadata.date,
               view = View.HeroItem
           )
           Spacer(modifier = Modifier.size(12.dp))
           ...
       }
   }
   

4. Для каждого сообщения замените компонент Text нашим недавно импортированным NewsCard , используя представление ArticleItem .

   @Composable
   private fun PostListArticleStories(
       postTop: Post,
       posts: List<Post>,
       createOnTapped: (String, String) -> () -> Unit
   ) {
       ...
       Column(
           horizontalAlignment = Alignment.Start,
           modifier = ...
       ) {
           ...
           posts.forEach { post ->
               NewsCard(
                   thumbnail = painterResource(post.imageId),
                   headline = post.title,
                   author = post.metadata.author.name,
                   date = post.metadata.date,
                   view = View.ArticleItem
               )
               Spacer(modifier = Modifier.size(12.dp))
           }
       }
   }
   

5. Мы можем сделать то же самое для аудиоисторий внизу. Продолжая работать с HomeScreen.kt , прокрутите вниз до PostListAudioStories , около строки 260.

   @Composable
   fun HomeScreen(...)
   
   @Composable
   private fun PostList(...)
   
   @Composable
   private fun PostListArticleStoriesSection(...)
   
   @Composable
   private fun SearchArticlesSection(...)
   
   @Composable
   private fun PostListArticleStories(...)
   
   @Composable
   private fun AudioStoriesTitle(...)
   
   @Composable
   private fun PostListAudioStories(
       posts: List<Post>,
       createOnTapped: (String, String) -> () -> Unit
   ) {...}
   
   @Composable
   fun Dialog(...)
   ...
   

6. Для каждого сообщения замените компонент Text нашим недавно импортированным NewsCard , используя представление AudioItem.

   @Composable
       private fun PostListAudioStories(
       posts: List<Post>,
       createOnTapped: (String, String) -> () -> Unit
   ) {
       Column(
           horizontalAlignment = ...,
           modifier = ...
       ) {
           posts.forEach { post ->
               NewsCard(
                   thumbnail = painterResource(post.imageId),
                   headline = post.title,
                   author = post.metadata.author.name,
                   date = post.metadata.date,
                   view = View.AudioItem
               )
               Spacer(modifier = Modifier.size(12.dp))
           }
       }
   }
   

7. Нажмите на чтобы заново создать проект и просмотреть результат в предварительном просмотре (разделенный экран):

   

Следующий шаг

Далее мы добавим в наше приложение некоторые взаимодействия .