Tasarımlara etkileşim işleyicileri ekleme

Bu bölümde, aşağıdaki öğeler aracılığıyla tasarımımıza etkileşimler eklemeyi öğreneceğiz: otomatik olarak oluşturulur.

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.

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

   

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

   

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

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, 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

4. Kaydet'i tıklayın.

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

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

   

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

   

   Not: Bu, HomeScreen.kt alanını kullanılmadığı için yeni parametrelerin gösterilmesini sağlayabilirsiniz. Bu, beklenen bir durumdur.

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

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

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

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

4. Yine HomeScreen.kt içinde, satırın etrafında PostListAudioStories 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(...)
   ...
   

5. Her yayında, onNewsCardTapped için işleyici ekleyin. İşitsel varyantın bir menüsü var, createOnTapped öğesini onMenuTapped öğ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))
         }
     }
   }
   

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