Parameter konten

Pengantar

Konten dari sebagian besar desain UI tidak bersifat statis. yang artinya konten dapat berubah bergantung pada data. Di bagian ini, kami menambahkan data ke desain melalui parameter konten sehingga desainer dapat menentukan bagian desain mana yang harus diisi dengan data

Menambahkan parameter di Figma

Mari tambahkan parameter konten ke komponen.

1. Beralih ke Figma. Di NewsCardTutorial, pilih lapisan gambar thumbnail di varian item hero (⌘ + klik di Mac, atau Ctrl + klik di Windows dan Linux di gambar).

2. Di plugin Relay for Figma, klik + dan pilih image-content di menu drop-down, lalu ubah namanya menjadi "thumbnail".

   

3. Pilih lapisan teks judul, klik +, lalu pilih text-content. Ulangi langkah-langkah yang sama untuk lapisan teks penulis, dan tanggal dalam varian item hero. Beri nama di “judul”, “penulis”, dan “tanggal”.

   

4. Klik parameter thumbnail di plugin. Perhatikan bahwa di setiap varian komponen, lapisan thumbnail adalah gambar dan dipilih.

   Ketiga lapisan memiliki nama yang sama (“thumbnail”) dan merupakan jenis data yang sama (konten gambar) sehingga parameter konten telah terhubung ke ketiga lapisan tersebut dalam tiga varian. Artinya, satu parameter memberikan data yang sama ke beberapa varian. Hal ini juga berlaku untuk parameter judul, penulis, dan tanggal.

   

Menyimpan versi yang diberi nama

Sekarang, mari kita tandai versi ini sebagai siap diimpor ke dalam kode.

1. Buka plugin Figma Relay, jika belum terbuka.

2. Klik Bagikan kepada developer.

3. Di layar Bagikan kepada developer, masukkan nama dan deskripsi untuk versi.

   Contoh Judul: Parameter yang Ditambahkan

   Contoh Deskripsi: Menambahkan parameter konten ke kartu

4. Klik Simpan.

Mengupdate komponen di Android Studio

Mari perbarui komponen NewsCard:

1. Di Android Studio, pastikan jendela alat Project berada dalam tampilan Android. Kemudian, klik kanan app/ui-packages/news_card/, lalu klik Update UI Package.

   

2. Klik untuk membuat project Anda. Tindakan ini akan mengambil Paket UI yang telah diupdate dan membuat versi kode composable yang telah diupdate.

   

3. Jika melihat app/java (generated)/com/example/hellonews/newscard/NewsCard.kt, Anda akan melihat bahwa parameter konten yang telah ditambahkan (thumbnail, headline, author, date) akan muncul di daftar parameter composable.

   // 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 = ""
   ) {
   ...
   

Mengintegrasikan ke dalam aplikasi

Mari lihat kembali aplikasi kita yang belum diubah UI-nya. Kartu ini berisi daftar artikel berita reguler dan daftar cerita audio. Berikut adalah dua composable yang kita perlukan untuk menambahkan komponen NewsCard:

• Composable PostListArticleStories bertanggung jawab atas artikel berita reguler.
• Parameter postTop mewakili artikel utama.
• Parameter posts mewakili seluruh artikel.
• Composable PostListAudioStories merender artikel berita audio.

  

  Sekarang mari integrasikan komponen NewsCard ke layar utama.

1. Di app/java/com/example/hellonews/ui/home/HomeScreen.kt, tambahkan impor berikut di samping baris impor lainnya yang berada di dekat bagian atas file: impor com.example.hellonews.newscard.NewsCard

   import com.example.hellonews.newscard.View

2. Masih di HomeScreen.kt, scroll ke bawah ke PostListArticleStories.

   @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. Untuk postTop, ganti komponen Text dengan NewsCard yang baru diimpor, menggunakan tampilan HeroItem.

   @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. Untuk setiap post, ganti komponen Text dengan NewsCard yang baru diimpor, menggunakan tampilan ArticleItem.

   @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. Langkah yang sama bisa diterapkan untuk artikel audio di bagian bawah. Masih di HomeScreen.kt, scroll ke bawah ke PostListAudioStories, di sekitar baris 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(...)
   ...
   

6. Untuk setiap post, ganti komponen Text dengan NewsCard yang baru diimpor, menggunakan tampilan AudioItem.

   @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. Klik untuk mem-build project Anda lagi dan melihat hasilnya dalam pratinjau (tampilan layar terpisah):

   

Langkah Berikutnya

Selanjutnya, kita akan menambahkan beberapa interaksi ke aplikasi.

Direkomendasikan untuk Anda

• Catatan: teks link ditampilkan saat JavaScript nonaktif
• Menambahkan pengendali interaksi ke desain
• Menangani varian desain
• Mengonversi desain menjadi kode di Android Studio