Dodawanie modułów obsługi interakcji do projektów

W tej sekcji dowiesz się, jak dodawać interakcje do projektu za pomocą modułów obsługi interakcji.

Moduły obsługi interakcji umożliwiają określenie, w którym miejscu można wchodzić w interakcje z komponentem (klikanie, dwukrotne dotknięcie itp.). Moduły obsługi interakcji można dodać do dowolnej warstwy w projekcie.

Dodaj moduły obsługi

Moduły obsługi interakcji można dodać do dowolnej warstwy. Dzięki temu projektanci mogą określić, które części komponentu są interaktywne.

1. Wybierz wariant hero-item (ramkę), kliknij + obok Parametru i wybierz tap-handler, aby dodać moduł obsługi interakcji. Dzięki temu deweloperzy mogą pisać kod, który reaguje na kliknięcie karty przez użytkownika.

   

2. Powtórz poprzedni krok, używając warstwy ikony menu w wariancie elementu audio. Dzięki temu deweloperzy mogą wyświetlać menu, gdy użytkownik kliknie ikonę menu.

   

3. Gdy wybierzesz moduł obsługi w menu klikniętym, zauważysz, że ma ono zastosowanie tylko do wariantu audio-item, ponieważ pozostałe wersje nie mają ikony menu. Jednak dotknięcie karty NewsCard dotyczy wszystkich 3 wariantów. Oznacza to, że możesz podać 1 moduł obsługi (w kodzie), który uruchamia się po kliknięciu dowolnego z 3 wariantów. Pozwala to uniknąć duplikowania kodu i parametrów. Szczegółowo dowiesz się, jak to działa, w sekcji Aktualizuj komponent w Android Studio.

   

Zapisz wersję z nazwą

Oznaczmy tę wersję jako gotową do zaimportowania do kodu.

1. Otwórz wtyczkę Figma Relay, jeśli nie jest jeszcze otwarta.

2. Kliknij Udostępnij deweloperowi w prawym dolnym rogu okna.

3. Na ekranie Udostępnij deweloperowi wpisz nazwę i opis wersji.

   Przykładowy tytuł: Dodane interakcje

   Przykładowy tekst: do kart dodano 2 moduły obsługi interakcji.

4. Kliknij Zapisz.

5. Naciśnij CMD+L na komputerze MAC lub CTRL+L w systemie Windows, aby skopiować link komponentu do schowka.

Zaktualizuj komponent w Android Studio

Zaktualizujmy komponent NewsCard:

1. W Android Studio sprawdź, czy okno narzędzia Projekt jest ustawione w widoku Android. Następnie kliknij prawym przyciskiem myszy app/ui-packages/news_card/ i u dołu menu kontekstowego kliknij Zaktualizuj pakiet UI.

   

2. Kliknij , aby utworzyć projekt. Spowoduje to pobranie zaktualizowanego pakietu UI i wygenerowanie zaktualizowanej wersji kodu kompozycyjnego.

   

3. Zajrzyj do app/java/com/example/hellonews/newscard/NewsCard.kt i zobacz, czy moduły obsługi interakcji zostały dodane jako parametry do 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 = {}
   ) {
   ...
   

Integracja z aplikacją

Teraz dodajmy kilka modułów obsługi do interakcji.

1. W sekcji app/java/com/example/hellonews/ui/home/HomeScreen.kt przewiń w dół do sekcji PostListArticleStories w okolicach wiersza 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. W przypadku postTop dodaj moduły obsługi onNewsCardTapped. createOnTapped otwiera okno z parametrami takimi jak tytuł i treść.

   @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. W przypadku każdego posta dodaj moduły obsługi: 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. Będąc w aplikacji HomeScreen.kt, przewiń w dół do sekcji PostListAudioStories w okolicach wiersza 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. W przypadku każdego posta dodaj moduły obsługi: onNewsCardTapped. Wersja audio zawiera menu, więc przypisz wartość createOnTapped do elementu 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. Kliknij ▶, aby utworzyć aplikację i uruchomić ją w emulatorze.

   

   

   Hurra! Znasz już zaawansowane funkcje usługi Relay.

Więcej informacji o pracy z usługą Relay znajdziesz w sekcji Przepływ pracy przekazywania. Chętnie poznamy też Twoją opinię.

Polecane dla Ciebie

• Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
• Parametry treści
• Obsługa wariantów projektowych