Pengantar
![Memperbarui NewsCard dengan menghadirkan lebih banyak parameter](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png?authuser=19&hl=id)
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.
- 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).
Di plugin Relay for Figma, klik + dan pilih
image-content
di menu drop-down, lalu ubah namanya menjadi "thumbnail".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”.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.
Buka plugin Figma Relay, jika belum terbuka.
Klik Bagikan kepada developer.
Di layar Bagikan kepada developer, masukkan nama dan deskripsi untuk versi tersebut.
Contoh Judul: Parameter yang Ditambahkan
Contoh Deskripsi: Menambahkan parameter konten ke kartu
Klik Simpan.
Mengupdate komponen di Android Studio
Mari perbarui komponen NewsCard:
Di Android Studio, pastikan jendela alat Project berada dalam tampilan Android. Kemudian, klik kanan
app/ui-packages/news_card/
, lalu klik Update UI Package.Klik
untuk membuat project Anda. Tindakan ini akan mengambil Paket UI yang telah diupdate dan membuat versi kode composable yang telah diupdate.
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.
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: imporcom.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
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(...) ...
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)) ... } }
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)) } } }
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(...) ...
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)) } } }
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