İçerik parametreleri

Giriş

Çoğu kullanıcı arayüzü tasarımının içeriği sabit değildir. Bunlar, dışı verilerdir. Bu bölümde, tasarımımıza veri eklemek için içerik parametreleri aracılığıyla tasarımcıların bir tasarımın hangi bölümünün verilerle doldurulması gerektiğini belirtmesine olanak sağlar

Figma'da parametre ekleme

Bileşenimize içerik parametreleri ekleyelim.

1. Figma'ya geçin. NewsCardEğitici'de küçük resim katmanını seçin. hero-öğe varyantı (Mac'te ⌘ + tıklama veya Mac'te Ctrl + Windows ve Linux'u tıklayın) resim) ekleyebilirsiniz.

2. Relay for Figma eklentisinde + işaretini tıklayın veimage-content açılır menüyü ve ardından adı "küçük resim" olarak değiştirin.

   

3. Başlık metni katmanını seçin, + işaretini tıklayın ve text-content öğesini seçin. Tekrarla hero öğedeki author ve date metin katmanları için aynı adımları varyantı. Bunları sırasıyla "başlık", "yazar" ve "tarih" olarak adlandırın.

   

4. Eklentideki küçük resim parametresini tıklayın. Unutmayın ki bileşen varyantını seçerseniz küçük resim katmanı bir resimdir ve seçilidir.

   Çünkü üç katman aynı ada ("küçük resim") ve aynı verilere sahiptir. type (image-content) türünde, içerik parametresi tüm üç varyant vardır. Bu, bir parametrenin aynı veriyi birden çok için de geçerlidir. 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.

Bileşeni Android Studio'da güncelleyin

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 Kullanıcı arayüzünü güncelle Paket.

   

2. Projenizi oluşturmak için simgesini tıklayın. Bu, güncellenmiş Kullanıcı Arayüzü Paketi'ni alıp composable'ın girin.

   

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

   // 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 et

Kullanıcı arayüzünde henüz değişiklik yapmadığımız uygulamamıza tekrar göz atalım. Bir liste içeriyor düzenli haberlerin ve sesli haberlerin listesinden oluşur. Bu ikisi NewsCard bileşenimizi aşağıdaki composable'lara eklememiz gerekir:

• PostListArticleStories composable, düzenli olarak yayınlanan haberlerden hikayeler.
• postTop parametresi, en çok okunan haberi temsil eder.
• submit 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 alanına şunu ekleyin: içe aktarma işlemleri, dosyanın üst kısmındaki diğer içe aktarma satırlarının yanına yerleştirilir: com.example.hellonews.newscard.NewsCard içe aktar

   import com.example.hellonews.newscard.View

2. HomeScreen.kt sayfasındayken PostListArticleStories'e gidin.

   @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, Text bileşenini yeni içe aktarılan HeroItem görünümünü kullanarak NewsCard.

   @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, Metin bileşenini yeni içe aktarılan ArticleItem görünümünü kullanarak NewsCard.

   @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. Aynı işlemi en alttaki sesli haberler için de yapabiliriz. Hâlâ devam ediyor HomeScreen.kt, 260. satırdaki PostListAudioStories bölümüne gidin.

   @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 Text bileşenini yeni içe aktarılan NewsCard'a yerleş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 için simgesini tıklayın ve sonucu şurada görüntüleyin: önizleme (bölünmüş ekran görünümü):

   

Sonraki Adım

Daha sonra, uygulamamıza bazı etkileşimler ekleyeceğiz.

Sizin için önerilenler

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

ziyaret edin.