بدء استخدام واجهة المستخدم المستندة إلى Compose

إضافة الاعتمادية

تتضمّن مكتبة Media3 وحدتَين لواجهة المستخدم تستندان إلى Jetpack Compose. ليس عليك إضافة كليهما لأنّ حزمة 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 أولاً أو نقل البيانات من Views.

تطبيق تجريبي لـ Compose بالكامل

على الرغم من أنّ مكتبة media3-ui-compose لا تتضمّن عناصر قابلة للإنشاء جاهزة للاستخدام (مثل الأزرار أو المؤشرات أو الصور أو مربّعات الحوار)، يمكنك العثور على تطبيق تجريبي مكتوب بالكامل بلغة Compose يتجنّب أي حلول للتوافق، مثل تضمين PlayerView في AndroidView. يستخدم التطبيق التجريبي فئات حاملة لحالة واجهة المستخدم من الوحدة media3-ui-compose ومكتبة Compose Material3.

ما هي المكتبة التي أحتاج إليها؟

استنادًا إلى مستوى التخصيص الذي تحتاجه، يمكنك الاختيار من بين مكتبتَين من مكتبات Media3 Compose. لفهم الفرق، من المفيد التفكير في مسار إعداد حالة واجهة المستخدم: Business logic → UI logic → UI.

استخدِم media3-ui-compose للتحكّم الكامل في مكوّنات واجهة المستخدم.

توفّر هذه المكتبة عملية الربط بـ Business logic → UI logic. يحتوي على مكونات أساسية، مثل PlayerSurface وContentFrame، بالإضافة إلى فئات عناصر الاحتفاظ بالحالة (مثل PlayPauseButtonState وCurrentMediaItemState وPlaylistState وErrorState) التي تحوّل حالة Player إلى حالة واجهة المستخدم.

لا توفّر هذه المكتبة مكوّنات Material Design الجاهزة للاستخدام. أنت المسؤول عن إنشاء مكوّنات واجهة المستخدم وتصميمها. تمنحك هذه الطريقة الحد الأقصى من التحكّم في المظهر العام، ما يجعلها مثالية إذا كان لديك نظام تصميم مخصّص للغاية.

استخدام media3-ui-compose-material3 لدمج أسرع مع Material Design

توفّر هذه المكتبة الجزء الأخير UI من سلسلة المعالجة. تعتمد هذه المكتبة على media3-ui-compose وتتضمّن دوالاً مركّبة مُنشأة مسبقًا ومصمَّمة باستخدام مكوّنات Material3، بما في ذلك الدالتان المركّبتان Player وMiniController. يوفّر العنصر القابل للإنشاء Player تجربة شاملة لتشغيل الوسائط تتضمّن الفيديو وعناصر التحكّم وشريط التقدّم، ويمكنك تخصيصها أكثر باستخدام PlayerDefaults. يوفر العنصر القابل للإنشاء MiniController واجهة مضغوطة للتحكّم في المشغّل مع عرض معلومات حول عنصر الوسائط الحالي. ويغنيك ذلك عن إنشاء أزرارك وعناصر واجهة المستخدم الأخرى من البداية. سيظل بإمكانك تخصيص المظهر والألوان والرموز لهذه المكوّنات، ولكن سيتم توفير التنفيذ الأساسي لك.

نظرة سريعة

الميزة media3-ui-compose media3-ui-compose-material3
مكوّنات واجهة المستخدم عناصر أساسية، مثل PlayerSurface وContentFrame، ولكن بدون أزرار أو عناصر تحكّم مُعدّة مسبقًا توفّر هذه المكتبة عناصر Player وMiniController القابلة للإنشاء ومجموعة كاملة من العناصر القابلة للإنشاء المسبقة الإنشاء والمصمّمة وفقًا لأسلوب Material3، مثل PlayPauseButton وSeekBackButton وPositionAndDurationText وErrorText وما إلى ذلك.
إدارة الحالة توفّر remember...State لحامليها لإدارة المنطق. تدير الحالة داخليًا، ولكن سيظل بإمكانك الوصول إلى عناصر الحالة إذا احتجت إلى ذلك.
الاعتمادية androidx.compose.foundation media3-ui-compose وandroidx.compose.material3 وcom.google.android.material
حالة الاستخدام الأساسية إنشاء واجهة مستخدم لمشغّل باستخدام نظام تصميم مخصّص التحكّم الكامل في المظهر العام إنشاء واجهة مستخدم مشغّل بسرعة تتّبع إرشادات Material Design 3