コンテンツ パラメータ

はじめに

パラメータの追加による NewsCard の更新

ほとんどの UI デザインのコンテンツは静的ではなく、データに応じて変化します。このセクションでは、コンテンツ パラメータを使用してデザインにデータを追加します。これにより、デザイナーはデザインのどの部分でデータを入力すべきかを指定できるようになります。

Figma にパラメータを追加する

コンテンツ パラメータをコンポーネントに追加しましょう。

  1. Figma に切り替えます。NewsCardTutorial で、hero-item バリアントサムネイル画像レイヤを選択します(Mac の場合は ⌘ キーを押しながら画像をクリック、Windows と Linux の場合は Ctrl キーを押しながら画像をクリック)。
  2. [Relay for Figma] プラグインで [+] をクリックし、プルダウン メニューから [image-content] を選択して、名前を「thumbnail」に変更します。

    「thumbnail」パラメータが追加された Figma プラグイン
  3. 見出しテキストレイヤを選択し、+ をクリックして text-content を選択します。hero-item バリアントの authordate のテキストレイヤで同じ手順を繰り返します。それぞれ「headline」、「author」、「date」という名前を付けます。

    「headline」、「author」、「date」パラメータが追加された Figma プラグイン
  4. プラグインの thumbnail パラメータをクリックします。すべてのコンポーネント バリアントでサムネイル レイヤは画像で、これが選択されています。

    3 つのレイヤは同じ名前(「thumbnail」)で、データ型(image-content)も同じであるため、コンテンツ パラメータがこの 3 つのバリアントすべてで接続されます。つまり、1 つのパラメータが複数のバリアントに同じデータを提供します。headline、author、date パラメータについても同様です。

    3 つのサムネイル レイヤがすべて選択された Figma プラグイン

名前付きのバージョンを保存する

このバージョンをコードにインポートする準備ができているとマークしましょう。

  1. Figma Relay プラグインを開きます(まだ開いていない場合)。

  2. [デベロッパーと共有] をクリックします。

  3. [デベロッパーと共有] 画面で、バージョンの名前と説明を入力します。

    タイトルの例: 追加されたパラメータ

    説明の例: カードにコンテンツ パラメータを追加しました

  4. [保存] をクリックします。

Android Studio でコンポーネントを更新する

NewsCard コンポーネントを更新しましょう。

  1. Android Studio で [Project] ツール ウィンドウが [Android] ビューになっていることを確認します。次に、app/ui-packages/news_card/ を右クリックし、[Update UI Package] をクリックします。

    コンテキスト メニューの [Update UI Package] オプション
  2. [Make Project] ボタン をクリックして、プロジェクトをビルドします。これにより、更新された UI パッケージが取得され、コンポーズ可能なコードの更新バージョンが生成されます。

    ツールバーのビルドボタン
  3. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt を見ると、追加したコンテンツ パラメータ(thumbnailheadlineauthordate)がコンポーザブルのパラメータ リストに表示されていることを確認できます。

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

アプリに統合する

UI がまだ変更されていないアプリをもう一度見てみましょう。通常のニュースのリストと音声ストーリーのリストがあります。これらは、NewsCard コンポーネントを追加する必要のある 2 つのコンポーザブルです。

  • PostListArticleStories コンポーザブルは、通常のニュースを表します。
  • postTop パラメータはトップニュースを表します。
  • posts パラメータはそれ以外のストーリーを表します。
  • PostListAudioStories コンポーザブルは、音声のニュース記事をレンダリングします。
    3 つのセクションを含むアプリ UI
    次に、NewsCard コンポーネントをホーム画面に統合しましょう。
  1. app/java/com/example/hellonews/ui/home/HomeScreen.kt で、ファイルの先頭付近にある他のインポート行の横に、次のインポートを追加します: インポート com.example.hellonews.newscard.NewsCard

    import com.example.hellonews.newscard.View

  2. 引き続き HomeScreen.kt で、[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. postTop で、HeroItem ビューを使用して、Text コンポーネントを新しくインポートした NewsCard で置き換えます。

    @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. post ごとに、ArticleItem ビューを使用して、Text コンポーネントを新しくインポートした NewsCard で置き換えます。

    @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. 下の音声ストーリーについても同じことができます。HomeScreen.kt で引き続き、260 行目あたりの PostListAudioStories までスクロールします。

    @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. post ごとに、AudioItem ビューを使用して、Text コンポーネントを新しくインポートした NewsCard に置き換えます。

    @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. [Make Project] ボタン をクリックしてプロジェクトを再度ビルドし、結果をプレビュー(分割画面ビュー)に表示します。

    NewsApp のプレビュー

次のステップ

次は、アプリにインタラクションを追加します。