เริ่มต้นใช้งาน UI ที่ใช้ Compose

เพิ่มทรัพยากร Dependency

ไลบรารี Media3 มีโมดูล UI 2 โมดูลที่อิงตาม Jetpack Compose คุณไม่จำเป็นต้องเพิ่มทั้ง 2 รายการเนื่องจาก Material3 ขึ้นอยู่กับรายการหลัก

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

ดึงดูด

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

เราขอแนะนำอย่างยิ่งให้คุณพัฒนาแอปในลักษณะที่ใช้ Compose เป็นอันดับแรกหรือย้ายข้อมูลจากการใช้ View

แอปเดโมที่เขียนด้วย Compose ทั้งหมด

แม้ว่าmedia3-ui-composeคลังจะไม่มี Composable ที่พร้อมใช้งาน (เช่น ปุ่ม ตัวบ่งชี้ รูปภาพ หรือกล่องโต้ตอบ) แต่คุณจะเห็นแอปเดโม ที่เขียนด้วย Compose ทั้งหมดซึ่งหลีกเลี่ยงโซลูชันการทำงานร่วมกัน เช่น การห่อ PlayerView ใน AndroidView แอปเดโมใช้คลาสตัวยึดสถานะ UI จากโมดูล media3-ui-compose และไลบรารี Compose Material3

ฉันต้องใช้ไลบรารีใด

คุณเลือกได้ระหว่างไลบรารี Media3 Compose 2 รายการ ทั้งนี้ขึ้นอยู่กับระดับการปรับแต่งที่คุณต้องการ หากต้องการทำความเข้าใจความแตกต่าง ให้ลองพิจารณาไปป์ไลน์การสร้างสถานะ UI: Business logic → UI logic → UI

ใช้ media3-ui-compose เพื่อควบคุมคอมโพเนนต์ UI ได้อย่างเต็มที่

ห้องสมุดนี้มีการเชื่อมต่อ Business logic → UI logic ซึ่งประกอบด้วยคอมโพเนนต์พื้นฐาน เช่น PlayerSurface และ ContentFrame รวมถึงคลาสตัวเก็บสถานะ (เช่น PlayPauseButtonState, CurrentMediaItemState, PlaylistState, ErrorState) ที่แปลงสถานะ Player เป็นสถานะ UI

ไลบรารีนี้ไม่มีคอมโพเนนต์ Material Design ที่พร้อมใช้งาน คุณมีหน้าที่รับผิดชอบในการสร้างคอมโพเนนต์ UI ของคุณเองและจัดรูปแบบ ซึ่งช่วยให้คุณควบคุมรูปลักษณ์และสไตล์ได้อย่างเต็มที่ จึงเหมาะอย่างยิ่งหากคุณมีระบบการออกแบบที่กำหนดเองสูง

ใช้ media3-ui-compose-material3 เพื่อผสานรวมกับ Material Design ได้เร็วขึ้น

ไลบรารีนี้เป็นส่วนUIสุดท้ายของไปป์ไลน์ โดยขึ้นอยู่กับ media3-ui-compose และมีฟังก์ชันที่ประกอบกันได้ที่สร้างไว้ล่วงหน้าซึ่งจัดรูปแบบด้วยคอมโพเนนต์ Material3 รวมถึงคอมโพสได้ของ Player และ MiniController Player ที่ประกอบได้มอบประสบการณ์การเล่นสื่อที่ครอบคลุม พร้อมวิดีโอ ตัวควบคุม และแถบความคืบหน้า ซึ่งคุณปรับแต่งเพิ่มเติมได้โดยใช้ PlayerDefaults Composable MiniController มี ความสามารถในการควบคุมวิดีโอเพลเยอร์ขนาดกะทัดรัดขณะแสดงข้อมูลเกี่ยวกับ รายการสื่อปัจจุบัน ซึ่งช่วยให้คุณไม่ต้องสร้างปุ่มและ องค์ประกอบ UI อื่นๆ ด้วยตนเองตั้งแต่ต้น คุณยังคงปรับแต่งธีม สี และ ไอคอนของคอมโพเนนต์เหล่านี้ได้ แต่เราจะจัดเตรียมการใช้งานหลักไว้ให้

ข้อมูลโดยย่อ

ฟีเจอร์ media3-ui-compose media3-ui-compose-material3
คอมโพเนนต์ UI องค์ประกอบพื้นฐาน เช่น PlayerSurface และ ContentFrame แต่ไม่มีปุ่มหรือตัวควบคุมที่จัดรูปแบบไว้ล่วงหน้า มี Composable Player และ MiniController รวมถึงชุด Composable ที่สร้างไว้ล่วงหน้าทั้งหมดซึ่งมีสไตล์ Material3 เช่น PlayPauseButton, SeekBackButton, PositionAndDurationText, ErrorText เป็นต้น
การจัดการสถานะ มอบสิทธิ์ให้ผู้ถือ remember...State จัดการตรรกะ จัดการสถานะภายใน แต่คุณยังคงเข้าถึงผู้ถือสถานะได้หากต้องการ
ทรัพยากร Dependency androidx.compose.foundation media3-ui-compose, androidx.compose.material3, com.google.android.material
กรณีการใช้งานหลัก การสร้าง UI ของเพลเยอร์ด้วยระบบการออกแบบที่กำหนดเอง ควบคุมรูปลักษณ์และสไตล์ได้อย่างเต็มที่ สร้าง UI ของเพลเยอร์ได้อย่างรวดเร็วตามหลักเกณฑ์ของ Material Design 3