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

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

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

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

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

1. เปลี่ยนไปใช้ Figma ใน NewsCardTutorial ให้เลือกเลเยอร์ภาพปกใน รูปแบบรายการหลัก (⌘ + คลิก Mac หรือ Ctrl + คลิก Windows และ Linux บน รูปภาพ)

2. ในปลั๊กอิน Relay for Figma ให้คลิก + และเลือก image-content ใน เมนูแบบเลื่อนลง แล้วเปลี่ยนชื่อเป็น "ภาพขนาดย่อ"

   

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

   

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

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

   

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

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

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

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

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

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

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

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

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

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

1. ใน Android Studio ให้ตรวจสอบว่าหน้าต่างเครื่องมือโปรเจ็กต์อยู่ในมุมมอง Android จากนั้นคลิกขวา app/ui-packages/news_card/ แล้วคลิก อัปเดต 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 จะแสดงเรื่องราวข่าวที่เป็นเสียง

  วันที่

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

   

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

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