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

เพิ่มการอ้างอิง

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

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"

เราขอแนะนำให้คุณพัฒนาแอปในลักษณะ Compose-first หรือย้ายข้อมูลจากการใช้ 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) ที่แปลงสถานะ Player เป็นสถานะ UI

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

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

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

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

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