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.

Contoh: Ikon dasar dalam permukaan

Kode berikut membuat ikon yang ditempatkan di dalam permukaan melingkar, menggunakan warna primer tema:

@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

Contoh: Ikon dengan ukuran berbeda

Kode berikut menunjukkan berbagai ukuran ikon:

@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

Poin penting tentang kode

• Ukuran setiap 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 setiap ikon. Selalu berikan deskripsi ini kecuali jika ikon hanya bersifat dekoratif.