เพิ่มเครื่องจัดการการโต้ตอบในการออกแบบ

ในส่วนนี้ เราจะได้เรียนรู้วิธีเพิ่มการโต้ตอบกับการออกแบบของเราผ่าน เครื่องจัดการการโต้ตอบ

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

เพิ่มตัวจัดการ

คุณเพิ่มเครื่องจัดการการโต้ตอบลงในเลเยอร์ใดก็ได้ ซึ่งนักออกแบบสามารถระบุ ว่าส่วนใดของคอมโพเนนต์เป็นแบบอินเทอร์แอกทีฟ

1. เลือกผลิตภัณฑ์ย่อยของรายการหลัก (เฟรม) แล้วคลิก + ข้าง พารามิเตอร์ และเลือก tap-handler เพื่อเพิ่มเครื่องจัดการการโต้ตอบ ช่วงเวลานี้ ช่วยให้นักพัฒนาซอฟต์แวร์เขียนโค้ดโต้ตอบเมื่อผู้ใช้แตะการ์ด

   

2. ทำซ้ำขั้นตอนก่อนหน้าด้วยเลเยอร์ไอคอนเมนูใน audio-item รายละเอียดปลีกย่อย การดำเนินการนี้ช่วยให้นักพัฒนาแอปแสดงเมนูเมื่อผู้ใช้แตะเมนู ไอคอน

   

3. หากเลือกเครื่องจัดการที่แตะเมนู คุณจะสังเกตเห็นว่ามีเพียง ใช้กับผลิตภัณฑ์ย่อยของ audio-item เนื่องจากตัวแปรอื่นๆ ไม่มี ไอคอนเมนู อย่างไรก็ตาม ใน NewsCard ที่แตะจะมีผลกับทั้ง 3 ประเภท รายละเอียดปลีกย่อย ซึ่งหมายความว่าคุณสามารถกำหนดตัวแฮนเดิล 1 ตัว (เป็นโค้ด) ให้ทำงานเมื่อ แตะตัวแปรใดก็ตามจาก 3 ตัวแปร นำโค้ดที่ซ้ำกันออก พารามิเตอร์ เราจะเห็นการทำงานอย่างละเอียดยิ่งขึ้นในการอัปเดตต่อไปนี้ ในส่วน Android Studio

   

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

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

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

2. คลิก แชร์กับนักพัฒนาซอฟต์แวร์ ที่มุมขวาล่างของกล่องโต้ตอบ

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

   ตัวอย่างชื่อ: การโต้ตอบที่เพิ่ม

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

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

5. กด CMD-L บน MAC และกด Ctrl-L บน Windows เพื่อคัดลอกลิงก์คอมโพเนนต์ ไปยังคลิปบอร์ด

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

เรามาอัปเดตคอมโพเนนต์ NewsCard กันดีกว่า

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

   

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

   วันที่

   หมายเหตุ: วิธีนี้ส่งผลให้เกิดคำเตือนการสร้างใน HomeScreen.kt เนื่องจากไม่ได้ใช้ พารามิเตอร์ใหม่ใน NewsCard ซึ่งเป็นเรื่องปกติ

3. ดู app/java/com/example/hellonews/newscard/NewsCard.kt แล้วดูว่า เครื่องจัดการการโต้ตอบจะเพิ่มเป็นพารามิเตอร์ใน 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(
     modifier: Modifier = Modifier,
     view: View = View.HeroItem,
     thumbnail: Painter = EmptyPainter(),
     headline: String = "",
     author: String = "",
     date: String = "",
     onNewsCardTapped: () -> Unit = {},
     onMenuTapped: () -> Unit = {}
   ) {
   ...
   

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

คราวนี้ลองเพิ่มตัวจัดการลงในการโต้ตอบของเรา

1. ใน app/java/com/example/hellonews/ui/home/HomeScreen.kt ให้เลื่อนลงไปที่ PostListArticleStories ประมาณบรรทัดที่ 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. สำหรับ postTop ให้เพิ่มเครื่องจัดการสำหรับ onNewsCardTapped createOnTapped เปิด กล่องโต้ตอบที่มีพารามิเตอร์เป็นชื่อและเนื้อหา

   @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),
             view = View.HeroItem
         )
         Spacer(modifier = Modifier.size(12.dp))
         ...
     }
   }
   

3. เพิ่มเครื่องจัดการสำหรับ onNewsCardTapped ในแต่ละโพสต์

   @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),
                 view = View.ArticleItem
             )
             Spacer(modifier = Modifier.size(12.dp))
         }
     }
   }
   

4. ยังอยู่ใน 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(...)
   ...
   

5. เพิ่มเครื่องจัดการสำหรับ onNewsCardTapped ในแต่ละโพสต์ ตั้งแต่รูปแบบเสียง มีเมนู มอบหมาย createOnTapped ให้ 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. คลิก ▶ เพื่อสร้างแอปและเรียกใช้ในโปรแกรมจำลอง

   

   

   ไชโย! คุณได้เรียนรู้เกี่ยวกับฟีเจอร์ขั้นสูงของ Relay แล้ว

คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีทำงานกับ Relay ได้ในขั้นตอนการทำงานของ Relay นอกจากนี้ เรายังอยากทราบความคิดเห็นของคุณหากคุณมี ความคิดเห็นจากคุณ