Aggiungere gestori di interazione ai design

In questa sezione impareremo come aggiungere le interazioni al nostro progetto tramite i gestori delle interazioni.

I gestori di interazione forniscono un modo per specificare dove è possibile interagire con un componente (toccato, doppio tocco e così via). I gestori dell'interazione possono essere aggiunti a qualsiasi livello all'interno di un design.

Aggiungi gestori

I gestori dell'interazione possono essere aggiunti a qualsiasi livello. Questo permette ai designer di specificare quali parti del componente sono interattive.

1. Seleziona la variante hero-item (il frame), fai clic su + accanto a Parametro e seleziona tap-handler per aggiungere un gestore delle interazioni. In questo modo gli sviluppatori possono scrivere codice che reagisce a un utente che tocca la scheda.

   

2. Ripeti il passaggio precedente con il livello dell'icona del menu nella variante audio-item. Ciò consente agli sviluppatori di visualizzare un menu quando un utente tocca l'icona del menu.

   

3. Se selezioni il gestore on Menu toccato, noterai che si applica solo alla variante audio-item, perché le altre varianti non hanno un'icona di menu. Tuttavia, la scheda News toccata si applica a tutte e tre le varianti. Ciò significa che puoi fornire un gestore (nel codice) da eseguire quando viene toccata una delle tre varianti, eliminando la duplicazione di codice e parametri. Vedremo come funziona in maggiore dettaglio nella seguente sezione Aggiornare il componente in Android Studio.

   

Salva la versione denominata

Ora contrassegniamo questa versione come pronta per essere importata nel codice.

1. Apri il plug-in Figma Relay, se non è già aperto.

2. Fai clic su Condividi con lo sviluppatore nell'angolo in basso a destra della finestra di dialogo.

3. Nella schermata Condividi con lo sviluppatore, inserisci un nome e una descrizione per la versione.

   Titolo di esempio: interazioni aggiunte

   Descrizione di esempio: due gestori di interazione aggiunti alle schede

4. Fai clic su Salva.

5. Premi CMD-L su un MAC e CTRL-L su Windows per copiare il link del componente negli appunti.

Aggiorna il componente in Android Studio

Aggiorniamo ora il componente NewsCard:

1. In Android Studio, assicurati che la finestra dello strumento Progetto sia in visualizzazione Android. Fai clic con il tasto destro del mouse su app/ui-packages/news_card/ e, nella parte inferiore del menu contestuale, fai clic su Aggiorna pacchetto UI.

   

2. Fai clic su per creare il progetto. Questa operazione prende il pacchetto UI aggiornato e genera una versione aggiornata del codice componibile.

   

3. Dai un'occhiata a app/java/com/example/hellonews/newscard/NewsCard.kt e nota che i gestori delle interazioni sono stati aggiunti come parametri a 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 = {}
   ) {
   ...
   

Integra nell'app

Ora aggiungiamo alcuni gestori alle nostre interazioni.

1. In app/java/com/example/hellonews/ui/home/HomeScreen.kt, scorri verso il basso fino a PostListArticleStories, intorno alla riga 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. Per postTop, aggiungi gestori per onNewsCardTapped. createOnTapped apre una finestra di dialogo con i relativi parametri come titolo e corpo.

   @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. Per ogni post, aggiungi i gestori per 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. Sempre in HomeScreen.kt, scorri verso il basso fino a PostListAudioStories, intorno alla riga 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. Per ogni post, aggiungi i gestori per onNewsCardTapped. Poiché la variante audio ha un menu, assegna createOnTapped a 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. Fai clic su ▶ per creare l'app ed eseguirla nell'emulatore.

   

   

   Evviva! Hai imparato le funzionalità avanzate di Relay.

Per ulteriori informazioni su come utilizzare Relay, consulta la sezione Flusso di lavoro di inoltro. Inoltre, ci piacerebbe ricevere il tuo feedback.

Consigliato per te

• Nota: il testo del link viene visualizzato quando JavaScript è disattivato
• Parametri dei contenuti
• Gestione delle varianti di design