Erste Schritte mit der Compose-basierten Benutzeroberfläche

Abhängigkeit hinzufügen

Die Media3-Bibliothek enthält zwei Jetpack Compose-basierte UI-Module. Sie müssen nicht beide hinzufügen, da das Material3-Modul vom Core-Modul abhängt.

Kotlin

// Include only one of the following dependencies
implementation("androidx.media3:media3-ui-compose:1.10.0")
implementation("androidx.media3:media3-ui-compose-material3:1.10.0")

Groovy

// Include only one of the following dependencies
implementation "androidx.media3:media3-ui-compose:1.10.0"
implementation "androidx.media3:media3-ui-compose-material3:1.10.0"

Wir empfehlen dringend, Ihre App mit Compose zu entwickeln oder von der Verwendung von Ansichten zu migrieren.

Vollständig mit Compose entwickelte Demo-App

Die media3-ui-compose Bibliothek enthält keine sofort einsatzbereiten Composables wie Schaltflächen, Anzeigen, Bilder oder Dialogfelder. Es gibt jedoch eine Demo-App, die vollständig mit Compose geschrieben wurde und keine Interoperabilitäts Lösungen wie das Einbinden von PlayerView in AndroidView verwendet. Die Demo-App verwendet die UI-Status-Holder-Klassen aus dem media3-ui-compose Modul und macht Gebrauch von der Compose Material3 Bibliothek.

Welche Bibliothek benötige ich?

Je nach gewünschtem Grad der Anpassung können Sie zwischen zwei Media3-Compose-Bibliotheken wählen. Um den Unterschied zu verstehen, ist es hilfreich, sich die Produktionspipeline für den UI-Status vorzustellen: Business logic → UI logic → UI.

Verwenden Sie media3-ui-compose für die vollständige Kontrolle über Ihre UI-Komponenten.

Diese Bibliothek stellt die Business logic → UI logic Verbindung bereit. Sie enthält grundlegende Komponenten wie PlayerSurface und ContentFrame sowie Status-Holder-Klassen (z.B. PlayPauseButtonState), die den Player -Status in den UI-Status umwandeln.

Diese Bibliothek bietet keine sofort einsatzbereiten Material Design-Komponenten. Sie sind für die Erstellung und Gestaltung Ihrer eigenen UI-Komponenten verantwortlich. So haben Sie maximale Kontrolle über das Erscheinungsbild und die Bedienung. Das ist ideal, wenn Sie ein stark angepasstes Designsystem haben.

Verwenden Sie media3-ui-compose-material3 für eine schnellere Integration mit Material Design.

Diese Bibliothek stellt den letzten Teil der Pipeline bereit: UI. Sie hängt von media3-ui-compose ab und enthält vorgefertigte Composable-Funktionen, die mit Material3-Komponenten gestaltet sind, einschließlich des Player-Composable, das eine umfassende Medienwiedergabe mit Video, Steuerelementen und Fortschrittsbalken bietet. So müssen Sie keine eigenen Schaltflächen und andere UI-Elemente von Grund auf neu erstellen. Sie können das Design, die Farben und die Symbole dieser Komponenten weiterhin anpassen, aber die Kernimplementierung wird für Sie bereitgestellt.

Auf einen Blick

Funktion media3-ui-compose media3-ui-compose-material3
UI-Komponenten Grundlegende Elemente wie PlayerSurface und ContentFrame, aber keine vordefinierten Schaltflächen oder Steuerelemente. Bietet das Player-Composable und eine vollständige Reihe vorgefertigter, mit Material3 gestalteter Composables wie PlayPauseButton, SeekBackButton, PositionAndDurationText usw.
Statusverwaltung Bietet remember...State-Holder zur Verwaltung der Logik. Verwaltet den Status intern, aber Sie können bei Bedarf weiterhin auf die Status-Holder zugreifen.
Abhängigkeiten androidx.compose.foundation media3-ui-compose, androidx.compose.material3, com.google.android.material
Primärer Anwendungsfall Erstellen einer Player-UI mit einem benutzerdefinierten Designsystem. Vollständige Kontrolle über das Erscheinungsbild und die Bedienung. Schnelles Erstellen einer Player-UI, die den Richtlinien von Material Design 3 entspricht.