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. Simge, renklendirme ve ölçeklendirme işlemlerini akıllıca yönetir. Böylece, GlimmerTheme ile okunaklı ve görsel olarak tutarlı kalır.

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ü oluşturmak için mümkün olduğunda ImageVector simgesini kullanın.

Renk ve Tonlama

• Otomatik renk tonu: Simge, üst yüzey tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir surface veya Button tarafından sağlanan LocalContentColor LocalContentColor gibi bir
• 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: Temel simge

Aşağıdaki kod, temel bir simge oluşturur:

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

Örnek: Renkli simgeler

Aşağıdaki kod, temanın birincil rengini kullanarak renkli bir simge oluşturur:

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

Örnek: Farklı boyutlarda simgeler

Aşağıdaki kod, belirli bir boyuta göre değiştirilmiş bir simge oluşturur:

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

Kodla ilgili önemli noktalar

• 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.
• Simge için yerelleştirilmiş bir contentDescription sağlar. Simge tamamen dekoratif amaçlı olmadığı sürece bu açıklamaları her zaman sağlayın.