ไอคอนใน Glimmer ของ Jetpack Compose

อุปกรณ์ XR ที่รองรับ

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

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

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

ใน Jetpack Compose Glimmer คอมโพเนนต์ Icon เป็นองค์ประกอบ UI สำหรับ แสดงไอคอนสีเดียว ไอคอนจะจัดการการปรับสีและการปรับขนาดอย่างชาญฉลาดเพื่อให้ยังคงอ่านง่ายและดูสอดคล้องกับ GlimmerTheme

ขนาด

แม้ว่าโดยค่าเริ่มต้นไอคอนจะมีขนาดตามที่ LocalIconSize กำหนดไว้ แต่คุณก็สามารถ ใช้ไอคอน 3 ขนาดที่ให้มาเพื่อกำหนดขนาดที่เฉพาะเจาะจงได้ นอกจากนี้ ระบบยังใช้ขนาดเหล่านี้เป็นค่าเริ่มต้นในบริบทต่อไปนี้ด้วย

แหล่งที่มาของไอคอน

ไอคอนสามารถรับ ImageVector, ImageBitmap หรือ Painter เป็น แหล่งที่มาได้ เมื่อกำหนดไอคอนของคุณเอง ให้ใช้ ImageVector ทุกครั้งที่ทำได้เพื่อส่งเสริมการแสดงผลที่คมชัดในทุกขนาดบนแว่นตาที่มีจอแสดงผล

สีและการปรับสี

• การปรับสีอัตโนมัติ: ไอคอนจะกำหนดสีตาม LocalContentColor ที่พื้นผิวระดับบนสุด LocalContentColor กำหนด เช่น surface หรือ Button
• การปรับสีด้วยตนเอง: ใช้พารามิเตอร์ tint เพื่อใช้สีที่เฉพาะเจาะจง
• เนื้อหาหลายสี: สำหรับไอคอนที่ไม่ควรปรับสี (เช่น โลโก้แบรนด์หลายสี) ให้ตั้งค่า tint = Color.Unspecified
• รูปภาพทั่วไป: สำหรับรูปถ่ายหรือรูปภาพทั่วไปที่ไม่เป็นไปตามกฎการกำหนดขนาดและการปรับสีของไอคอน ให้ใช้ มาตรฐาน androidx.compose.foundation.Image แทน

ตัวอย่าง: ไอคอนพื้นฐาน

โค้ดต่อไปนี้จะสร้างไอคอนพื้นฐาน

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}
IconSamples.kt

ตัวอย่าง: ไอคอนที่มีสี

โค้ดต่อไปนี้จะสร้างไอคอนสีโดยใช้สีหลักของธีม

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}
IconSamples.kt

ตัวอย่าง: ไอคอนที่มีขนาดต่างๆ

โค้ดต่อไปนี้จะสร้างไอคอนที่แก้ไขให้มีขนาดที่เฉพาะเจาะจง

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}
IconSamples.kt

ประเด็นสำคัญเกี่ยวกับโค้ด

• ขนาดของไอคอนจะปรับแต่งโดยใช้ GlimmerTheme.iconSizes พร้อมตัวปรับแต่ง สำหรับไอคอน ค่าเริ่มต้นคือ GlimmerTheme.iconSizes.medium. ใช้ขนาดเหล่านี้แทนการฮาร์ดโค้ดค่าเพื่อให้ UI มีความสอดคล้องกัน
• ระบุ contentDescription ที่แปลเป็นภาษาท้องถิ่นสำหรับไอคอน โปรดระบุคำอธิบายเหล่านี้เสมอ เว้นแต่ไอคอนจะเป็นเพียงการตกแต่ง