Содержимое большинства дизайнов пользовательского интерфейса не статично — оно меняется в зависимости от данных. В этом разделе мы добавляем данные в наш дизайн с помощью параметров контента, которые позволяют дизайнерам указать, какая часть дизайна должна быть заполнена данными.
Добавляем параметры в Figma
Давайте добавим параметры контента в наш компонент.
Переключитесь на Фигму. В NewsCardTutorial выберите слой миниатюры изображения в варианте главного элемента (⌘ + щелчок на Mac или Ctrl + щелчок по изображению в Windows и Linux).
В плагине Relay for Figma нажмите + и выберите image-content в раскрывающемся меню, затем измените имя на «миниатюра».
Выберите слой с текстом заголовка , нажмите + и выберите text-content . Повторите те же шаги для автора и слоев текста с датой в варианте главного элемента. Назовите их «заголовок», «автор» и «дата» соответственно.
Нажмите на параметр миниатюры в плагине. Обратите внимание, что в каждом варианте компонента слой миниатюр представляет собой изображение и выбран.
Поскольку три слоя имеют одно и то же имя («миниатюра») и один и тот же тип данных (изображение-контент), параметр контента был подключен к нему во всех трех вариантах. Это означает, что один параметр предоставляет одни и те же данные для нескольких вариантов. Это также справедливо для параметров заголовка, автора и даты.
Сохранить названную версию
Давайте теперь отметим эту версию как готовую для импорта в код.
Откройте плагин Figma Relay, если он еще не открыт.
Нажмите «Поделиться с разработчиком» .
На экране «Поделиться с разработчиком» введите имя и описание версии.
Пример названия : Добавленные параметры
Пример описания : добавлены параметры контента на карточку.
Нажмите Сохранить .
Обновление компонента в Android Studio
Давайте обновим компонент NewsCard :
В Android Studio убедитесь, что окно инструмента «Проект» находится в представлении Android . Затем щелкните правой кнопкой мыши app/ui-packages/news_card/ и выберите « Обновить пакет пользовательского интерфейса» .
Нажмите на для создания вашего проекта. При этом будет использован обновленный пакет пользовательского интерфейса и сгенерирована обновленная версия составного кода.
Если вы посмотрите app/java (generated)/com/example/hellonews/newscard/NewsCard.kt , вы увидите, что добавленные нами параметры контента ( thumbnail , headline , author , date ) появляются в списке параметров нашего составного объекта.
// View to select for NewsCardenumclassView{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.*/@ComposablefunNewsCard(modifier:Modifier=Modifier,view:View=View.HeroItem,thumbnail:Painter=EmptyPainter(),headline:String="",author:String="",date:String=""){...
Интегрировать в приложение
Давайте вернемся к нашему приложению, пользовательский интерфейс которого мы еще не изменили. Он содержит список обычных новостей и список аудиоисторий. Это два компонента, к которым нам нужно добавить наш компонент NewsCard :
Составной элемент PostListArticleStories отвечает за регулярные новости.
Параметр postTop представляет главную новость.
Параметр сообщений представляет остальную часть историй.
Составной элемент PostListAudioStories визуализирует аудионовостные истории. Теперь давайте интегрируем наш компонент NewsCard на главный экран.
В app/java/com/example/hellonews/ui/home/HomeScreen.kt добавьте следующие строки импорта рядом с другими строками импорта в верхней части файла: import com.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
Оставаясь в HomeScreen.kt , прокрутите вниз до PostListArticleStories .
Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.