Parameter konten

Pengantar

Memperbarui NewsCard dengan menghadirkan lebih banyak parameter

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

    Plugin Figma dengan parameter “thumbnail” telah ditambahkan

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

    Plugin Figma dengan parameter “judul”, “penulis”, dan “tanggal” telah ditambahkan

  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.

    Plugin Figma dengan ketiga lapisan thumbnail telah dipilih

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.

    Opsi Update UI Package di menu konteks

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

    Tombol build di toolbar

  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.
    UI aplikasi yang berisi tiga bagian
    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 Tombol Buat Project untuk mem-build project Anda lagi dan melihat hasilnya dalam pratinjau (tampilan layar terpisah):

    Pratinjau NewsApp

Langkah Berikutnya

Selanjutnya, kita akan menambahkan beberapa interaksi ke aplikasi.