インタラクション ハンドラをデザインに追加する

このセクションでは、インタラクション ハンドラを介してデザインにインタラクションを追加する方法について説明します。

タップ インタラクションのある NewsApp

インタラクション ハンドラは、コンポーネントを操作（タップ、ダブルタップなど）できる場所を指定する方法を提供します。インタラクション ハンドラは、デザイン内のすべてのレイヤに追加できます。

ハンドラを追加する

インタラクション ハンドラはどのレイヤにも追加できます。これによりデザイナーは、コンポーネントのどの部分をインタラクティブにするかを指定できます。

  1. hero-item バリアント（フレーム）を選択し、[Parameter] の横にある [+] をクリックします。tap-handler を選択して、インタラクション ハンドラを追加します。これによりデベロッパーは、ユーザーによるカードへのタップ操作に反応するコードを記述できます。

    hero-item バリアントが選択された Figma プラグイン

  2. audio-item バリアントのメニュー アイコンレイヤで前の手順をもう一度行います。これによりデベロッパーは、ユーザーがメニュー アイコンをタップしたときにメニューを表示できます。

    メニュー アイコン バリアントが選択された Figma プラグイン

  3. [on Menu Tapped] ハンドラを選択すると、このハンドラは audio-item バリアントにのみ適用されます。これは、他のバリアントにはメニュー アイコンがないためです。ただし、NewsCard でタップされた場合は 3 つのバリアントすべてに適用されます。つまり、3 つのバリアントのいずれかがタップされたときに実行される 1 つのハンドラを（コード内で）提供して、コードとパラメータの重複を排除できます。この仕組みについては、次の Android Studio のコンポーネントをアップデートするのセクションで説明します。

    タップハンドラが選択された Figma プラグイン

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

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

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

  2. ダイアログの右下にある [デベロッパーと共有] をクリックします。

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

    タイトルの例: 追加されたインタラクション

    説明の例: 2 つのインタラクション ハンドラをカードに追加する

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

  5. MAC の場合は CMD+L キー、Windows の場合は Ctrl+L キーを押して、コンポーネント リンクをクリップボードにコピーします。

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

アプリに統合する

次に、インタラクションにハンドラを追加しましょう。

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

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

  3. 投稿ごとに、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))
      }
  }
}

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

  5. 投稿ごとに、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))
      }
  }
}

  6. ▶ をクリックしてアプリをビルドし、エミュレータで実行します。

    ツールバーの実行ボタン
    実際のニュースアプリのプレビュー

    今回は、Relay の高度な機能について学習しました。

Relay を操作する方法の詳細については、Relay ワークフロー セクションをご覧ください。また、フィードバックがありましたらぜひお聞かせください。