이 섹션에서는 상호작용 핸들러를 통해 설계에 상호작용을 추가하는 방법을 알아봅니다.
상호작용 핸들러는 구성요소가 상호작용할 수 있는 위치(탭, 두 번 탭 등)를 지정하는 방법을 제공합니다. 상호작용 핸들러는 설계 내 모든 레이어에 추가할 수 있습니다.
핸들러 추가
상호작용 핸들러는 모든 레이어에 추가할 수 있습니다. 이를 통해 디자이너는 상호작용하는 구성요소의 부분을 지정할 수 있습니다.
hero-item 변형(프레임)을 선택하고 매개변수 옆에 있는 +를 클릭한 후
tap-handler
를 선택하여 상호작용 핸들러를 추가합니다. 이를 통해 개발자는 사용자가 카드를 탭하는 것에 반응하는 코드를 작성할 수 있습니다.audio-item 변형에서 메뉴 아이콘 레이어를 사용하여 이전 단계를 반복합니다. 이렇게 하면 사용자가 메뉴 아이콘을 탭할 때 개발자가 메뉴를 표시할 수 있습니다.
메뉴 탭함 핸들러를 선택하면 audio-item 변형에만 적용됩니다. 다른 변형에는 메뉴 아이콘이 없기 때문입니다. 그러나 NewsCard 탭함은 세 가지 변형 모두에 적용됩니다. 즉, 세 가지 변형 중 하나를 탭할 때 실행할 하나의 핸들러 (코드 내)를 제공하여 코드 및 매개변수의 중복을 제거할 수 있습니다. 작동 방식은 다음 Android 스튜디오의 구성요소 업데이트 섹션에서 더 자세히 알아봅니다.
이름이 지정된 버전 저장
이제 이 버전을 코드로 가져올 준비가 된 것으로 표시하겠습니다.
Figma Relay 플러그인을 엽니다(아직 열려 있지 않은 경우).
대화상자의 오른쪽 하단에서 개발자와 공유 를 클릭합니다.
개발자 화면과 공유에서 버전의 이름과 설명을 입력합니다.
제목 예: 추가된 상호작용
설명 예: 카드에 추가된 상호작용 핸들러 2개
저장을 클릭합니다.
MAC에서는 CMD-L을, Windows에서는 Ctrl-L을 눌러 구성요소 링크를 클립보드에 복사합니다.
Android 스튜디오에서 구성요소 업데이트
이제 NewsCard 구성요소를 업데이트해 보겠습니다.
Android 스튜디오에서 프로젝트 도구 창이 Android 뷰인지 확인합니다. 그런 다음
app/ui-packages/news_card/
를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴 하단 근처에서 Update UI Package를 클릭합니다.를 클릭하여 프로젝트를 빌드합니다. 업데이트된 UI 패키지를 사용하여 업데이트된 버전의 구성 가능한 코드가 생성됩니다.
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 = {} ) { ...
앱에 통합
이제 상호작용에 핸들러를 추가해 보겠습니다.
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(...) ...
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)) ... } }
각 게시물에
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)) } } }
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(...) ...
각 게시물에
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)) } } }
▶을 클릭하여 앱을 빌드하고 에뮬레이터에서 실행합니다.
만세! 릴레이의 고급 기능을 알아보았습니다.
Relay 워크플로 섹션에서 Relay를 사용하는 방법을 자세히 알아보세요. 또한 의견이 있으면 언제든지 알려 주시기 바랍니다.