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

อุปกรณ์ XR ที่ใช้ได้

คำแนะนำนี้จะช่วยให้คุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ เหล่านี้ได้

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

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

Composable ของ Jetpack Compose Glimmer

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

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

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

  แตกต่างกันโดยใช้ภาพป้อนกลับแบบมีเส้นขอบ

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

  

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

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

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

• ข้อความ
• ไอคอน
• ชิปชื่อ
• การ์ด
• รายการ
• ปุ่ม

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

ตัวแก้ไข Glimmer ของ Jetpack Compose

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

ความลึกของ Glimmer ใน Jetpack Compose

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

ธีมของ Jetpack Compose Glimmer

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

เช่นเดียวกับธีมอื่นๆ ใน Jetpack Compose GlimmerTheme มีระบบย่อยหลายอย่าง ได้แก่ สี รูปร่าง ตัวอักษร และไอคอน (สัญลักษณ์) ธีมของ Jetpack Compose Glimmer ยังมีคอมโพเนนต์ Jetpack Compose Glimmer ที่คุณปรับแต่งได้ด้วย

สี

ระบบสีของ Jetpack Compose Glimmer มีสี 7 สีในจานสีที่ได้รับการเพิ่มประสิทธิภาพ ซึ่งออกแบบมาเพื่อให้มองเห็นได้ชัดเจนที่สุดและกระชับที่สุดบนจอแสดงผลของแว่นตา AI ซึ่งค่าสีดำจะไม่แสดงผล

โปรดทราบว่าสี "ใน ..." จะไม่แสดงผ่าน GlimmerTheme ระบบจะคำนวณสีเหล่านี้โดยอัตโนมัติตามสีพื้นหลัง

สีเหล่านี้จะแสดงผ่าน GlimmerTheme.colors.primary โดยมีค่าสำหรับบทบาทสีแต่ละบทบาทตามที่อธิบายไว้ในตารางต่อไปนี้

โปรดทราบว่าแม้ว่า surface, outline และ outlineVariant จะ ทําเครื่องหมายว่าปรับแต่งได้ แต่เราขอแนะนําอย่างยิ่งว่าอย่าปรับแต่งค่าเหล่านี้

รูปทรง

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

การพิมพ์

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

ไอคอน

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