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

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

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

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

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

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

  1. เปลี่ยนไปใช้ Figma ใน NewsCardTutorial ให้เลือกเลเยอร์ภาพปกใน รูปแบบรายการหลัก (⌘ + คลิก Mac หรือ Ctrl + คลิก Windows และ Linux บน รูปภาพ)
  2. ในปลั๊กอิน Relay for Figma ให้คลิก + และเลือก image-content ใน เมนูแบบเลื่อนลง แล้วเปลี่ยนชื่อเป็น "ภาพขนาดย่อ"

    ปลั๊กอิน Figma ที่เพิ่มพารามิเตอร์ "ภาพขนาดย่อ"
  3. เลือกเลเยอร์ข้อความบรรทัดแรก คลิก + แล้วเลือก text-content เกิดซ้ำ ขั้นตอนเดียวกันสำหรับเลเยอร์ข้อความ author และ date ในรายการหลัก รายละเอียดปลีกย่อย โดยตั้งชื่อว่า "headline" "author" และ "date" ตามลำดับ

    ปลั๊กอิน Figma ที่เพิ่มพารามิเตอร์ "headline" "author" และ "date"
  4. คลิกพารามิเตอร์ภาพขนาดย่อในปลั๊กอิน โปรดสังเกตว่าในทุกๆ ตัวแปรคอมโพเนนต์ เลเยอร์ภาพขนาดย่อเป็นรูปภาพและถูกเลือก

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

    ปลั๊กอิน Figma ที่เลือกเลเยอร์ภาพขนาดย่อทั้ง 3 เลเยอร์

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

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

  1. เปิดปลั๊กอิน Figma Relay หากยังไม่ได้เปิด

  2. คลิกแชร์กับนักพัฒนาซอฟต์แวร์

  3. ในหน้าจอแชร์กับนักพัฒนาซอฟต์แวร์ ให้ป้อนชื่อและคำอธิบายเวอร์ชัน

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

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

  4. คลิกบันทึก

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

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

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

    อัปเดตตัวเลือกแพ็กเกจ UI ในเมนูตามบริบท
  2. คลิก ปุ่มสร้างโครงการ เพื่อสร้างโปรเจ็กต์ การดำเนินการนี้จะ นำแพ็กเกจ UI ที่อัปเดตแล้วและสร้าง Composable เวอร์ชันอัปเดต โค้ด

    ปุ่มสร้างในแถบเครื่องมือ
  3. ถ้าดูที่ 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 จะแสดงเรื่องราวข่าวที่เป็นเสียง
    วันที่ UI ของแอปที่มี 3 ส่วน
    ตอนนี้เราจะมาผสานรวมคอมโพเนนต์ NewsCard ลงในหน้าจอหลักกัน
  1. ใน app/java/com/example/hellonews/ui/home/HomeScreen.kt ให้เพิ่มรายการต่อไปนี้ นำเข้าถัดจากบรรทัดการนำเข้าอื่นๆ ใกล้ด้านบนสุดของไฟล์: นำเข้า com.example.hellonews.newscard.NewsCard

    import com.example.hellonews.newscard.View

  2. ยังคงอยู่ใน 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(...)
    ...
  3. สำหรับ 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))
           
    ...
       
    }
    }
  4. สำหรับโพสต์แต่ละรายการ ให้แทนที่คอมโพเนนต์ข้อความด้วยที่นำเข้าใหม่ 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))
           
    }
       
    }
    }
  5. ซึ่งเราทำแบบเดียวกันนี้กับเรื่องราวเสียงได้ที่ด้านล่าง ยังเปิดอยู่ 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(...)
    ...
  6. สำหรับแต่ละโพสต์ ให้แทนที่คอมโพเนนต์ 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))
           
    }
       
    }
    }
  7. คลิกที่ ปุ่มสร้างโครงการ เพื่อสร้างโปรเจ็กต์อีกครั้งและดูผลลัพธ์ใน ตัวอย่าง (มุมมองหน้าจอแบบแยก)

    ตัวอย่างของแอป News

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

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

ไม่มีคำแนะนำในขณะนี้

ลองบัญชี Google