ไอคอนใน 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 IconSampleUsage() {
    GlimmerLazyColumn(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        item { IconSizesSample() }
        item {
            Icon(
                FavoriteIcon,
                "Localized description",
                Modifier.surface(
                        shape = CircleShape,
                        color = GlimmerTheme.colors.primary,
                        border = null,
                    )
                    .padding(12.dp),
            )
        }
    }
}
IconSamples.kt

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

โค้ดต่อไปนี้แสดงขนาดไอคอนต่างๆ

@Composable
fun IconSizesSample() {
    val iconSizes = GlimmerTheme.iconSizes
    Column(
        verticalArrangement = Arrangement.spacedBy(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.small))
        // medium is also the default size, defining explicitly for clarity
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.medium))
        Icon(FavoriteIcon, "Localized description", Modifier.size(iconSizes.large))
    }
}
IconSamples.kt

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

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