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 die Material3-Version von der Core-Version abhängt.

Kotlin

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

Groovy

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

Wir empfehlen Ihnen dringend, Ihre App in erster Linie mit Compose zu entwickeln oder von der Verwendung von Views zu migrieren.

Vollständig in Compose geschriebene Demo-App

Die media3-ui-compose-Bibliothek enthält keine sofort einsatzbereiten Composables wie Schaltflächen, Anzeigen, Bilder oder Dialogfelder. Sie können jedoch eine vollständig in Compose geschriebene Demo-App verwenden, in der keine Interoperabilitätslösungen wie das Einbetten von PlayerView in AndroidView verwendet werden. In der Demo-App werden die UI-Status-Holder-Klassen aus dem media3-ui-compose-Modul verwendet und die Compose Material3-Bibliothek wird genutzt.

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 Pipeline für die Erstellung des UI-Zustands vorzustellen: Business logic → UI logic → UI.

Mit media3-ui-compose haben Sie die volle 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 State-Holder-Klassen (z.B. PlayPauseButtonState), die den Player-Status in den UI-Status konvertieren.

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

media3-ui-compose-material3 für eine schnellere Integration mit Material Design verwenden:

Diese Bibliothek stellt den letzten UI-Teil der Pipeline bereit. Es basiert auf media3-ui-compose und enthält vorgefertigte Composable-Funktionen, die mit Material3-Komponenten gestaltet sind. Sie müssen keine eigenen Schaltflächen und anderen UI-Elemente von Grund auf neu erstellen. Sie können weiterhin das Design, die Farben und die Symbole dieser Komponenten anpassen, aber die Kernimplementierung wird für Sie bereitgestellt.

Live-Anzeige

Funktion media3-ui-compose media3-ui-compose-material3
UI-Komponenten Grundlegende Elemente wie PlayerSurface und ContentFrame, aber keine vordefinierten Schaltflächen oder Steuerelemente. Bietet eine vollständige Reihe von vorgefertigten Composables im Material3-Stil wie PlayPauseButton, SeekBackButton, PositionAndDurationText usw.
Statusverwaltung Ermöglicht remember...State-Inhabern, die Logik zu verwalten. Der Status wird intern verwaltet, aber Sie können bei Bedarf trotzdem auf die Statusinhaber zugreifen.
Abhängigkeiten androidx.compose.foundation media3-ui-compose, androidx.compose.material3, com.google.android.material
Primärer Anwendungsfall Player-UI mit einem benutzerdefinierten Designsystem erstellen Vollständige Kontrolle über das Erscheinungsbild. Schnelles Erstellen einer Player-Benutzeroberfläche, die den Material Design 3-Richtlinien entspricht.