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

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

Jetpack Compose Glimmer สร้างขึ้นบน 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 จะคำนวณสีเนื้อหา ตามสีพื้นหลังโดยค่าเริ่มต้น ดังนั้นนักพัฒนาซอฟต์แวร์จึงไม่ค่อยจำเป็นต้อง ตั้งค่าสีข้อความด้วยตนเอง ซึ่งจะช่วยเพิ่มความสามารถในการอ่านโดยไม่ต้องดำเนินการเพิ่มเติม

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

    รูปที่ 1 สถานะโฟกัส 3 สถานะใน Jetpack Compose Glimmer ซึ่ง
    แตกต่างกันโดยใช้ภาพป้อนกลับแบบมีเส้นขอบ

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

    รูปที่ 2 ระดับการยกระดับ 5 ระดับใน Jetpack Compose Glimmer ซึ่ง แตกต่างกันโดยใช้เงาในกล่องที่จำกัด

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

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

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

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

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

ตัวแก้ไขในฟังก์ชัน Glimmer ของ Jetpack Compose จะทำงานเหมือนกับตัวแก้ไข Compose ทุกประการ ซึ่งช่วยให้คุณเพิ่มฟังก์ชันที่ประกอบกันได้โดยการปรับแต่งเลย์เอาต์ ลักษณะที่ปรากฏ และลักษณะการทำงาน 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

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

สี

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

รูปที่ 3 ภาพรวมของสีใน GlimmerTheme

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

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

บทบาทสี

ค่าเริ่มต้น

กลุ่มแม่สี

#9BBFFF

รอง

#4C88E9

ในแง่ดี

#63FEA8

ลบ

#FFA7A0

แพลตฟอร์ม

#262626

outline

#606460

outlineVariant

#42434A

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

รูปทรง

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

รูปที่ 4 ตัวอย่างรูปร่างขนาดใหญ่ กลาง และเล็กใน Jetpack Compose Glimmer

การพิมพ์

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

รูปที่ 5 ตัวอย่างรูปแบบการจัดรูปแบบข้อความ 6 รูปแบบของ Glimmer ใน Jetpack Compose

ไอคอน

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