Tasarımlara etkileşim işleyicileri ekleme

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.

1. 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.

   

2. Ö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.

   

3. 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.

1. Açık değilse Figma Relay eklentisini açın.

2. İletişim kutusunun sağ alt köşesindeki Geliştiriciyle paylaş 'ı tıklayın.

3. 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

4. Kaydet'i tıklayın.

5. 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:

1. 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.

   

2. 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.

   

3. 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.

1. app/java/com/example/hellonews/ui/home/HomeScreen.kt içinde 175. satırın yakınlarındaki PostListArticleStories 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(...)
   ...
   

2. postTop için onNewsCardTapped 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))
         ...
     }
   }
   

3. 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))
         }
     }
   }
   

4. Hâlâ HomeScreen.kt konumundayken 260. satır civarında PostListAudioStories 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(...)
   ...
   

5. Her yayın için onNewsCardTapped işleyicileri ekleyin. Ses varyantının menüsü olduğu için createOnTapped öğesini onMenuTapped 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))
         }
     }
   }
   

6. 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