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.
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.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.
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.
Apri il plug-in Figma Relay, se non è già aperto.
Fai clic su Condividi con lo sviluppatore nell'angolo in basso a destra della finestra di dialogo.
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
Fai clic su Salva.
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:
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.Fai clic su per creare il progetto. Questa operazione prende il pacchetto UI aggiornato e genera una versione aggiornata del codice componibile.
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.
In
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, scorri verso il basso fino aPostListArticleStories
, 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(...) ...
Per
postTop
, aggiungi gestori peronNewsCardTapped
.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)) ... } }
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)) } } }
Sempre in
HomeScreen.kt
, scorri verso il basso fino aPostListAudioStories
, 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(...) ...
Per ogni post, aggiungi i gestori per
onNewsCardTapped
. Poiché la variante audio ha un menu, assegnacreateOnTapped
aonMenuTapped
.@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)) } } }
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