Jetpack Compose Glimmer'daki simgeler

Uygun XR cihazlar

Bu kılavuz, bu tür XR cihazlar için deneyimler oluşturmanıza yardımcı olur.

XR cihaz türleri hakkında bilgi edinin →

XR cihaz türleri hakkında bilgi edinin →

Jetpack Compose Glimmer'da Icon bileşeni, tek renkli simgeleri oluşturmak için kullanılan bir kullanıcı arayüzü öğesidir. Simgeler, renk tonunu ve ölçeklendirmeyi akıllıca yönetir. Böylece okunabilirliğini ve GlimmerTheme ile görsel tutarlılığını korur.

Boyutlar

Simgeler varsayılan olarak LocalIconSize tarafından sağlanan boyutta olsa da belirli bir boyut ayarlamak için sağlanan üç simge boyutunu da kullanabilirsiniz. Bu boyutlar, aşağıdaki bağlamlarda da varsayılan olarak kullanılır:

Simge kaynakları

Simgeler kaynak olarak ImageVector, ImageBitmap veya Painter öğesini kabul edebilir. Kendi simgelerinizi tanımlarken, ekran gözlüklerinde her ölçekte net görüntülemeyi desteklemek için mümkün olduğunda ImageVector kullanın.

Renk ve Tonlama

• Otomatik renk tonu: Simge, üst yüzey tarafından sağlanan LocalContentColor değerine göre rengini belirler. Örneğin, surface veya Button.LocalContentColor
• Manuel Renklendirme: Belirli bir rengi uygulamak için tint parametresini kullanın.
• Çok Renkli Öğeler: Renklendirilmemesi gereken simgeler (ör. çok renkli marka logoları) için tint = Color.Unspecified değerini ayarlayın.
• Genel Resimler: Simge boyutlandırma ve renklendirme kurallarına uymayan fotoğraflar veya genel resimler için standart androidx.compose.foundation.Image simgesini kullanın.

Örnek: Bir yüzeydeki temel simge

Aşağıdaki kod, temanın birincil rengini kullanarak dairesel bir yüzeyin içine yerleştirilmiş bir simge oluşturur:

@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

Örnek: Farklı boyutlarda simgeler

Aşağıdaki kodda farklı simge boyutları gösterilmektedir:

@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

Kodla ilgili önemli noktalar

• Her simgenin boyutu, değiştiriciyle birlikte GlimmerTheme.iconSizes kullanılarak özelleştirilir. Simgeler için varsayılan değer GlimmerTheme.iconSizes.medium'dir. Kullanıcı arayüzünüzde tutarlılığı korumak için değerleri sabit kodlamak yerine bu boyutları kullanın.
• Her simge için yerelleştirilmiş bir contentDescription sağlar. Simge tamamen dekoratif amaçlı olmadığı sürece bu açıklamaları her zaman ekleyin.