Unterstützung von nutzerseitig skalierbaren Inhalten

Implementieren Sie Gesten zum Zoomen, um skalierbare Inhalte in Ihrer App zu unterstützen. Das ist die standardmäßige, plattformübergreifende Methode zur Verbesserung der Barrierefreiheit, mit der Nutzer die Größe von Text und UI-Elementen intuitiv an ihre Anforderungen anpassen können. In Ihrer App können Sie ein benutzerdefiniertes Skalierungsverhalten mit detaillierter Steuerung und kontextbezogenem Verhalten definieren, das Nutzern oft schneller auffällt als eine Funktion auf Systemebene wie die Bildschirmvergrößerung.

Skalierungsstrategie auswählen

Die in diesem Leitfaden beschriebenen Strategien führen dazu, dass die Benutzeroberfläche neu angeordnet und organisiert wird, um sie an die Bildschirmbreite anzupassen. Dies ist ein erheblicher Vorteil für die Barrierefreiheit, da horizontales Schwenken und die frustrierende „Zickzack“-Bewegung, die sonst zum Lesen langer Textzeilen erforderlich wären, entfallen.

Weiterführende Informationen: Untersuchungen bestätigen, dass für Nutzer mit eingeschränktem Sehvermögen Inhalte mit dynamischem Zeilenumbruch deutlich besser lesbar und einfacher zu navigieren sind als Oberflächen, die zweidimensionales Schwenken erfordern. Weitere Informationen finden Sie unter A Comparison of Pan-and-Scan and Reflowable Content on Mobile Devices.

Entweder alle Elemente oder nur Textelemente skalieren

In der folgenden Tabelle wird der visuelle Effekt der einzelnen Skalierungsstrategien veranschaulicht.

Strategie	Dichteskalierung	Schriftskalierung
Verhalten	Skaliert alles proportional. Der Inhalt wird so umgebrochen, dass er in den Container passt. Der Nutzer muss also nicht horizontal scrollen, um den gesamten Inhalt zu sehen.	Wirkt sich nur auf Textelemente aus. Das Gesamtlayout und die nicht textbasierten Komponenten bleiben gleich groß.
Was ist skalierbar?	Alle visuellen Elemente: Text, Komponenten (Buttons, Symbole), Bilder und Layoutabstände (Padding, Ränder)	Nur Text
Demonstration

Empfehlungen

Nachdem du die visuellen Unterschiede gesehen hast, kannst du anhand der folgenden Tabelle die Vor- und Nachteile abwägen und die beste Strategie für deine Inhalte auswählen.

UI-Typ	Empfohlene Strategie	Logisches Denken
Layouts mit viel Text Beispiele: Nachrichtenartikel, Messaging-Apps	Dichte oder Schriftskalierung	Die Dichteskalierung wird bevorzugt, um den gesamten Inhaltsbereich einschließlich Inline-Bildern zu skalieren. Die Schriftskalierung ist eine einfache Alternative, wenn nur Text skaliert werden muss.
Visuell strukturierte Layouts Beispiele: App-Shops, Social-Media-Feeds	Dichteskalierung	Behält die visuellen Beziehungen zwischen Bildern und Text in Karussells oder Rastern bei. Durch die dynamische Anpassung wird horizontales Schwenken vermieden, das mit verschachtelten Scrollelementen in Konflikt stehen würde.

Skalierungsgesten in Jetpack Compose erkennen

Wenn Sie vom Nutzer skalierbare Inhalte unterstützen möchten, müssen Sie zuerst Multitouch-Gesten erkennen. In Jetpack Compose können Sie dazu Modifier.transformable verwenden.

Wichtig: Es ist wichtig zu wissen, dass dieser Modifikator nur ein Gestendetektor ist und keine Skalierung anwendet. Sie müssen die bereitgestellten Daten verwenden, um Ihren eigenen Status zu aktualisieren.

Der transformable-Modifikator ist eine High-Level-API, die das zoomChange-Delta seit dem letzten Gestenereignis bereitstellt. Dadurch wird die Logik für die Statusaktualisierung auf die direkte Akkumulation (z. B. scale *= zoomChange) vereinfacht, was ideal für die in diesem Leitfaden beschriebenen adaptiven Skalierungsstrategien ist.

Beispielimplementierungen

Die folgenden Beispiele zeigen, wie die Strategien für die Dichte- und Schriftartskalierung implementiert werden.

Tipp: Um die Nutzerfreundlichkeit weiter zu verbessern und die Präferenz des Nutzers zu berücksichtigen, sollten Sie den gewählten Skalierungsfaktor beibehalten. Wenn der Nutzer zum Bildschirm zurückkehrt oder die App neu startet, ist die bevorzugte Skalierung bereits angewendet. Eine moderne, von Jetpack empfohlene Lösung zum Speichern von Einstellungen findest du unter Jetpack DataStore.

Dichteskalierung

Bei diesem Ansatz wird die Basis-density eines UI-Bereichs skaliert. Dadurch werden alle layoutbasierten Maße – einschließlich Abständen, Abständen und Komponentengrößen – so skaliert, als hätte sich die Bildschirmgröße oder -auflösung geändert. Da die Textgröße auch von der Dichte abhängt, wird sie ebenfalls proportional skaliert. Diese Strategie ist effektiv, wenn Sie alle Elemente in einem bestimmten Bereich einheitlich vergrößern möchten, um den visuellen Rhythmus und die Proportionen Ihrer Benutzeroberfläche beizubehalten.

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
        )
    }
}

@Composable
fun DensityScalingSample() {
    val currentDensity = LocalDensity.current
    val scaleState =
        remember(currentDensity) { DensityScalingState(currentDensity = currentDensity) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .transformable(state = scaleState.transformableState),
        contentAlignment = Alignment.TopCenter
    ) {
        CompositionLocalProvider(
            LocalDensity provides scaleState.scaledDensity()
        ) {
            DemoCard()
        }
    }
}
ScalableContentSnippets.kt

Schriftskalierung

Diese Strategie ist zielgerichteter, da nur der fontScale-Faktor geändert wird. Das Ergebnis ist, dass nur Textelemente vergrößert oder verkleinert werden, während alle anderen Layoutkomponenten wie Container, Abstände und Symbole eine feste Größe behalten. Diese Strategie eignet sich gut, um die Lesbarkeit von Text in Apps mit viel Text zu verbessern.

Hinweis: Bei diesem Ansatz wird das zugrunde liegende System zur Schriftskalierung von Android verwendet, das eine nicht lineare Skalierung für eine bessere Lesbarkeit anwendet. Daher führt ein zoomChange-Wert von 2,0 möglicherweise nicht dazu, dass der Text genau doppelt so groß erscheint, aber es wird ein Skalierungsverhalten erzeugt, das mit den systemweiten Einstellungen für Bedienungshilfen des Nutzers übereinstimmt.

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
        )
    }
}

@Composable
fun FontScalingSample() {
    val currentDensity = LocalDensity.current
    val scaleState = remember { FontScaleState(currentDensity = currentDensity) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .transformable(state = scaleState.transformableState),
        contentAlignment = Alignment.TopCenter
    ) {
        CompositionLocalProvider(
            LocalDensity provides scaleState.scaledFont()
        ) {
            DemoCard()
        }
    }
}
ScalableContentSnippets.kt

Geteilte Demo-UI

Dies ist die freigegebene DemoCard-Komposition, die in beiden vorherigen Beispielen verwendet wird, um die unterschiedlichen Skalierungsverhalten hervorzuheben.

@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

Tipps und Hinweise

Beachten Sie die folgenden Empfehlungen, um eine ansprechendere und barrierefreie Nutzung zu ermöglichen:

• Biete Steuerelemente für die Skalierung an, die nicht auf Gesten basieren: Einige Nutzer haben möglicherweise Schwierigkeiten mit Gesten. Um diese Nutzer zu unterstützen, solltest du eine alternative Möglichkeit zum Anpassen oder Zurücksetzen der Skalierung anbieten, die nicht auf Gesten basiert.
• Für alle Skalierungen entwickeln: Teste deine Benutzeroberfläche sowohl mit der In-App-Skalierung als auch mit den systemweiten Schrift- oder Anzeigeeinstellungen. Prüfe, ob sich die Layouts deiner App korrekt anpassen, ohne dass Inhalte beschädigt, überlappt oder ausgeblendet werden. Weitere Informationen zum Erstellen adaptiver Layouts