Bu bölümde, aşağıdaki öğeler aracılığıyla tasarımımıza etkileşimler eklemeyi öğreneceğiz: otomatik olarak oluşturulur.
![Dokunma etkileşimi olan NewsApp](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/interaction-handlers/newsapp-with-tap-interaction.png?authuser=0&hl=tr)
Etkileşim işleyiciler, bir bileşenin nerede görüntülenebileceğini belirtmek için dokunma (dokunma, iki kez dokunma vb.). Etkileşim işleyiciler eklenebilir bir katmana kolayca uygulayabilirsiniz.
İşleyici ekle
Etkileşim işleyiciler herhangi bir katmana eklenebilir. Bu, tasarımcıların ve bileşenlerin etkileşimli olduğunu görebilirsiniz.
hero-item varyantını (çerçeve) seçin, yanındaki + işaretini tıklayın Parametre'yi tıklayın ve etkileşim işleyici eklemek için
tap-handler
'yi seçin. Bu geliştiricilerin, kullanıcının karta dokunduğunda tepki veren bir kod yazmasına olanak tanır.Önceki adımı, audio-item öğesindeki menü simgesi katmanıyla tekrarlayın varyantı. Bu, bir kullanıcı menüye dokunduğunda geliştiricilerin bir menü görüntülemesine olanak tanır simgesini tıklayın.
Menüde dokunuldu işleyicisini seçerseniz yalnızca audio-item varyantı için geçerlidir çünkü diğer varyantlar bir menü simgesine dokunun. Ancak, Haber Kartı'ndaki dokunulan değişiklik üçü için de geçerlidir. için de geçerlidir. Bu, bir web sitesini ziyaret ettiğinizde çalıştırılacak bir işleyici (kodda) üç varyanttan herhangi birine dokunularak kodun kopyası kaldırılır ve parametreleridir. Bunun nasıl çalıştığını daha ayrıntılı bir şekilde görmek için aşağıdaki Güncelleme bileşenine ekleyebilirsiniz.
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, geliştiriciyle ilgili bir ad ve açıklama sürümünü değil.
Örnek Başlık: Eklenen Etkileşimler
Örnek Açıklama: Kartlara eklenen iki etkileşim işleyici
Kaydet'i tıklayın.
Bileşen bağlantısını kopyalamak için MAC'te CMD-L, Windows'da CTRL-L tuşlarına basın. panoya gönderir.
Bileşeni Android Studio'da güncelleyin
Ş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/
simgesini sağ tıklayın ve bağlam menüsünde Kullanıcı Arayüzü Paketini Güncelle'yi tıklayın.Projenizi oluşturmak için
düğmesini tıklayın. Bu, güncellenmiş Kullanıcı Arayüzü Paketini alır ve composable kodun güncellenmiş bir sürümünü oluşturur.
app/java/com/example/hellonews/newscard/NewsCard.kt
adlı veri kaynağına bakın ve etkileşim işleyiciler, NewsCard'a parametre olarak eklenir (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 et
Şimdi etkileşimlerimize bazı işleyiciler ekleyelim.
app/java/com/example/hellonews/ui/home/HomeScreen.kt
içinde şuna ilerleyin:PostListArticleStories
, 175. satır civarı.... @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
için işleyici ekleyin.createOnTapped
şunu açar: başlık ve gövde olarak onun parametrelerini içeren iletişim kutusu.@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ında,
onNewsCardTapped
için işleyici 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)) } } }
Yine
HomeScreen.kt
içinde, satırın etrafındaPostListAudioStories
bölümüne ilerleyin 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(...) ...
Her yayında,
onNewsCardTapped
için işleyici ekleyin. İşitsel varyantın bir menüsü var,createOnTapped
öğesinionMenuTapped
öğesine 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.
Yaşasın! Relay'in gelişmiş özelliklerini öğrendiniz.
Relay ile nasıl çalışabileceğiniz hakkında daha fazla bilgiyi Relay Workflow (Geçiş İş Akışı) bölümünde bulabilirsiniz. bölümüne bakın. Aklınıza takılan bir konu varsa lütfen geri bildirimlerinizi almaktan mutluluk duyarız.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- İçerik parametreleri
- Tasarım varyantlarını kullanma