สิ่งที่รวมอยู่ใน 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 เพื่อให้อ่านง่ายที่สุด