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

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

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

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

ハンドラを追加する

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

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

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

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

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

  3. on Menutapped ハンドラを選択すると、 audio-item バリエーションにこのバリエーションが適用されます。他のバリエーションにはバリエーションがないからです。 メニュー アイコンを選択します。ただし、NewsCard でタップされたことは 3 つすべてに適用されます あります。つまり、必要なときに実行する 1 つのハンドラを（コードで）指定し、 3 つの亜種のいずれかをタップしてコードの重複を排除し あります。この仕組みについては、次の更新 コンポーネントをご覧ください。

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

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

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

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

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

  3. [Share with developer screen] で、アプリの名前と説明を入力します。 できます。

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

    説明の例: 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 パッケージが取得され、コンポーズ可能なコードの更新バージョンが生成されます。

    <ph type="x-smartling-placeholder">
    </ph> ツールバーのビルドボタン

  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 が開く そのパラメータが title と body であることがわかります。

    @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 のハンドラを追加します。オーディオ バージョン以降 メニューがある場合は、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 ワークフローをご覧ください。 。皆様からのご意見やご感想をお待ちしております フィードバック。