Добавляйте обработчики взаимодействия в проекты

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

Обработчики взаимодействия позволяют указать, где с компонентом можно взаимодействовать (нажатие, двойное нажатие и т. д.). Обработчики взаимодействия можно добавить на любой уровень внутри дизайна.

Добавить обработчики

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

1. Выберите вариант элемента-героя (рамку), нажмите + рядом с параметром и выберите tap-handler чтобы добавить обработчик взаимодействия. Это позволяет разработчикам писать код, который реагирует на нажатие пользователем карты.

   

2. Повторите предыдущий шаг со слоем значка меню в варианте аудио-элемента . Это позволяет разработчикам отображать меню, когда пользователь нажимает на значок меню.

   

3. Если вы выберете обработчик касания меню , вы заметите, что он применяется только к варианту аудио-элемента , поскольку другие варианты не имеют значка меню. Тем не менее, нажатие на NewsCard применимо ко всем трем вариантам. Это означает, что вы можете предоставить один обработчик (в коде), который будет запускаться при использовании любого из трех вариантов, устраняя дублирование кода и параметров. Мы увидим, как это работает более подробно в следующем разделе «Обновление компонента в Android Studio» .

   

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

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

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

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

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

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

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

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

5. Нажмите CMD-L на MAC и CTRL-L в Windows, чтобы скопировать ссылку на компонент в буфер обмена.

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

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

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

   

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

   

3. Посмотрите 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 = {}
   ) {
   ...
   

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

Теперь давайте добавим несколько обработчиков к нашим взаимодействиям.

1. В 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(...)
   ...
   

2. Для 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))
         ...
     }
   }
   

3. Для каждого сообщения добавьте обработчики 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))
         }
     }
   }
   

4. Продолжая работать с 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(...)
   ...
   

5. Для каждого сообщения добавьте обработчики 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))
         }
     }
   }
   

6. Нажмите ▶, чтобы создать приложение и запустить его в эмуляторе.

   

   

   Ура! Вы ознакомились с расширенными функциями Relay.

Подробнее о том, как работать с Relay, можно узнать в разделе «Рабочий процесс с реле» . Мы также будем рады услышать от вас, если у вас есть какие-либо отзывы .