Obsługa treści, które można skalować

Wprowadź gesty szczypania, aby obsługiwać skalowalną zawartość w aplikacji. Jest to standardowa, spójna na różnych platformach metoda poprawy dostępności, która pozwala użytkownikom intuicyjnie dostosowywać rozmiar tekstu i elementów interfejsu do swoich potrzeb. Aplikacja może definiować niestandardowe zachowanie skalowania z dokładną kontrolą i kontekstowym zachowaniem, które zapewnia użytkownikom lepsze wrażenia niż funkcja systemowa, taka jak powiększenie ekranu.

Wybierz strategię skalowania

Strategie opisane w tym przewodniku powodują, że interfejs użytkownika zmienia układ i organizację, aby dopasować się do szerokości ekranu. Zapewnia to znaczną poprawę dostępności, ponieważ eliminuje konieczność przewijania w poziomie i frustrujący ruch „zygzakowaty”, który w przeciwnym razie byłby wymagany do odczytania długich wierszy tekstu.

Dodatkowe informacje: badania potwierdzają, że w przypadku użytkowników niedowidzących przepływ treści jest znacznie bardziej czytelny i łatwiejszy w nawigacji niż interfejsy wymagające dwuwymiarowego przesuwania. Więcej informacji znajdziesz w artykule Porównanie treści w formacie pan-and-scan i reflowable na urządzeniach mobilnych.

Skalowanie wszystkich elementów lub tylko elementów tekstowych

Poniższa tabela pokazuje efekt wizualny każdej strategii skalowania.

Rekomendacje

Teraz, gdy znasz już różnice wizualne, w tabeli poniżej możesz porównać zalety i wady poszczególnych strategii i wybrać najlepszą dla swoich treści.

Wykrywanie gestów skalowania w Jetpack Compose

Aby obsługiwać treści, które można skalować przez użytkownika, musisz najpierw wykrywać gesty wielodotykowe. W Jetpack Compose możesz to zrobić za pomocą funkcji Modifier.transformable.

Modyfikator transformable to interfejs API wysokiego poziomu, który podaje zoomChange wartość delta od ostatniego zdarzenia związanego z gestem. Upraszcza to logikę aktualizacji stanu do bezpośredniego gromadzenia (np. scale *= zoomChange), dzięki czemu idealnie nadaje się do strategii skalowania adaptacyjnego opisanych w tym przewodniku.

Przykładowe implementacje

Poniższe przykłady pokazują, jak wdrożyć strategie skalowania gęstości i skalowania czcionek.

Skalowanie gęstości

W tym podejściu skalowana jest podstawa density obszaru interfejsu. W rezultacie wszystkie pomiary oparte na układzie, w tym dopełnienie, odstępy i rozmiary komponentów, są skalowane tak, jakby zmienił się rozmiar lub rozdzielczość ekranu. Rozmiar tekstu zależy też od gęstości, więc również jest skalowany proporcjonalnie. Ta strategia jest skuteczna, gdy chcesz równomiernie powiększyć wszystkie elementy w określonym obszarze, zachowując ogólny rytm wizualny i proporcje interfejsu.

private class DensityScalingState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledDensity(): Density {
        return Density(
            currentDensity.density * scaleFactor.floatValue,
            currentDensity.fontScale
        )
    }
}
ScalableContentSnippets.kt

Skalowanie czcionek

Ta strategia jest bardziej precyzyjna, ponieważ modyfikuje tylko współczynnik fontScale. W rezultacie tylko elementy tekstowe powiększają się lub zmniejszają, a wszystkie inne komponenty układu, takie jak kontenery, dopełnienie i ikony, zachowują stały rozmiar. Ta strategia dobrze sprawdza się w przypadku poprawy czytelności tekstu w aplikacjach, w których użytkownicy dużo czytają.

class FontScaleState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledFont(): Density {
        return Density(
            currentDensity.density,
            currentDensity.fontScale * scaleFactor.floatValue
        )
    }
}
ScalableContentSnippets.kt

Wspólny interfejs wersji demonstracyjnej

Jest to wspólny DemoCard komponent kompozycyjny używany w obu poprzednich przykładach do wyróżnienia różnych zachowań skalowania.

@Composable
private fun DemoCard() {
    Card(
        modifier = Modifier
            .width(360.dp)
            .padding(16.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text("Demo Card", style = MaterialTheme.typography.headlineMedium)
            var isChecked by remember { mutableStateOf(true) }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text("Demo Switch", Modifier.weight(1f), style = MaterialTheme.typography.bodyLarge)
                Switch(checked = isChecked, onCheckedChange = { isChecked = it })
            }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(Icons.Filled.Person, "Icon", Modifier.size(32.dp))
                Spacer(Modifier.width(8.dp))
                Text("Demo Icon", style = MaterialTheme.typography.bodyLarge)
            }
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Blue)
                )
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Red)
                )
            }
            Text(
                "Demo Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit," +
                    " sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Justify
            )
        }
    }
}
ScalableContentSnippets.kt

Wskazówki i informacje

Aby zapewnić użytkownikom lepsze wrażenia, zastosuj te rekomendacje:

• Rozważ udostępnienie elementów sterujących skalą bez gestów: niektórzy użytkownicy mogą mieć trudności z gestami. Aby pomóc tym użytkownikom, rozważ udostępnienie alternatywnego sposobu dostosowywania lub resetowania skali, który nie wymaga gestów.
• Twórz aplikacje z myślą o różnych skalach: przetestuj interfejs pod kątem skalowania w aplikacji oraz ustawień czcionki lub wyświetlacza w całym systemie. Sprawdź, czy układy aplikacji dostosowują się prawidłowo, nie powodując uszkodzeń, nakładania się ani ukrywania treści. Dowiedz się więcej o tworzeniu układów adaptacyjnych.