เริ่มต้นใช้งาน 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.10.0")
implementation("androidx.media3:media3-ui-compose-material3:1.10.0")

Groovy

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

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

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

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

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

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

ฟีเจอร์ media3-ui-compose media3-ui-compose-material3
คอมโพเนนต์ UI องค์ประกอบพื้นฐาน เช่น PlayerSurface และ ContentFrame แต่ไม่มีปุ่มหรือตัวควบคุมที่จัดรูปแบบไว้ล่วงหน้า มี Player Composable และชุด Composable ที่สร้างไว้ล่วงหน้าทั้งหมดซึ่งมีสไตล์ 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