Parametri dei contenuti

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.

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

2. Nel plug-in Relay for Figma, fai clic su + e seleziona image-content dal menu a discesa, quindi modifica il nome in "thumbnail".

   

3. 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".

   

4. 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.

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

2. Fai clic su Condividi con lo sviluppatore.

3. 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

4. Fai clic su Salva.

Aggiorna il componente in Android Studio

Aggiorniamo 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 fai clic su Aggiorna pacchetto UI.

   

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

   

3. 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.

1. 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: import com.example.hellonews.newscard.NewsCard

   import com.example.hellonews.newscard.View

2. 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(...)
   ...
   

3. 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))
           ...
       }
   }
   

4. 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))
           }
       }
   }
   

5. 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(...)
   ...
   

6. 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))
           }
       }
   }
   

7. 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.