В этом разделе мы узнаем, как добавлять взаимодействия в наш дизайн с помощью обработчиков взаимодействий.
![NewsApp с сенсорным взаимодействием](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/interaction-handlers/newsapp-with-tap-interaction.png?hl=ru)
Обработчики взаимодействия позволяют указать, где с компонентом можно взаимодействовать (нажатие, двойное нажатие и т. д.). Обработчики взаимодействия можно добавить на любой уровень внутри дизайна.
Добавить обработчики
Обработчики взаимодействия можно добавить на любой уровень. Это позволяет дизайнерам указать, какие части компонента являются интерактивными.
Выберите вариант элемента-героя (рамку), нажмите + рядом с параметром и выберите
tap-handler
чтобы добавить обработчик взаимодействия. Это позволяет разработчикам писать код, который реагирует на нажатие пользователем карты.Повторите предыдущий шаг со слоем значка меню в варианте аудио-элемента . Это позволяет разработчикам отображать меню, когда пользователь нажимает на значок меню.
Если вы выберете обработчик касания меню , вы заметите, что он применяется только к варианту аудио-элемента , поскольку другие варианты не имеют значка меню. Тем не менее, нажатие на NewsCard применимо ко всем трем вариантам. Это означает, что вы можете предоставить один обработчик (в коде), который будет запускаться при использовании любого из трех вариантов, устраняя дублирование кода и параметров. Мы увидим, как это работает более подробно в следующем разделе «Обновление компонента в Android Studio» .
Сохранить названную версию
Давайте теперь отметим эту версию как готовую для импорта в код.
Откройте плагин Figma Relay, если он еще не открыт.
Нажмите «Поделиться с разработчиком» в правом нижнем углу диалогового окна.
На экране «Поделиться с разработчиком» введите имя и описание версии.
Пример названия : Добавленные взаимодействия
Пример описания : к карточкам добавлены два обработчика взаимодействия.
Нажмите Сохранить .
Нажмите CMD-L на MAC и CTRL-L в Windows, чтобы скопировать ссылку на компонент в буфер обмена.
Обновление компонента в Android Studio
Давайте теперь обновим компонент NewsCard :
В Android Studio убедитесь, что окно инструмента «Проект» находится в представлении Android . Затем щелкните правой кнопкой мыши
app/ui-packages/news_card/
и в нижней части контекстного меню выберите « Обновить пакет пользовательского интерфейса» .Нажмите
для создания вашего проекта. При этом принимается обновленный пакет пользовательского интерфейса и создается обновленная версия составного кода.
Посмотрите
app/java/com/example/hellonews/newscard/NewsCard.kt
и увидите, что обработчики взаимодействия добавляются в качестве параметров в NewsCard (onNewsCardTapped
,onMenuTapped
).// Design to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * Displays a summary of a news article. * * This composable was generated from the UI package 'news_card'. * Generated code; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "", onNewsCardTapped: () -> Unit = {}, onMenuTapped: () -> Unit = {} ) { ...
Интегрировать в приложение
Теперь давайте добавим несколько обработчиков к нашим взаимодействиям.
В
app/java/com/example/hellonews/ui/home/HomeScreen.kt
прокрутите вниз доPostListArticleStories
около строки 175.... @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(...) ...
Для
postTop
добавьте обработчикиonNewsCardTapped
.createOnTapped
открывает диалоговое окно с такими параметрами, как заголовок и тело.@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, onNewsCardTapped = createOnTapped("Card Tapped", postTop.title), view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
Для каждого сообщения добавьте обработчики
onNewsCardTapped
.@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, onNewsCardTapped = createOnTapped("Card Tapped", post.title), view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Продолжая работать с
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(...) ...
Для каждого сообщения добавьте обработчики
onNewsCardTapped
. Поскольку вариант Audio имеет меню, назначьтеcreateOnTapped
onMenuTapped
.@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, onNewsCardTapped = createOnTapped("Card Tapped", post.title), onMenuTapped = createOnTapped("Menu Tapped", post.title), view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Нажмите ▶, чтобы создать приложение и запустить его в эмуляторе.
Ура! Вы ознакомились с расширенными функциями Relay.
Подробнее о том, как работать с Relay, можно узнать в разделе «Рабочий процесс с реле» . Мы также будем рады услышать от вас, если у вас есть какие-либо отзывы .
{% дословно %}Рекомендуется для вас
- Примечание. Текст ссылки отображается, когда JavaScript отключен.
- Параметры контента
- Обработка вариантов дизайна