Paramètres de contenu

Introduction

Ajout de paramètres supplémentaires à la fiche d'actualités

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

    Plug-in Figma avec le paramètre "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".

    Plug-in Figma avec les paramètres "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.

    Plug-in Figma avec les trois calques de miniature sélectionnés

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

    Option "Mettre à jour le package UI" dans le menu contextuel
  2. Cliquez sur Bouton "Créer un projet" pour créer votre projet. Le package UI mis à jour est alors créé et génère une version mise à jour du code composable.

    Bouton "Compiler" dans la barre d'outils
  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.
    Interface utilisateur de l'application avec trois sections
    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 Bouton &quot;Créer un projet&quot; pour recréer votre projet et afficher le résultat dans l'aperçu (écran partagé) :

    Aperçu de NewsApp

Étape suivante

Nous allons ensuite ajouter quelques interactions à notre application.