İçerik parametreleri

Giriş

Çoğu kullanıcı arayüzü tasarımının içeriği sabit değildir, verilere bağlı olarak değişir. Bu bölümde, tasarımcıların bir tasarımın hangi bölümünün verilerle doldurulması gerektiğini belirlemesini sağlayan içerik parametreleri aracılığıyla tasarımımıza veri ekliyoruz.

Figma'ya parametre ekleme

Bileşenimize içerik parametreleri ekleyelim.

1. Figma'ya geçin. NewsCardTutorial'da, hero-item varyantındaki küçük resim resim katmanını seçin (Mac'te ⌘ + tıklama veya görüntüde Windows ve Linux'ta Ctrl + tıklama).

2. Relay for Figma eklentisinde + işaretini tıklayıp açılır menüden image-content'yi seçip adı "thumbnail" olarak değiştirin.

   

3. Başlık metin katmanını seçin, + simgesini tıklayın ve text-content seçeneğini belirleyin. Lokomotif öğe varyantında author ve tarih metin katmanları için aynı adımları tekrarlayın. Bunları sırasıyla "headline", "author" ve "date" olarak adlandırın.

   

4. Eklentideki küçük resim parametresini tıklayın. Her bileşen varyantında küçük resim katmanının bir resim olduğuna ve seçildiğine dikkat edin.

   Üç katman aynı ada ("küçük resim") ve aynı veri türüne (resim-içerik) sahip olduğundan, içerik parametresi üç varyantta da ona bağlanmıştır. Diğer bir deyişle, bir parametre aynı verileri birden fazla varyanta verir. Bu durum başlık, yazar ve tarih parametreleri için de geçerlidir.

   

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

   Örnek Açıklama: Karta içerik parametreleri eklendi

4. Kaydet'i tıklayın.

Android Studio'da bileşeni güncelleme

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ıp 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ş Kullanıcı Arayüzü Paketi'ni alır ve composable kodunun güncellenmiş bir sürümünü oluşturur.

   

3. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt özelliğine bakarsanız, eklediğimiz içerik parametrelerinin (thumbnail, headline, author, date) composable'ın parametre listesinde yer aldığını göreceksiniz.

   // View to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list
   *
   * This composable was generated from the UI package 'news_card'.
   * Generated code; don't edit directly.
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem,
       thumbnail: Painter = EmptyPainter(),
       headline: String = "",
       author: String = "",
       date: String = ""
   ) {
   ...
   

Uygulamaya entegre edin

Kullanıcı arayüzünde henüz değişiklik yapmadığımız uygulamamıza tekrar göz atalım. Düzenli haber ve sesli haberlerin bir listesini içerir. NewsCard bileşenimizi eklememiz gereken iki composable şunlardır:

• PostListArticleStories composable, düzenli haber hikayelerinden sorumludur.
• postTop parametresi en çok okunan haberi temsil eder.
• posts parametresi, haberlerin geri kalanını temsil eder.
• PostListAudioStories composable, sesli haber hikayelerini oluşturur.

  

  Şimdi NewsCard bileşenimizi ana ekrana entegre edelim.

1. app/java/com/example/hellonews/ui/home/HomeScreen.kt konumunda, dosyanın üst kısmına yakın olan diğer içe aktarma satırlarının yanına şu içe aktarmaları ekleyin: com.example.hellonews.newscard.NewsCard

   import com.example.hellonews.newscard.View

2. HomeScreen.kt'deyken PostListArticleStories'e (PostListArticleStories) 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(...)
   ...
   

3. postTop için, HeroItem görünümünü kullanarak Text bileşenini yeni içe aktarılan NewsCard ile değiştirin.

   @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,
               view = View.HeroItem
           )
           Spacer(modifier = Modifier.size(12.dp))
           ...
       }
   }
   

4. Her yayın için, ArticleItem görünümünü kullanarak, Metin bileşenini yeni içe aktarılan NewsCard ile değiştirin.

   @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,
                   view = View.ArticleItem
               )
               Spacer(modifier = Modifier.size(12.dp))
           }
       }
   }
   

5. Alt kısımdaki sesli hikayeler için de aynısını yapabiliriz. Hâlâ HomeScreen.kt alanında, 260. satır civarındaki PostListAudioStories'e 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(...)
   ...
   

6. Her yayın için AudioItem görünümünü kullanarak Text bileşenini yeni içe aktarılan NewsCard ile değiştirin.

   @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,
                   view = View.AudioItem
               )
               Spacer(modifier = Modifier.size(12.dp))
           }
       }
   }
   

7. Projenizi tekrar derlemek ve sonucu önizlemede görmek için simgesini tıklayın (bölünmüş ekran görünümü):

   

Sonraki Adım

Sırada, uygulamamıza bazı etkileşimler ekleyeceğiz.

Sizin için önerilenler

• Not: Bağlantı metni JavaScript kapalıyken görüntülenir
• Tasarımlara etkileşim işleyicileri ekleme
• Tasarım varyantlarını kullanma
• Android Studio'da tasarımları koda dönüştürme