Menambahkan pengendali interaksi ke desain

Di bagian ini, kita akan mempelajari cara menambahkan interaksi ke desain melalui pengendali interaksi.

NewsApp dengan interaksi ketuk

Pengendali interaksi memberikan cara untuk menentukan tempat komponen dapat berinteraksi (diketuk, diketuk dua kali, dll.). Pengendali interaksi dapat ditambahkan ke lapisan mana pun di dalam desain.

Menambahkan pengendali

Pengendali interaksi dapat ditambahkan ke lapisan mana pun. Ini memungkinkan desainer menentukan bagian komponen mana yang interaktif.

  1. Pilih varian hero-item (bingkai), klik + di samping Parameter dan pilih tap-handler untuk menambahkan pengendali interaksi. Hal ini memungkinkan developer menulis kode yang bereaksi terhadap pengguna yang mengetuk kartu.

    Plugin Figma dengan varian hero-item yang dipilih

  2. Ulangi langkah sebelumnya dengan lapisan ikon menu di varian audio-item. Hal ini memungkinkan developer menampilkan menu saat pengguna mengetuk ikon menu.

    Plugin Figma dengan varian ikon menu yang dipilih

  3. Jika Anda memilih pengendali on Menu tapped, Anda akan melihat bahwa pengendali hanya diterapkan untuk varian audio-item, karena varian lainnya tidak memiliki ikon menu. Namun, on NewsCard tapped diterapkan untuk ketiga varian. Artinya, Anda dapat menyediakan satu pengendali (dalam kode) untuk dijalankan saat salah satu dari tiga varian diketuk, sehingga menghapus duplikasi kode dan parameter. Kita akan melihat cara kerjanya secara lebih mendetail di bagian Mengupdate komponen di Android Studio di bawah.

    Plugin Figma dengan pengendali ketuk dipilih

Menyimpan versi yang diberi nama

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

  1. Tambahkan versi baru file Figma Anda yang diberi nama. Buka File > Save to Version History, lalu masukkan judul dan deskripsi versi baru Anda (judul dan deskripsi apa pun dapat digunakan di sini).

    Contoh Judul: “Menambahkan Interaksi”

    Contoh Deskripsi: “Dua pengendali interaksi ditambahkan ke kartu”

    Opsi simpan ke histori versi di menu

Mengupdate komponen di Android Studio

Sekarang mari perbarui komponen NewsCard:

  1. Di Android Studio, pastikan jendela alat Project berada dalam tampilan Android. Kemudian, klik kanan app/ui-packages/news_card/, dan di dekat bagian bawah menu konteks, 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 diupdate dan menghasilkan versi kode composable yang telah diupdate.

    Tombol Build di toolbar

  3. Jika Anda melihat app/java/com/example/hellonews/newscard/NewsCard.kt, Anda akan melihat bahwa pengendali interaksi ditambahkan sebagai parameter ke NewsCard (onNewsCardTapped, onMenuTapped).

    // Design to select for NewsCard
enum class View {
    HeroItem, ArticleItem, AudioItem
}

/**
* Displays a summary of a news article.
*
* This composable was generated from the UI package 'news_card'.
* Generated code; do not edit directly
*/
@Composable
fun NewsCard(
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {},
    modifier: Modifier = Modifier,
    view: View = View.HeroItem
) {
...

Mengintegrasikan ke dalam aplikasi

Sekarang, mari tambahkan beberapa pengendali ke interaksi.

  1. Di app/java/com/example/hellonews/ui/home/HomeScreen.kt, scroll ke bawah ke PostListArticleStories, sekitar baris 175.

    ...
@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(...)
...

  2. Untuk postTop, tambahkan pengendali untuk onNewsCardTapped dan onMenuTapped. createOnTapped membuka dialog dengan parameter sebagai judul dan isi.

    @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,
            onNewsCardTapped = createOnTapped("Card Tapped", postTop.title),
            onMenuTapped = {},
            view = View.HeroItem
        )
        Spacer(modifier = Modifier.size(12.dp))
        ...
    }
}

  3. Untuk setiap postingan, tambahkan pengendali untuk onNewsCardTapped dan onMenuTapped.

    @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,
                onNewsCardTapped = createOnTapped("Card Tapped", post.title),
                onMenuTapped = {},
                view = View.ArticleItem
            )
            Spacer(modifier = Modifier.size(12.dp))
        }
    }
}

  4. 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(...)
...

  5. Untuk setiap postingan, tambahkan pengendali untuk onNewsCardTapped dan onMenuTapped. Karena varian Audio memiliki menu, kita juga menetapkan createOnTapped ke onMenuTapped.

    @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,
                onNewsCardTapped = createOnTapped("Card Tapped", post.title),
                onMenuTapped = createOnTapped("Menu Tapped", post.title),
                view = View.AudioItem
            )
            Spacer(modifier = Modifier.size(12.dp))
        }
    }
}

  6. Klik ▶ untuk mem-build aplikasi dan menjalankannya di emulator.

    Tombol Run di toolbar
    Cara kerja aplikasi News dalam pratinjau

    Hore! Anda telah mempelajari fitur lanjutan Relay.

Anda dapat mempelajari lebih lanjut cara menggunakan Relay di bagian Alur kerja Relay. Kami juga ingin mendengar pendapat Anda jika Anda memiliki masukan.