Memulai UI berbasis Compose

Menambahkan dependensi

Library Media3 menyertakan dua modul UI berbasis Jetpack Compose. Anda tidak perlu menambahkan keduanya karena Material3 bergantung pada core.

Kotlin

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

Groovy

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

Kami sangat menyarankan Anda untuk mengembangkan aplikasi dengan cara yang mengutamakan Compose atau bermigrasi dari penggunaan View.

Aplikasi demo Compose sepenuhnya

Meskipun library media3-ui-compose tidak menyertakan composable siap pakai (seperti tombol, indikator, gambar, atau dialog), Anda dapat menemukan aplikasi demo yang ditulis sepenuhnya di Compose yang menghindari solusi interoperabilitas seperti menggabungkan PlayerView di AndroidView. Aplikasi demo menggunakan class holder status UI dari modul media3-ui-compose dan library Compose Material3.

Library mana yang saya perlukan?

Bergantung pada tingkat penyesuaian yang Anda perlukan, Anda dapat memilih di antara dua library Media3 Compose. Untuk memahami perbedaannya, sebaiknya pikirkan pipeline produksi status UI: Business logic → UI logic → UI.

Gunakan media3-ui-compose untuk kontrol penuh atas komponen UI Anda.

Library ini menyediakan koneksi Business logic → UI logic. Library ini berisi komponen dasar seperti PlayerSurface dan ContentFrame, beserta class holder status (misalnya, PlayPauseButtonState, CurrentMediaItemState, PlaylistState, ErrorState) yang mengonversi status Player menjadi status UI.

Library ini tidak menyediakan komponen Desain Material siap pakai. Anda bertanggung jawab untuk membangun komponen UI Anda sendiri dan menata gayanya. Opsi ini memberi Anda kontrol maksimum atas tampilan dan nuansa, sehingga ideal jika Anda memiliki sistem desain yang sangat disesuaikan.

Gunakan media3-ui-compose-material3 untuk integrasi yang lebih cepat dengan Desain Material.

Library ini menyediakan bagian UI akhir dari pipeline. Library ini bergantung pada media3-ui-compose dan menyertakan fungsi composable bawaan yang diberi gaya dengan komponen Material3, termasuk composable Player dan MiniController. Composable Player menawarkan pengalaman pemutaran media yang komprehensif dengan video, kontrol, dan status progres, yang dapat Anda sesuaikan lebih lanjut menggunakan PlayerDefaults. Composable MiniController menyediakan affordance yang ringkas untuk mengontrol pemutar sambil menampilkan informasi tentang item media saat ini. Dengan demikian, Anda tidak perlu membuat tombol dan elemen UI lainnya dari awal. Anda masih dapat menyesuaikan tema, warna, dan ikon komponen ini, tetapi implementasi intinya disediakan untuk Anda.

Selayang pandang

Fitur media3-ui-compose media3-ui-compose-material3
Komponen UI Elemen dasar seperti PlayerSurface dan ContentFrame, tetapi tanpa tombol atau kontrol yang telah diberi gaya. Menyediakan composable Player dan MiniController serta sekumpulan composable bawaan bergaya Material3 seperti PlayPauseButton, SeekBackButton, PositionAndDurationText, ErrorText, dll.
Pengelolaan Status Menyediakan holder remember...State untuk mengelola logika. Mengelola status secara internal, tetapi Anda masih dapat mengakses holder status jika perlu.
Dependensi androidx.compose.foundation media3-ui-compose, androidx.compose.material3, com.google.android.material
Kasus Penggunaan Utama Membangun UI pemutar dengan sistem desain kustom. Kontrol penuh atas tampilan dan nuansa. Membangun UI pemutar dengan cepat yang mengikuti panduan Desain Material 3.