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

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

탭 상호작용이 있는 NewsApp

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

핸들러 추가

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

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

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

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

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

  3. 메뉴를 탭했을 때 핸들러를 선택하면 audio-item 변형에 적용됩니다. 왜냐하면 다른 변형에는 메뉴 아이콘을 탭합니다. 하지만 NewsCard 탭함은 있습니다. 즉, 코드 내에서 실행할 한 개의 핸들러를 세 가지 변형 중 하나를 탭하면 코드 중복을 제거하고 매개변수입니다. 작동 방식은 다음 업데이트 구성요소 섹션에 나와 있습니다.

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

이름이 지정된 버전 저장

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

  1. Figma Relay 플러그인이 아직 열려 있지 않다면 엽니다.

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

  3. 개발자와 공유 화면에서 앱의 이름과 설명을 입력합니다. 있습니다.

    제목 예시: 추가된 상호작용

    설명 예: 두 개의 상호작용 핸들러가 카드에 추가되었습니다.

  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 패키지를 사용하여 업데이트된 버전의 구성 가능한 코드가 생성됩니다.

    <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 앱이 매개변수를 제목 및 본문으로 갖는 대화상자입니다.

    @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를 사용하는 방법을 자세히 알아보세요. 섹션으로 이동합니다. 또한 기회가 있으시다면 의견을 기다리겠습니다.

현재 추천 자료가 없습니다.

Google 계정에 해 보세요.