หน้านี้ได้รับการแปลโดย Cloud Translation API

พารามิเตอร์เนื้อหา

ข้อมูลเบื้องต้น

การอัปเดต NewsCard ด้วยพารามิเตอร์เพิ่มเติม

เนื้อหาของการออกแบบ UI ส่วนใหญ่จะไม่คงที่ แต่จะมีการเปลี่ยนแปลงตาม ในส่วนนี้ เราจะเพิ่มข้อมูลในงานออกแบบของเราผ่านทางพารามิเตอร์เนื้อหา ให้นักออกแบบระบุได้ว่าควรเติมข้อมูลส่วนใดของการออกแบบ

เพิ่มพารามิเตอร์ใน Figma

มาเพิ่มพารามิเตอร์เนื้อหาลงในคอมโพเนนต์กัน

เปลี่ยนไปใช้ Figma ใน NewsCardTutorial ให้เลือกเลเยอร์ภาพปกใน รูปแบบรายการหลัก (⌘ + คลิก Mac หรือ Ctrl + คลิก Windows และ Linux บน รูปภาพ)
ในปลั๊กอิน Relay for Figma ให้คลิก + และเลือก image-content ใน เมนูแบบเลื่อนลง แล้วเปลี่ยนชื่อเป็น "ภาพขนาดย่อ"
เลือกเลเยอร์ข้อความบรรทัดแรก คลิก + แล้วเลือก text-content เกิดซ้ำ ขั้นตอนเดียวกันสำหรับเลเยอร์ข้อความ author และ date ในรายการหลัก รายละเอียดปลีกย่อย โดยตั้งชื่อว่า "headline" "author" และ "date" ตามลำดับ
คลิกพารามิเตอร์ภาพขนาดย่อในปลั๊กอิน โปรดสังเกตว่าในทุกๆ ตัวแปรคอมโพเนนต์ เลเยอร์ภาพขนาดย่อเป็นรูปภาพและถูกเลือก

เนื่องจากเลเยอร์ทั้ง 3 เลเยอร์มีชื่อเหมือนกัน ("ภาพขนาดย่อ") และเป็นข้อมูลเดียวกัน type (image-content) จะมีการเชื่อมโยงพารามิเตอร์เนื้อหากับพารามิเตอร์ดังกล่าวในทุกด้าน 3 ตัวแปร ซึ่งหมายความว่าพารามิเตอร์หนึ่งจะให้ข้อมูลเดียวกันแก่หลายๆ รายละเอียดปลีกย่อย เช่นเดียวกันกับพารามิเตอร์พาดหัว ผู้เขียน และวันที่

บันทึกเวอร์ชันที่มีชื่อ

เรามาทำเครื่องหมายเวอร์ชันนี้ว่าพร้อมนำเข้าไปยังโค้ดกัน

เปิดปลั๊กอิน Figma Relay หากยังไม่ได้เปิด
คลิกแชร์กับนักพัฒนาซอฟต์แวร์
ในหน้าจอแชร์กับนักพัฒนาซอฟต์แวร์ ให้ป้อนชื่อและคำอธิบายเวอร์ชัน

ตัวอย่างชื่อ: พารามิเตอร์ที่เพิ่ม

ตัวอย่างคำอธิบาย: เพิ่มพารามิเตอร์เนื้อหาลงในการ์ด
คลิกบันทึก

อัปเดตคอมโพเนนต์ใน Android Studio

มาอัปเดตคอมโพเนนต์ NewsCard กัน

ใน Android Studio ให้ตรวจสอบว่าหน้าต่างเครื่องมือโปรเจ็กต์อยู่ในมุมมอง Android จากนั้นคลิกขวา app/ui-packages/news_card/ แล้วคลิก อัปเดต UI แพ็กเกจ
คลิก เพื่อสร้างโปรเจ็กต์ การดำเนินการนี้จะ นำแพ็กเกจ UI ที่อัปเดตแล้วและสร้าง Composable เวอร์ชันอัปเดต โค้ด

ถ้าดูที่ app/java (generated)/com/example/hellonews/newscard/NewsCard.kt คุณจะเห็นว่า พารามิเตอร์เนื้อหาที่เราเพิ่ม (thumbnail, headline, author, date) จะปรากฏในรายการพารามิเตอร์ของ 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 = ""
) {
...

ผสานรวมในแอป

มาย้อนดูแอปที่เรายังไม่ได้แก้ไข UI กัน โดยจะมีรายการ ทั้งข่าวทั่วไปและรายการเรื่องราวเสียง นี่คือ 2 สิ่งนี้ Composable ที่เราจะต้องเพิ่มคอมโพเนนต์ NewsCard ไปยัง

PostListArticleStories ที่ Composable รับผิดชอบเกี่ยวกับข่าวปกติ เรื่องราว
พารามิเตอร์ postTop แสดงเรื่องราวยอดนิยม
พารามิเตอร์ posts จะแสดงเรื่องราวที่เหลือ
PostListAudioStories จะแสดงเรื่องราวข่าวที่เป็นเสียง
วันที่
ตอนนี้เราจะมาผสานรวมคอมโพเนนต์ NewsCard ลงในหน้าจอหลักกัน

ใน app/java/com/example/hellonews/ui/home/HomeScreen.kt ให้เพิ่มรายการต่อไปนี้ นำเข้าถัดจากบรรทัดการนำเข้าอื่นๆ ใกล้ด้านบนสุดของไฟล์: นำเข้า com.example.hellonews.newscard.NewsCard

import com.example.hellonews.newscard.View

ยังคงอยู่ใน HomeScreen.kt ให้เลื่อนลงไปที่ 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(...)
...

สำหรับ postTop ให้แทนที่คอมโพเนนต์ Text ด้วยที่นำเข้าใหม่ NewsCard โดยใช้มุมมอง 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))
        ...
    }
}

สำหรับโพสต์แต่ละรายการ ให้แทนที่คอมโพเนนต์ข้อความด้วยที่นำเข้าใหม่ NewsCard โดยใช้มุมมอง 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))
        }
    }
}

ซึ่งเราทำแบบเดียวกันนี้กับเรื่องราวเสียงได้ที่ด้านล่าง ยังเปิดอยู่ HomeScreen.kt เลื่อนลงไปที่ PostListAudioStories ประมาณบรรทัดที่ 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(...)
...

สำหรับแต่ละโพสต์ ให้แทนที่คอมโพเนนต์ Text ด้วยที่นำเข้าใหม่ของเรา NewsCard โดยใช้มุมมอง 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))
        }
    }
}

คลิกที่ เพื่อสร้างโปรเจ็กต์อีกครั้งและดูผลลัพธ์ใน ตัวอย่าง (มุมมองหน้าจอแบบแยก)

ขั้นตอนถัดไป

ต่อไป เราจะเพิ่มการโต้ตอบลงในแอป

แนะนำสำหรับคุณ

หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
เพิ่มเครื่องจัดการการโต้ตอบในการออกแบบ
การจัดการตัวแปรด้านการออกแบบ
แปลงการออกแบบเป็นโค้ดใน Android Studio