W tej sekcji dowiesz się, jak dodawać interakcje do projektu za pomocą modułów obsługi interakcji.
Moduły obsługi interakcji umożliwiają określenie, w którym miejscu można wchodzić w interakcje z komponentem (klikanie, dwukrotne dotknięcie itp.). Moduły obsługi interakcji można dodać do dowolnej warstwy w projekcie.
Dodaj moduły obsługi
Moduły obsługi interakcji można dodać do dowolnej warstwy. Dzięki temu projektanci mogą określić, które części komponentu są interaktywne.
Wybierz wariant hero-item (ramkę), kliknij + obok Parametru i wybierz
tap-handler
, aby dodać moduł obsługi interakcji. Dzięki temu deweloperzy mogą pisać kod, który reaguje na kliknięcie karty przez użytkownika.Powtórz poprzedni krok, używając warstwy ikony menu w wariancie elementu audio. Dzięki temu deweloperzy mogą wyświetlać menu, gdy użytkownik kliknie ikonę menu.
Gdy wybierzesz moduł obsługi w menu klikniętym, zauważysz, że ma ono zastosowanie tylko do wariantu audio-item, ponieważ pozostałe wersje nie mają ikony menu. Jednak dotknięcie karty NewsCard dotyczy wszystkich 3 wariantów. Oznacza to, że możesz podać 1 moduł obsługi (w kodzie), który uruchamia się po kliknięciu dowolnego z 3 wariantów. Pozwala to uniknąć duplikowania kodu i parametrów. Szczegółowo dowiesz się, jak to działa, w sekcji Aktualizuj komponent w Android Studio.
Zapisz wersję z nazwą
Oznaczmy tę wersję jako gotową do zaimportowania do kodu.
Otwórz wtyczkę Figma Relay, jeśli nie jest jeszcze otwarta.
Kliknij Udostępnij deweloperowi w prawym dolnym rogu okna.
Na ekranie Udostępnij deweloperowi wpisz nazwę i opis wersji.
Przykładowy tytuł: Dodane interakcje
Przykładowy tekst: do kart dodano 2 moduły obsługi interakcji.
Kliknij Zapisz.
Naciśnij CMD+L na komputerze MAC lub CTRL+L w systemie Windows, aby skopiować link komponentu do schowka.
Zaktualizuj komponent w Android Studio
Zaktualizujmy komponent NewsCard:
W Android Studio sprawdź, czy okno narzędzia Projekt jest ustawione w widoku Android. Następnie kliknij prawym przyciskiem myszy
app/ui-packages/news_card/
i u dołu menu kontekstowego kliknij Zaktualizuj pakiet UI.Kliknij , aby utworzyć projekt. Spowoduje to pobranie zaktualizowanego pakietu UI i wygenerowanie zaktualizowanej wersji kodu kompozycyjnego.
Zajrzyj do
app/java/com/example/hellonews/newscard/NewsCard.kt
i zobacz, czy moduły obsługi interakcji zostały dodane jako parametry do 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 = {} ) { ...
Integracja z aplikacją
Teraz dodajmy kilka modułów obsługi do interakcji.
W sekcji
app/java/com/example/hellonews/ui/home/HomeScreen.kt
przewiń w dół do sekcjiPostListArticleStories
w okolicach wiersza 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(...) ...
W przypadku
postTop
dodaj moduły obsługionNewsCardTapped
.createOnTapped
otwiera okno z parametrami takimi jak tytuł i treść.@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)) ... } }
W przypadku każdego posta dodaj moduły obsługi:
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)) } } }
Będąc w aplikacji
HomeScreen.kt
, przewiń w dół do sekcjiPostListAudioStories
w okolicach wiersza 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(...) ...
W przypadku każdego posta dodaj moduły obsługi:
onNewsCardTapped
. Wersja audio zawiera menu, więc przypisz wartośćcreateOnTapped
do elementuonMenuTapped
.@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)) } } }
Kliknij ▶, aby utworzyć aplikację i uruchomić ją w emulatorze.
Hurra! Znasz już zaawansowane funkcje usługi Relay.
Więcej informacji o pracy z usługą Relay znajdziesz w sekcji Przepływ pracy przekazywania. Chętnie poznamy też Twoją opinię.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Parametry treści
- Obsługa wariantów projektowych