Bu bölümde, etkileşim işleyicileri aracılığıyla tasarımımıza nasıl etkileşim ekleyeceğimizi öğreneceğiz.
Etkileşim işleyicileri, bir bileşenin nerede etkileşimde bulunabileceğini (dokunulması, iki kez dokunma vb.) belirtmenin bir yolunu sağlar. Etkileşim işleyicileri bir tasarımın içindeki herhangi bir katmana eklenebilir.
İşleyici ekle
Etkileşim işleyicileri herhangi bir katmana eklenebilir. Bu, tasarımcıların bileşenin hangi parçalarının etkileşimli olduğunu belirtmesine olanak tanır.
Etkileşim işleyici eklemek için hero-item varyantını (çerçeve), Parametre'nin yanındaki + simgesini tıklayın ve
tap-handler
'yi seçin. Bu sayede geliştiriciler karta dokunan kullanıcılara tepki verecek bir kod yazabilir.Önceki adımı audio-item varyantındaki menü simge katmanıyla tekrarlayın. Bu sayede geliştiriciler, kullanıcı menü simgesine dokunduğunda bir menü görüntüleyebilir.
Menüye dokunulduğunda işleyicisini seçerseniz diğer varyantlarda menü simgesi olmadığından bunun yalnızca ses öğesi varyantı için geçerli olduğunu görürsünüz. Ancak NewsCard'a dokunulan öğe, üç varyant için de geçerlidir. Diğer bir deyişle, üç varyanttan herhangi birine dokunulduğunda çalışması için bir işleyici (kod içinde) sağlayabilirsiniz. Böylece, kod ve parametre yinelenir. Bunun nasıl çalıştığını aşağıdaki Android Studio'da bileşeni güncelleme bölümünde daha ayrıntılı olarak göreceğiz.
Adlandırılmış sürümü kaydet
Şimdi bu sürümü koda aktarılmaya hazır olarak işaretleyelim.
Açık değilse Figma Relay eklentisini açın.
İletişim kutusunun sağ alt köşesindeki Geliştiriciyle paylaş 'ı tıklayın.
Geliştiriciyle paylaş ekranında, sürüm için bir ad ve açıklama girin.
Örnek Başlık: Eklenen Etkileşimler
Örnek Açıklama: Kartlara iki etkileşim işleyici eklendi
Kaydet'i tıklayın.
Bileşen bağlantısını panoya kopyalamak için MAC'te CMD-L, Windows'da CTRL-L tuşlarına basın.
Android Studio'da bileşeni güncelleme
Şimdi NewsCard bileşenini güncelleyelim:
Android Studio'da, Proje aracı penceresinin Android görünümünde olduğundan emin olun. Ardından
app/ui-packages/news_card/
öğesini sağ tıklayın ve içerik menüsünün alt kısmındaki Kullanıcı Arayüzü Paketini Güncelle'yi tıklayın.Projenizi oluşturmak için öğesini tıklayın. Bu işlem, güncellenmiş UI Paketi'ni alır ve composable kodun güncellenmiş bir sürümünü oluşturur.
app/java/com/example/hellonews/newscard/NewsCard.kt
örneğini inceleyin ve etkileşim işleyicilerin NewsCard'a parametre olarak eklendiğine bakın (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 = {} ) { ...
Uygulamaya entegre edin
Şimdi etkileşimlerimize birkaç işleyici ekleyelim.
app/java/com/example/hellonews/ui/home/HomeScreen.kt
içinde 175. satırın yakınlarındakiPostListArticleStories
bölümüne ilerleyin.... @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
içinonNewsCardTapped
ile ilgili işleyici ekleyin.createOnTapped
, başlık ve gövde şeklinde parametrelerin bulunduğu bir iletişim kutusu açar.@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)) ... } }
Her yayın için
onNewsCardTapped
işleyicileri ekleyin.@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)) } } }
Hâlâ
HomeScreen.kt
konumundayken 260. satır civarındaPostListAudioStories
bölümüne ilerleyin.... @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(...) ...
Her yayın için
onNewsCardTapped
işleyicileri ekleyin. Ses varyantının menüsü olduğu içincreateOnTapped
öğesinionMenuTapped
adlı kullanıcıya atayın.@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)) } } }
Uygulamayı derlemek ve emülatörde çalıştırmak için ▶ simgesini tıklayın.
Harika! Geçiş'in gelişmiş özelliklerini öğrendiniz.
Geçiş İş Akışı bölümünde Geçiş ile çalışma hakkında daha fazla bilgi edinebilirsiniz. Ayrıca, herhangi bir geri bildiriminiz varsa lütfen bize bildirin.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- İçerik parametreleri
- Tasarım varyantlarını kullanma