このページは Cloud Translation API によって翻訳されました。

コンテンツパラメータ

はじめに

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

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

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

Figma に切り替えます。NewsCardTutorial で、hero-item バリアントのサムネイル画像レイヤを選択します（Mac の場合は ⌘ キーを押しながら画像をクリック、Windows と Linux の場合は Ctrl キーを押しながら画像をクリック）。
[Relay for Figma] プラグインで [+] をクリックし、プルダウンメニューから [image-content] を選択して、名前を「thumbnail」に変更します。
見出しテキストレイヤを選択し、+ をクリックして text-content を選択します。hero-item バリアントの author と date のテキストレイヤで同じ手順を繰り返します。それぞれ「headline」、「author」、「date」という名前を付けます。
プラグインの thumbnail パラメータをクリックします。すべてのコンポーネントバリアントでサムネイルレイヤは画像で、これが選択されています。

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

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

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

Figma Relay プラグインを開きます（まだ開いていない場合）。
[デベロッパーと共有] をクリックします。
[デベロッパーと共有] 画面で、バージョンの名前と説明を入力します。

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

説明の例: カードにコンテンツパラメータを追加しました
[保存] をクリックします。

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

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

Android Studio で [Project] ツールウィンドウが [Android] ビューになっていることを確認します。次に、app/ui-packages/news_card/ を右クリックし、[Update UI Package] をクリックします。
をクリックして、プロジェクトをビルドします。これにより、更新された UI パッケージが取得され、コンポーズ可能なコードの更新バージョンが生成されます。

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

// 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 コンポーザブルは、音声のニュース記事をレンダリングします。

次に、NewsCard コンポーネントをホーム画面に統合しましょう。

app/java/com/example/hellonews/ui/home/HomeScreen.kt で、ファイルの先頭付近にある他のインポート行の横に、次のインポートを追加します: インポート com.example.hellonews.newscard.NewsCard

import com.example.hellonews.newscard.View

引き続き 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(...)
...

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

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

下の音声ストーリーについても同じことができます。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(...)
...

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

をクリックしてプロジェクトを再度ビルドし、結果をプレビュー（分割画面ビュー）に表示します。

次のステップ

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

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
インタラクションハンドラをデザインに追加する
デザインバリアントの処理
Android Studio でデザインをコードに変換する

コンテンツ パラメータ