Bắt đầu với giao diện người dùng dựa trên Compose

Thêm phần phụ thuộc

Thư viện Media3 bao gồm hai mô-đun giao diện người dùng dựa trên Jetpack Compose. Bạn không cần thêm cả hai vì Material3 phụ thuộc vào core.

// 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")

// 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"

Bạn nên phát triển ứng dụng theo hướng ưu tiên Compose hoặc di chuyển từ việc sử dụng Khung hiển thị.

Ứng dụng minh hoạ hoàn toàn bằng Compose

Mặc dù thư viện media3-ui-compose không bao gồm các thành phần kết hợp có sẵn (chẳng hạn như nút, chỉ báo, hình ảnh hoặc hộp thoại), nhưng bạn có thể tìm thấy một ứng dụng minh hoạ được viết hoàn toàn bằng Compose để tránh mọi giải pháp về khả năng tương tác như gói PlayerView trong AndroidView. Ứng dụng minh hoạ sử dụng các lớp phần tử giữ trạng thái giao diện người dùng trong mô-đun media3-ui-compose và thư viện Compose Material3.

Tôi cần thư viện nào?

Tuỳ thuộc vào mức độ tuỳ chỉnh mà bạn yêu cầu, bạn có thể chọn giữa hai thư viện Media3 Compose. Để hiểu được sự khác biệt, bạn nên xem xét quy trình tạo trạng thái giao diện người dùng: Business logic → UI logic → UI.

Sử dụng media3-ui-compose để có toàn quyền kiểm soát các thành phần giao diện người dùng.

Thư viện này cung cấp kết nối Business logic → UI logic. Thư viện này chứa các thành phần cơ bản như PlayerSurface và ContentFrame, cùng với các lớp phần tử giữ trạng thái (ví dụ: PlayPauseButtonState, CurrentMediaItemState, PlaylistState, ErrorState) chuyển đổi trạng thái Player thành trạng thái giao diện người dùng.

Thư viện này không cung cấp các thành phần Material Design có sẵn để sử dụng. Bạn chịu trách nhiệm xây dựng các thành phần giao diện người dùng của riêng mình và tạo kiểu cho chúng. Thành phần này giúp bạn kiểm soát tối đa giao diện, nên rất phù hợp nếu bạn có một hệ thống thiết kế tuỳ chỉnh cao.

Sử dụng media3-ui-compose-material3 để tích hợp nhanh hơn với Material Design.

Thư viện này cung cấp phần UI cuối cùng của quy trình. Thư viện này phụ thuộc vào media3-ui-compose và bao gồm các hàm composable được tạo sẵn, được tạo kiểu bằng các thành phần Material3, bao gồm cả các thành phần composable Player và MiniController. Thành phần kết hợp Player mang đến trải nghiệm phát nội dung nghe nhìn toàn diện với video, các nút điều khiển và thanh tiến trình. Bạn có thể tuỳ chỉnh thêm bằng PlayerDefaults. Thành phần kết hợp MiniController cung cấp một khả năng nhỏ gọn để điều khiển trình phát trong khi hiển thị thông tin về mục nội dung nghe nhìn hiện tại. Nhờ đó, bạn không cần phải tự tạo các nút và các thành phần khác trên giao diện người dùng từ đầu. Bạn vẫn có thể tuỳ chỉnh giao diện, màu sắc và biểu tượng của các thành phần này, nhưng việc triển khai cốt lõi được cung cấp cho bạn.

Xem nhanh