Introduzione
I contenuti della maggior parte delle progettazioni di UI non sono statici: cambiano a seconda dei dati. In questa sezione vengono aggiunti dati al design tramite parametri dei contenuti, i quali consentono ai designer di specificare
Aggiungere parametri in Figma
Aggiungiamo i parametri dei contenuti al nostro componente.
- Passa a Figma. In NewsCardTutorial, seleziona il livello immagine in miniatura nella variante dell'elemento hero (⌘ + fai clic su Mac o Ctrl + fai clic su Windows e Linux sull'immagine).
Nel plug-in Relay for Figma, fai clic su + e seleziona
image-content
dal menu a discesa, quindi modifica il nome in "thumbnail".Seleziona il livello del testo del titolo, fai clic su + e seleziona
text-content
. Ripeti gli stessi passaggi per i livelli di testo author e date nella variante dell'elemento hero. Assegna loro rispettivamente "titolo", "autore" e "data".Fai clic sul parametro thumbnail nel plug-in. Come puoi notare, in ogni variante del componente, il livello miniatura è un'immagine ed è selezionato.
Poiché i tre livelli hanno lo stesso nome ("miniatura") e sono dello stesso tipo di dati (image-content), al parametro dei contenuti è stato collegato in tutte e tre le varianti. Ciò significa che un parametro fornisce gli stessi dati a più varianti. Questo vale anche per i parametri per titolo, autore e data.
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.
Nella schermata Condividi con lo sviluppatore, inserisci un nome e una descrizione per la versione.
Titolo di esempio: parametri aggiunti
Descrizione di esempio: parametri dei contenuti aggiunti alla scheda
Fai clic su Salva.
Aggiorna il componente in Android Studio
Aggiorniamo 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 fai clic su Aggiorna pacchetto UI.Fai clic su per creare il progetto. Questa operazione prenderà il pacchetto UI aggiornato e genererà una versione aggiornata del codice componibile.
Se esamini
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
, noterai che i parametri dei contenuti che abbiamo aggiunto (thumbnail
,headline
,author
,date
) sono riportati nell'elenco di parametri del componibile.// View to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list * * This composable was generated from the UI package 'news_card'. * Generated code; don't edit directly. */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "" ) { ...
Integra nell'app
Diamo un'occhiata alla nostra app, la cui UI non abbiamo ancora modificato. Contiene un elenco di notizie regolari e un elenco di notizie audio. Questi sono i due componenti componibili che dobbiamo aggiungere il nostro componente NewsCard a:
- L'elemento componibile PostList ArticleStories è responsabile delle normali notizie.
- Il parametro postTop rappresenta la notizia principale.
- Il parametro publish rappresenta il resto delle notizie.
- Il componibile PostListAudioStories esegue il rendering delle notizie audio. Ora integriamo il componente NewsCard nella schermata Home.
In
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, aggiungi le seguenti importazioni accanto alle altre righe di importazione nella parte superiore del file: importcom.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
Sempre in HomeScreen.kt, scorri verso il basso fino a PostList ArticleStories.
@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, sostituisci il componente Text con la nostra NewsCard appena importata, utilizzando la vista HeroItem.
@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, view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
Per ogni post, sostituisci il componente di testo con la nostra NewsCard appena importata, utilizzando la visualizzazione ArticleItem.
@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, view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Possiamo fare lo stesso per le storie audio in basso. 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(...) ...
Per ogni post, sostituisci il componente Text con la nostra NewsCard appena importata, utilizzando la vista AudioItem.
@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, view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Fai clic su per creare nuovamente il progetto e visualizzare il risultato nell'anteprima (visualizzazione schermo diviso):
Passaggio successivo
In seguito, aggiungeremo alcune interazioni alla nostra app.
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Aggiungere gestori dell'interazione ai progetti
- Gestione delle varianti di design
- Convertire i progetti in codice in Android Studio