このセクションでは、インタラクション ハンドラを介してデザインにインタラクションを追加する方法について説明します。
インタラクション ハンドラは、コンポーネントを操作(タップ、ダブルタップなど)できる場所を指定する方法を提供します。インタラクション ハンドラは、デザイン内のすべてのレイヤに追加できます。
ハンドラを追加する
インタラクション ハンドラはどのレイヤにも追加できます。これによりデザイナーは、コンポーネントのどの部分をインタラクティブにするかを指定できます。
hero-item バリアント(フレーム)を選択し、[Parameter] の横にある [+] をクリックします。
tap-handler
を選択して、インタラクション ハンドラを追加します。これによりデベロッパーは、ユーザーによるカードへのタップ操作に反応するコードを記述できます。audio-item バリアントのメニュー アイコンレイヤで前の手順をもう一度行います。これによりデベロッパーは、ユーザーがメニュー アイコンをタップしたときにメニューを表示できます。
[on Menu Tapped] ハンドラを選択すると、このハンドラは audio-item バリアントにのみ適用されます。これは、他のバリアントにはメニュー アイコンがないためです。ただし、NewsCard でタップされた場合は 3 つのバリアントすべてに適用されます。つまり、3 つのバリアントのいずれかがタップされたときに実行される 1 つのハンドラを(コード内で)提供して、コードとパラメータの重複を排除できます。この仕組みについては、次の Android Studio のコンポーネントをアップデートするのセクションで説明します。
名前付きのバージョンを保存する
このバージョンをコードにインポートする準備ができているとマークしましょう。
Figma Relay プラグインを開きます(まだ開いていない場合)。
ダイアログの右下にある [デベロッパーと共有] をクリックします。
[デベロッパーと共有] 画面で、バージョンの名前と説明を入力します。
タイトルの例: 追加されたインタラクション
説明の例: 2 つのインタラクション ハンドラをカードに追加する
[保存] をクリックします。
MAC の場合は CMD+L キー、Windows の場合は Ctrl+L キーを押して、コンポーネント リンクをクリップボードにコピーします。
Android Studio でコンポーネントを更新する
NewsCard コンポーネントを更新しましょう。
Android Studio で [Project] ツール ウィンドウが [Android] ビューになっていることを確認します。次に、
app/ui-packages/news_card/
を右クリックし、コンテキスト メニューの下部にある [Update UI Package] をクリックします。をクリックして、プロジェクトをビルドします。これにより、更新された UI パッケージが取得され、コンポーズ可能なコードの更新バージョンが生成されます。
app/java/com/example/hellonews/newscard/NewsCard.kt
を見て、インタラクション ハンドラが NewsCard(onNewsCardTapped
、onMenuTapped
)にパラメータとして追加されていることを確認します。// Design to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * Displays a summary of a news article. * * This composable was generated from the UI package 'news_card'. * Generated code; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "", onNewsCardTapped: () -> Unit = {}, onMenuTapped: () -> Unit = {} ) { ...
アプリに統合する
次に、インタラクションにハンドラを追加しましょう。
app/java/com/example/hellonews/ui/home/HomeScreen.kt
で、175 行目あたりの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
には、onNewsCardTapped
のハンドラを追加します。createOnTapped
は、パラメータをタイトルと本文として指定したダイアログを開きます。@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, onNewsCardTapped = createOnTapped("Card Tapped", postTop.title), view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
投稿ごとに、
onNewsCardTapped
のハンドラを追加します。@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, onNewsCardTapped = createOnTapped("Card Tapped", post.title), 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(...) ...
投稿ごとに、
onNewsCardTapped
のハンドラを追加します。Audio バリアントにはメニューがあるため、createOnTapped
をonMenuTapped
に割り当てます。@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, onNewsCardTapped = createOnTapped("Card Tapped", post.title), onMenuTapped = createOnTapped("Menu Tapped", post.title), view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
▶ をクリックしてアプリをビルドし、エミュレータで実行します。
今回は、Relay の高度な機能について学習しました。
Relay を操作する方法の詳細については、Relay ワークフロー セクションをご覧ください。また、フィードバックがありましたらぜひお聞かせください。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- コンテンツ パラメータ
- デザイン バリアントの処理