Ikony w Jetpack Compose Glimmer

Obsługiwane urządzenia z XR

Te wskazówki pomogą Ci tworzyć aplikacje na te typy urządzeń z XR.

Więcej informacji o typach urządzeń z XR →

Więcej informacji o typach urządzeń z XR →

W Jetpack Compose Glimmer komponent Icon to element interfejsu do renderowania ikon w jednym kolorze. Ikony inteligentnie obsługują kolorowanie i skalowanie, dzięki czemu pozostają czytelne i wizualnie spójne z GlimmerTheme.

Rozmiary

Domyślnie ikony mają rozmiar określony przez LocalIconSize, ale możesz też użyć 3 rozmiarów ikon, aby ustawić konkretny rozmiar. Te rozmiary są też domyślnie używane w tych kontekstach:

Źródła ikon

Ikony mogą akceptować jako źródło ImageVector, ImageBitmap lub Painter. Podczas definiowania własnych ikon używaj w miarę możliwości ImageVector, aby zapewnić ostre renderowanie w dowolnej skali na okularach z wyświetlaczem.

Kolor i kolorowanie

• Automatyczne kolorowanie: ikona określa swój kolor na podstawie LocalContentColor podanego przez element nadrzędny LocalContentColor podanego przez element nadrzędny, np. surface lub Button.
• Ręczne kolorowanie: aby zastosować określony kolor, użyj parametru tint.
• Zasoby wielokolorowe: w przypadku ikon, które nie powinny być kolorowane (np. wielokolorowe logo marki), ustaw tint = Color.Unspecified.
• Obrazy ogólne: w przypadku zdjęć lub obrazów ogólnych, które nie są zgodne z zasadami dotyczącymi rozmiarów i kolorowania ikon , użyj standardowego komponentu androidx.compose.foundation.Image.

Przykład: podstawowa ikona w elemencie powierzchni

Poniższy kod tworzy ikonę umieszczoną w okrągłym elemencie powierzchni, wykorzystując kolor podstawowy motywu:

@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

Przykład: ikony o różnych rozmiarach

Poniższy kod pokazuje różne rozmiary 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

Najważniejsze informacje o kodzie

• Rozmiar każdej ikony jest dostosowywany za pomocą GlimmerTheme.iconSizes z a modyfikatorem. W przypadku ikon wartość domyślna to GlimmerTheme.iconSizes.medium. Aby zachować spójność interfejsu, używaj tych rozmiarów zamiast wartości zakodowanych na stałe.
• Dla każdej ikony podaje zlokalizowany element contentDescription. Zawsze podawaj te opisy, chyba że ikona ma charakter wyłącznie dekoracyjny.