Premiers pas avec l'UI basée sur Compose

Ajouter la dépendance

La bibliothèque Media3 inclut deux modules d'UI basés sur Jetpack Compose. Vous n'avez pas besoin d'ajouter les deux, car celui de Material3 dépend de celui du noyau.

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"

Nous vous encourageons vivement à développer votre application en privilégiant Compose ou à migrer depuis l'utilisation des vues.

Application de démonstration entièrement Compose

Bien que la bibliothèque media3-ui-compose n'inclue pas de composables prêts à l'emploi (tels que des boutons, des indicateurs, des images ou des boîtes de dialogue), vous pouvez trouver une application de démonstration entièrement écrite en Compose qui évite toute solution d'interopérabilité comme l'encapsulation de PlayerView dans AndroidView. L'application de démonstration utilise les classes de détenteur d'état de l'UI du module media3-ui-compose et la bibliothèque Compose Material3.

De quelle bibliothèque ai-je besoin ?

Selon le niveau de personnalisation dont vous avez besoin, vous pouvez choisir entre deux bibliothèques Media3 Compose. Pour comprendre la différence, il est utile de réfléchir au pipeline de production de l'état de l'UI : Business logic → UI logic → UI.

Utilisez media3-ui-compose pour contrôler entièrement vos composants d'UI.

Cette bibliothèque fournit la connexion Business logic → UI logic. Il contient des composants de base tels que PlayerSurface et ContentFrame, ainsi que des classes de détenteur d'état (par exemple, PlayPauseButtonState) qui convertissent l'état Player en état de l'UI.

Cette bibliothèque ne fournit pas de composants Material Design prêts à l'emploi. Vous êtes responsable de la création et de la mise en forme de vos propres composants d'UI. Elle vous offre un contrôle maximal sur l'apparence, ce qui est idéal si vous disposez d'un système de conception très personnalisé.

Utilisez media3-ui-compose-material3 pour une intégration plus rapide à Material Design.

Cette bibliothèque fournit la dernière partie UI du pipeline. Il dépend de media3-ui-compose et inclut des fonctions composables prédéfinies stylisées avec des composants Material3. Vous n'avez donc pas besoin de créer vos propres boutons et autres éléments d'interface utilisateur à partir de zéro. Vous pouvez toujours personnaliser le thème, les couleurs et les icônes de ces composants, mais l'implémentation de base est fournie pour vous.

Aperçu

Fonctionnalité media3-ui-compose media3-ui-compose-material3
Composants d'UI Éléments de base tels que PlayerSurface et ContentFrame, mais aucun bouton ni contrôle pré-stylisés. Fournit un ensemble complet de Composables prédéfinis de style Material 3, comme PlayPauseButton, SeekBackButton, PositionAndDurationText, etc.
Gestion de l'état Permet aux détenteurs de remember...State de gérer la logique. Gère l'état en interne, mais vous pouvez toujours accéder aux conteneurs d'état si nécessaire.
Dépendances androidx.compose.foundation media3-ui-compose, androidx.compose.material3, com.google.android.material
Cas d'utilisation principal Créer une UI de lecteur avec un système de conception personnalisé. Contrôle total de l'apparence. Créer rapidement une UI de lecteur conforme aux consignes Material Design 3.