สิ่งที่รวมอยู่ใน Jetpack Compose Glimmer

Jetpack Compose Glimmer สร้างขึ้นจาก Jetpack Compose และมี ฟังก์ชันที่ประกอบกันได้ คอมโพเนนต์ ลักษณะการทำงาน และธีมที่ ออกแบบมาสำหรับแว่นตา AI ที่มีจอแสดงผล Glimmer ช่วยให้คุณสร้าง UI แบบเนทีฟสำหรับแว่นตาแสดงผลโดยใช้ Compose ซึ่งจะทำให้ประสบการณ์การใช้งานแอปของคุณสมบูรณ์ยิ่งขึ้นด้วยโค้ดที่น้อยลง เครื่องมือที่มีประสิทธิภาพ และ Kotlin API ที่ใช้งานง่าย

ฟังก์ชันที่ประกอบกันได้ของ Jetpack Compose Glimmer

Jetpack Compose Glimmer มี @Composable ที่ปรับแต่งมาสำหรับจอแสดงผลของแว่นตา AI เช่น Text, Button และ ListItem ลักษณะเฉพาะบางอย่างของฟังก์ชันที่ประกอบกันได้ของ Jetpack Compose Glimmer มีดังนี้

• การจัดรูปแบบที่ง่ายขึ้น: คอมโพเนนต์ Surface เช่น มีพื้นหลังเป็น สีดำหรือโปร่งใสโดยค่าเริ่มต้นเพื่อการเพิ่มประสิทธิภาพการแสดงผลแบบออปติคัล
• ค่าเริ่มต้นของสีที่เพิ่มประสิทธิภาพ: Jetpack Compose Glimmer จะคำนวณสีของเนื้อหา ตามสีพื้นหลังโดยค่าเริ่มต้น ดังนั้นนักพัฒนาแอปจึงไม่จำเป็นต้อง ตั้งค่าสีข้อความด้วยตนเอง ซึ่งจะช่วยเพิ่มความชัดเจนโดยไม่ต้องดำเนินการเพิ่มเติม

• โฟกัสที่แตกต่าง: ระบบจะระบุโฟกัสโดยใช้การแสดงผลแบบภาพตามเส้นขอบ แทนเอฟเฟกต์ระลอก ซึ่งจะช่วยให้มองเห็นได้ชัดเจน

  

• ระดับความสูงที่เพิ่มประสิทธิภาพ: Jetpack Compose Glimmer ใช้เงาของกล่องแบบจำกัด เพื่อแยกภาพ

  

คอมโพเนนต์ของ Jetpack Compose Glimmer

Jetpack Compose Glimmer มีชุดคอมโพเนนต์ที่ออกแบบเอง, ซึ่งคล้ายกับคอมโพเนนต์ใน Jetpack Compose แต่ได้รับการเพิ่มประสิทธิภาพมาโดยเฉพาะสำหรับความต้องการด้านภาพและการโต้ตอบที่ไม่เหมือนใครของแว่นตาที่มีจอแสดงผล คุณสามารถปรับแต่งคอมโพเนนต์ของ Jetpack Compose Glimmer ด้วย ธีม ของ Jetpack Compose Glimmer และสร้างขึ้นจากฟีเจอร์ Compose ระดับล่างเพื่อรองรับวิธีการป้อนข้อมูลของผู้ใช้ เช่น การแตะและการปัดโดยค่าเริ่มต้น

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้คอมโพเนนต์ที่เฉพาะเจาะจงได้จากคำแนะนำต่อไปนี้

• ปุ่ม
• การ์ด
• เพจเจอร์แนวนอน
• ไอคอน
• ปุ่มไอคอน
• รายการ
• รายการ
• แพลตฟอร์ม
• ข้อความ
• ปุ่มเปิด/ปิด
• ชิปชื่อ
• สแต็กแนวตั้ง
• สัญญาณบอกสถานะการป้อนข้อมูลด้วยเสียง

หากคอมโพเนนต์ระดับสูงเหล่านี้รายการใดรายการหนึ่งไม่เหมาะกับกรณีการใช้งานของคุณ คุณสามารถ ใช้ surface เพื่อสร้างคอมโพเนนต์ที่กำหนดเองได้ แพลตฟอร์มเป็นองค์ประกอบที่ใช้สร้างสรรค์พื้นฐานที่สุดใน Jetpack Compose Glimmer ซึ่งก็คือผืนผ้าใบเปล่าสำหรับการออกแบบหรือการโต้ตอบที่กำหนดเองและเฉพาะเจาะจงที่คุณต้องการสร้าง

ตัวปรับแต่งของ Jetpack Compose Glimmer

ตัวปรับแต่งใน Jetpack Compose Glimmer ทำงานเหมือนกับ ตัวปรับแต่ง Compose ซึ่งช่วยให้คุณเพิ่มฟังก์ชันให้กับฟังก์ชันที่ประกอบกันได้โดยการปรับแต่งเลย์เอาต์ ลักษณะที่ปรากฏ และลักษณะการทำงาน Jetpack Compose Glimmer มีตัวปรับแต่งและค่าเริ่มต้นที่ไม่ซ้ำกันสำหรับการแสดงผลแบบภาพและประสิทธิภาพที่เฉพาะเจาะจงสำหรับแว่นตา

ธีมของ Jetpack Compose Glimmer

Jetpack Compose Glimmer มีระบบการกำหนดธีมเฉพาะสำหรับแว่นตาที่มีจอแสดงผล ธีมของ Jetpack Compose Glimmer ใช้ชุดสี ตัวอักษร และรูปทรงที่เรียบง่ายและเพิ่มประสิทธิภาพ ซึ่งจะช่วยให้แว่นตาแสดงผลมีความชัดเจนและกระชับที่สุด คอมโพเนนต์ทั้งหมดของ Jetpack Compose Glimmer ได้รับการออกแบบมาให้ผสานรวมกับวิธีการป้อนข้อมูลที่เฉพาะเจาะจงสำหรับแว่นตาโดยอัตโนมัติ ธีมของ Jetpack Compose Glimmer จะแสดงโดยใช้คลาส GlimmerTheme

เช่นเดียวกับ ธีมอื่นๆ ใน Jetpack Compose, GlimmerTheme มีระบบย่อยหลายระบบ ซึ่งสรุปไว้สั้นๆ ในส่วนต่อไปนี้พร้อมกับแอตทริบิวต์ ที่ปรับแต่งได้

• สี
• การพิมพ์
• ค่าระยะห่างของคอมโพเนนต์
• รูปทรง
• ระดับเอฟเฟกต์ความลึก
• ขนาดไอคอน

สี

ระบบสีของ Jetpack Compose Glimmer ออกแบบมาสำหรับจอแสดงผลแบบเสริม และสภาพแวดล้อมจริง ซึ่งแตกต่างจากธีม Android มาตรฐาน GlimmerTheme Colors ให้ความสำคัญกับพื้นหลังสีเข้มที่มีความโปร่งแสงระดับปานกลางและสีสันสดใส เพื่อช่วยให้เนื้อหาอ่านง่ายในสภาพแสงที่ไม่แน่นอนในโลกจริง

ระบบใช้ชุดสี 3 ส่วนที่มีสีหลัก สีรอง และสีกลาง สีกลางมักใช้เป็นพื้นผิวจริงของ UI เชิงพื้นที่ ขณะที่สีหลักและสีรองจะให้สัญญาณภาพที่ชัดเจนสำหรับการโต้ตอบและการสร้างแบรนด์

การพิมพ์

ระบบการพิมพ์ของ Jetpack Compose Glimmer มีรูปแบบการพิมพ์ต่างๆ เพื่อความชัดเจนและความกระชับบนแว่นตาที่มีจอแสดงผล รูปแบบเหล่านี้ออกแบบมาเพื่อเพิ่มคอนทราสต์และปรับปรุงความสามารถในการอ่านข้อความให้ได้มากที่สุดผ่านความหนาที่มากขึ้น ระยะห่างระหว่างตัวอักษรที่กว้างขึ้น และความสูงของบรรทัดที่เหมาะสม รูปแบบเหล่านี้จะแสดงผ่าน GlimmerTheme.typography

ค่าระยะห่างของคอมโพเนนต์

ระบบจะใช้ค่าเหล่านี้เพื่อให้ระยะห่างระหว่างคอมโพเนนต์ของ Jetpack Compose Glimmer สอดคล้องกัน ซึ่งรวมถึงระยะขอบภายในของคอมโพเนนต์ ระยะห่างระหว่างคอมโพเนนต์ และองค์ประกอบระยะห่างอื่นๆ โปรดทราบว่าการเปลี่ยนแปลงค่าเหล่านี้จะส่งผลต่อการปรับขนาดเริ่มต้นของคอมโพเนนต์ส่วนใหญ่

รูปทรง

ระบบรูปทรงของ Jetpack Compose Glimmer กำหนดชุดการจัดการมุม และรูปทรงเรขาคณิตมาตรฐานสำหรับคอมโพเนนต์ ซึ่งออกแบบมาเพื่อสร้างภาษาภาพที่สอดคล้องกัน และเรียบง่ายใน UI ของแว่นตาที่มีจอแสดงผล โดยรูปทรงทั้งหมดจะแสดงผ่าน GlimmerTheme.shapes

ระดับเอฟเฟกต์ความลึก

คอมโพเนนต์ของ Jetpack Compose Glimmer ใช้ ความลึก เพื่อแสดงลำดับชั้น ซึ่งช่วยแยกความแตกต่างขององค์ประกอบแบบภาพที่แสดงเหนือการ์ดอื่นๆ ความลึกบนแว่นตาที่มีจอแสดงผลคือการผสมผสานการจัดวางในพื้นที่ Z และเงา สำหรับคอมโพเนนต์ระดับสูงส่วนใหญ่ เช่น รายการ ความลึกจะใช้โดยอัตโนมัติตามสถานะโฟกัส เมื่อคอมโพเนนต์อยู่ในโฟกัส คอมโพเนนต์จะมีความลึกมากขึ้น และเมื่อไม่ได้อยู่ในโฟกัส คอมโพเนนต์จะกลับสู่สถานะปกติ อย่างไรก็ตาม หากต้องการใช้คอมโพเนนต์ที่กำหนดเอง คุณสามารถใช้พารามิเตอร์ depthEffect ใน Modifier.surface หรือ depthEffect

ขนาดไอคอน

ระบบไอคอนของ Jetpack Compose Glimmer ออกแบบมาให้ผสานรวมกับภาษาภาพที่เรียบง่ายของ UI ของแว่นตาที่มีจอแสดงผลได้อย่างสอดคล้องกัน โดยมักใช้รูปทรงโค้งมน เช่น Material Symbols Rounded เพื่อให้อ่านได้ง่ายที่สุด