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

ดึงดูด

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

เราขอแนะนำให้คุณพัฒนาแอปในลักษณะ Compose-first หรือ ย้ายข้อมูลจากการใช้ View

แอปสาธิตที่เขียนด้วย Compose ทั้งหมด

แม้ว่าไลบรารี media3-ui-compose จะไม่มีคอมโพสได้ที่พร้อมใช้งาน (เช่น ปุ่ม ตัวบ่งชี้ รูปภาพ หรือกล่องโต้ตอบ) แต่คุณสามารถดูแอปสาธิต ที่เขียนด้วย 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 คอมโพสได้ MiniController มีฟังก์ชันขนาดกะทัดรัดสำหรับควบคุมเพลเยอร์ขณะแสดงข้อมูลเกี่ยวกับรายการสื่อปัจจุบัน จึงไม่จำเป็นต้องสร้างปุ่มและองค์ประกอบ UI อื่นๆ ด้วยตนเองตั้งแต่ต้น คุณยังคงปรับแต่งธีม สี และไอคอนของคอมโพเนนต์เหล่านี้ได้ แต่เราจะให้การใช้งานหลักแก่คุณ

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

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