Paramètres de contenu

Introduction

Le contenu de la plupart des conceptions d'interface utilisateur n'est pas statique. Il change en fonction des données. Dans cette section, nous ajouterons des données à notre conception via des paramètres de contenu. Ceux-ci permettent aux graphistes de spécifier quelles parties de la conception doivent être remplies par des données.

Ajouter des paramètres dans Figma

Ajoutons des paramètres de contenu à notre composant.

1. Passez à Figma. Dans NewsCardTutorial, sélectionnez le calque thumbnail image (Image miniature) dans la variante hero-item (⌘+clic sur Mac, ou Ctrl+clic sur Windows et Linux au niveau de l'image).

2. Dans le plug-in Relay pour Figma, cliquez sur +, sélectionnez image-content dans le menu déroulant, puis remplacez le nom par "miniature".

   

3. Sélectionnez le calque headline text (Texte du titre), cliquez sur +, puis sélectionnez text-content. Répétez cette procédure pour les calques de texte author (auteur) et date dans la variante "hero-item". Nommez-les "titre", "auteur" et "date".

   

4. Cliquez sur le paramètre "miniature" dans le plug-in. Notez que dans chaque variante de composant, le calque "miniature" est une image et est sélectionné.

   Étant donné que les trois calques portent le même nom ("miniature") et ont le même type de données (image-content), le paramètre de contenu y a été associé dans les trois variantes. Autrement dit, un seul paramètre fournit les mêmes données pour plusieurs variantes. Cela est également valable pour les paramètres de titre, d'auteur et de date.

   

Enregistrer la version nommée

Nous allons maintenant marquer cette version comme étant prête à être importée dans le code.

1. Ouvrez le plug-in Figma Relay, s'il n'est pas déjà ouvert.

2. Cliquez sur Partager avec le développeur.

3. Sur l'écran Partager avec le développeur, saisissez un nom et une description pour la version.

   Exemple de titre: Paramètres ajoutés

   Exemple de description: paramètres de contenu ajoutés à la fiche

4. Cliquez sur Enregistrer.

Mettre à jour le composant dans Android Studio

Mettons à jour le composant NewsCard :

1. Dans Android Studio, assurez-vous que la fenêtre d'outil Projet se trouve dans la vue Android. Ensuite, faites un clic droit sur app/ui-packages/news_card/, puis cliquez sur Update UI Package (Mettre à jour le package UI).

   

2. Cliquez sur pour créer votre projet. Le package UI mis à jour est alors créé et génère une version mise à jour du code composable.

   

3. En examinant app/java (generated)/com/example/hellonews/newscard/NewsCard.kt, vous constaterez que les paramètres de contenu que nous avons ajoutés (thumbnail, headline, author, date) apparaissent dans la liste des paramètres du composable.

   // 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 = ""
   ) {
   ...
   

Intégrer à l'application

Revenons à notre application, dont l'UI n'a pas encore été modifiée. Elle contient une liste d'articles d'actualité standards et une liste d'articles audio. Voici les deux composables auxquels nous devons ajouter le composant NewsCard :

• Le composable PostListArticleStories est spécifique aux articles d'actualités standards.
• Le paramètre postTop représente l'article à la une.
• Le paramètre posts représente les autres articles.
• Le composable PostListAudioStories diffuse les actualités audio.

  

  Nous allons maintenant intégrer le composant NewsCard dans l'écran d'accueil.

1. Dans app/java/com/example/hellonews/ui/home/HomeScreen.kt, ajoutez les importations suivantes à côté des autres lignes d'importation, vers le haut du fichier : importez com.example.hellonews.newscard.NewsCard.

   import com.example.hellonews.newscard.View

2. Toujours dans HomeScreen.kt, faites défiler la page jusqu'à PostListArticleStories.

   @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. Pour postTop, remplacez le composant Text par le composant NewsCard qui vient d'être importé, à l'aide de la vue 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. Pour chaque post, remplacez le composant "Text" par le composant NewsCard qui vient d'être importé, à l'aide de la vue 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. La procédure est la même pour les articles audio en bas de l'écran. Toujours dans HomeScreen.kt, faites défiler la page jusqu'à PostListAudioStories, vers la ligne 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. Pour chaque article, remplacez le composant Text par le composant NewsCard qui vient d'être importé, à l'aide de la vue 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. Cliquez sur pour recréer votre projet et afficher le résultat dans l'aperçu (écran partagé) :

   

Étape suivante

Nous allons ensuite ajouter quelques interactions à notre application.