Ikon dalam Glimmer Jetpack Compose

Perangkat XR yang kompatibel

Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.

Mempelajari jenis perangkat XR →

Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, komponen Icon adalah elemen UI untuk merender ikon satu warna. Ikon secara cerdas menangani pewarnaan dan penskalaan sehingga tetap mudah dibaca dan konsisten secara visual dengan GlimmerTheme.

Ukuran

Meskipun ikon secara default berukuran sesuai dengan yang diberikan oleh LocalIconSize, Anda juga dapat menggunakan tiga ukuran ikon yang disediakan untuk menetapkan ukuran tertentu. Ukuran ini juga digunakan secara default untuk konteks berikut:

Sumber ikon

Ikon dapat menerima ImageVector, ImageBitmap, atau Painter sebagai sumbernya. Saat menentukan ikon Anda sendiri, gunakan ImageVector jika memungkinkan untuk mempromosikan rendering yang tajam pada skala apa pun di kacamata tampilan.

Warna dan Tint

• Pewarnaan otomatis: Ikon menyelesaikan warnanya berdasarkan LocalContentColor yang disediakan oleh permukaan induk LocalContentColor yang disediakan oleh permukaan induk, seperti surface atau Button.
• Pewarnaan Manual: Gunakan parameter tint untuk menerapkan warna tertentu.
• Aset Multiwarna: Untuk ikon yang tidak boleh diwarnai (seperti logo merek multiwarna), tetapkan tint = Color.Unspecified.
• Gambar Generik: Untuk foto atau gambar generik yang tidak mengikuti aturan ukuran dan pewarnaan ikon, gunakan androidx.compose.foundation.Image standar sebagai gantinya.

Contoh: Ikon dasar

Kode berikut membuat ikon dasar:

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

Contoh: Ikon dengan warna

Kode berikut membuat ikon berwarna menggunakan warna primer tema:

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

Contoh: Ikon dengan ukuran berbeda

Kode berikut membuat ikon yang diubah menjadi ukuran tertentu:

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

Poin penting tentang kode

• Ukuran ikon disesuaikan menggunakan GlimmerTheme.iconSizes dengan pengubah. Untuk ikon, nilai defaultnya adalah GlimmerTheme.iconSizes.medium. Gunakan ukuran ini, bukan nilai hardcode untuk menjaga konsistensi di seluruh UI Anda.
• Menyediakan contentDescription yang dilokalkan untuk ikon. Selalu berikan deskripsi ini kecuali jika ikon hanya bersifat dekoratif.