디자인에 상호작용 핸들러 추가

이 섹션에서는 상호작용 핸들러를 통해 설계에 상호작용을 추가하는 방법을 알아봅니다.

탭 상호작용이 있는 NewsApp

상호작용 핸들러는 구성요소가 상호작용할 수 있는 위치(탭, 두 번 탭 등)를 지정하는 방법을 제공합니다. 상호작용 핸들러는 설계 내 모든 레이어에 추가할 수 있습니다.

핸들러 추가

상호작용 핸들러는 모든 레이어에 추가할 수 있습니다. 이를 통해 디자이너는 상호작용하는 구성요소의 부분을 지정할 수 있습니다.

  1. hero-item 변형(프레임)을 선택하고 매개변수 옆에 있는 +를 클릭한 후 tap-handler를 선택하여 상호작용 핸들러를 추가합니다. 이를 통해 개발자는 사용자가 카드를 탭하는 것에 반응하는 코드를 작성할 수 있습니다.

    hero-item 변형이 선택된 Figma 플러그인

  2. audio-item 변형에서 메뉴 아이콘 레이어를 사용하여 이전 단계를 반복합니다. 이렇게 하면 사용자가 메뉴 아이콘을 탭할 때 개발자가 메뉴를 표시할 수 있습니다.

    메뉴 아이콘 변형이 선택된 Figma 플러그인

  3. 메뉴 탭함 핸들러를 선택하면 audio-item 변형에만 적용됩니다. 다른 변형에는 메뉴 아이콘이 없기 때문입니다. 그러나 NewsCard 탭함은 세 가지 변형 모두에 적용됩니다. 즉, 세 가지 변형 중 하나를 탭할 때 실행할 하나의 핸들러 (코드 내)를 제공하여 코드 및 매개변수의 중복을 제거할 수 있습니다. 작동 방식은 다음 Android 스튜디오의 구성요소 업데이트 섹션에서 더 자세히 알아봅니다.

    탭 핸들러가 선택된 Figma 플러그인

이름이 지정된 버전 저장

이제 이 버전을 코드로 가져올 준비가 된 것으로 표시하겠습니다.

  1. Figma Relay 플러그인을 엽니다(아직 열려 있지 않은 경우).

  2. 대화상자의 오른쪽 하단에서 개발자와 공유 를 클릭합니다.

  3. 개발자 화면과 공유에서 버전의 이름과 설명을 입력합니다.

    제목 예: 추가된 상호작용

    설명 예: 카드에 추가된 상호작용 핸들러 2개

  4. 저장을 클릭합니다.

  5. MAC에서는 CMD-L을, Windows에서는 Ctrl-L을 눌러 구성요소 링크를 클립보드에 복사합니다.

Android 스튜디오에서 구성요소 업데이트

이제 NewsCard 구성요소를 업데이트해 보겠습니다.

  1. Android 스튜디오에서 프로젝트 도구 창이 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를 사용하는 방법을 자세히 알아보세요. 또한 의견이 있으면 언제든지 알려 주시기 바랍니다.