在設計中新增互動處理常式

在本節中,我們將透過 互動處理常式

設有輕觸互動的 NewsApp

互動處理常式可讓您指定元件可執行的位置 互動 (輕觸、輕觸兩下等)。可新增互動處理常式 到設計中的任何層次之間

新增處理常式

互動處理常式可新增至任何圖層。方便設計人員 與元件的哪些部分互動

  1. 選取「hero-item」子類 (頁框),按一下 「參數」,然後選取「tap-handler」以新增互動處理常式。這個 可讓開發人員編寫程式碼,回應使用者輕觸資訊卡時產生的回應。

    已選取 hero-item 子類的 Figma 外掛程式
  2. 針對 audio-item 中的menu圖示層,重複上一個步驟。 變數。這可讓開發人員在使用者輕觸選單時顯示選單 圖示。

    已選取 menu 圖示子類的 Figma 外掛程式
  3. 如果您選取「on Menu tapped」處理常式,會發現 是否要套用至 audio-item 子類,因為其他子類沒有 圖示。但是,「on NewsCard tapped」適用於所有三個 子類也就是說,您可以在程式碼中提供一個處理常式,在 輕觸這三種變化版本中的任一個,移除重複的程式碼和 參數。我們會在下文更新 元件。

    已選取輕觸處理常式的 Figma 外掛程式

儲存已命名版本

現在,讓我們將這個版本標示為準備就緒,以便匯入程式碼中。

  1. 開啟 Figma Relay 外掛程式 (如果尚未開啟)。

  2. 按一下對話方塊右下角的 [與開發人員分享]。

  3. 在「分享給開發人員」畫面中,輸入應用程式的名稱和說明 版本。

    標題範例:新增互動

    範例說明:在資訊卡中新增兩個互動處理常式

  4. 按一下 [儲存]

  5. 在 MAC 上按下 CMD-L,在 Windows 上按下 CTRL-L 鍵即可複製元件連結 複製到剪貼簿。

在 Android Studio 中更新元件

現在讓我們更新 NewsCard 元件:

  1. 在 Android Studio 中,確認「Project」工具視窗位於「Android」檢視畫面中。 然後,在 app/ui-packages/news_card/ 和靠近 內容選單,然後按一下「Update UI Package」

    在內容選單中更新 UI 套件選項
  2. 按一下 「Make Project」按鈕 圖示來建構專案。這項操作會採用更新後的 UI 套件,並 產生可組合程式碼的更新版本。

    工具列中的建構按鈕
  3. 請看 app/java/com/example/hellonews/newscard/NewsCard.kt,然後看看 互動處理常式會以參數的形式新增至 NewsCard (onNewsCardTappedonMenuTapped)。

    // 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 中,向下捲動至 PostListArticleStories,第 175 行左右。

    ...
    @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. 針對每個 post,為 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 中,仍有一行向下捲動至「PostListAudioStories」 260。

    ...
    @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. 針對每個 post,為 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. 按一下 ▶ 即可建構應用程式,並在模擬器中執行。

    工具列中的「Run」按鈕
    預覽中的新聞應用程式實際運作情形

    太棒了!您已瞭解 Relay 的進階功能。

如要進一步瞭解如何使用 Relay,請參閱 Relay 工作流程 專區。如果貴公司有任何 意見回饋