يمكنك تخصيص التطبيقات المصغّرة للإرسال من خلال ضبط الألوان وتصميم الأزرار والنص ومظهر الصورة المصغّرة واختيار أنواع الأزرار التي تريد عرضها.
تخصيص مظهر التطبيق
ينشئ هذا المثال نمط مظهر مخصّص Theme.CastVideosTheme
يمكنه تحديد ألوان مخصّصة ونمط تراكب تمهيدي ونمط وحدة تحكّم مصغّرة ونمط موسّع لوحدة تحكّم.
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Set AppCompat's color theming attrs -->
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="android:textColorPrimary">@color/primary_text</item>
<item name="android:textColorSecondary">@color/secondary_text</item>
<item name="castIntroOverlayStyle">@style/CustomCastIntroOverlay</item>
<item name="castMiniControllerStyle">@style/CustomCastMiniController</item>
<item name="castExpandedControllerStyle">@style/CustomCastExpandedController</item>
</style>
تتيح لك الأسطر الثلاثة الأخيرة أعلاه تحديد أنماط خاصة بالتراكب التمهيدي ووحدة التحكم الصغيرة ووحدة التحكم الموسّعة كجزء من هذا المظهر. وقد تم إدراج أمثلة في الأقسام التي تليها.
تخصيص زر البث
لإضافة mediaRouteTheme
مخصص إلى مظهر تطبيقك:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ... -->
<item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>
تعريف المظهر المخصّص لجهاز توجيه الوسائط
mediaRouteButtonStyle
:
<style name="CustomMediaRouterTheme" parent="Theme.MediaRouter">
<item name="mediaRouteButtonStyle">@style/CustomMediaRouteButtonStyle</item>
</style>
<style name="CustomMediaRouteButtonStyle" parent="Widget.MediaRouter.Light.MediaRouteButton">
<item name="mediaRouteButtonTint">#EEFF41</item>
</style>
يجب استخدام setTint
إذا كان إصدار مكتبة الدعم أحدث من 26.0.0. بالنسبة إلى الإصدارات الأقدم من
مكتبة الدعم، يُرجى استخدام buttonTint
بدلاً من ذلك.
تخصيص مظهر التراكب التمهيدي
تتيح الفئة
IntroductoryOverlay
سمات أنماط مختلفة يمكن لتطبيقك تجاوزها في
مظهر مخصّص. يوضح هذا المثال كيفية إلغاء مظهر النص لكل من الزر والعنوان فوق أداة التراكب:
<style name="CustomCastIntroOverlay" parent="CastIntroOverlay">
<item name="castButtonTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Button</item>
<item name="castTitleTextAppearance">@style/TextAppearance.CustomCastIntroOverlay.Title</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Button" parent="android:style/TextAppearance">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="TextAppearance.CustomCastIntroOverlay.Title"parent="android:style/TextAppearance.Large">
<item name="android:textColor">#FFFFFF</item>
</style>
تخصيص وحدة تحكّم مصغّرة
تخصيص المظهر
تتيح الفئة
MiniControllerFragment
سمات أنماط مختلفة يمكن لتطبيقك تجاوزها في
مظهر مخصّص. يوضح هذا المثال كيفية تمكين عرض الصورة المصغّرة وتجاوز مظهر النص لكل من العنوان الفرعي والترجمة والشرح،
وضبط الألوان، وتخصيص الأزرار:
<style name="CustomCastMiniController" parent="CastMiniController">
<item name="castShowImageThumbnail">true</item>
<item name="castTitleTextAppearance">@style/TextAppearance.AppCompat.Subhead</item>
<item name="castSubtitleTextAppearance">@style/TextAppearance.AppCompat.Caption</item>
<item name="castBackground">#FFFFFF</item>
<item name="castProgressBarColor">#FFFFFF</item>
<item name="castPlayButtonDrawable">@drawable/cast_ic_mini_controller_play</item>
<item name="castPauseButtonDrawable">@drawable/cast_ic_mini_controller_pause</item>
<item name="castStopButtonDrawable">@drawable/cast_ic_mini_controller_stop</item>
<item name="castLargePlayButtonDrawable">@drawable/cast_ic_mini_controller_play_large</item>
<item name="castLargePauseButtonDrawable">@drawable/cast_ic_mini_controller_pause_large</item>
<item name="castLargeStopButtonDrawable">@drawable/cast_ic_mini_controller_stop_large</item>
<item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_mini_controller_skip_prev</item>
<item name="castSkipNextButtonDrawable">@drawable/cast_ic_mini_controller_skip_next</item>
<item name="castRewind30ButtonDrawable">@drawable/cast_ic_mini_controller_rewind30</item>
<item name="castForward30ButtonDrawable">@drawable/cast_ic_mini_controller_forward30</item>
<item name="castMuteToggleButtonDrawable">@drawable/cast_ic_mini_controller_mute</item>
<item name="castClosedCaptionsButtonDrawable">@drawable/cast_ic_mini_controller_closed_caption</item
</style>
اختيار الأزرار
يتضمن MiniControllerFragment
ثلاث فتحات يمكن أن تعرض صورة الألبوم
وزرينين، أو ثلاثة أزرار للتحكّم في حال عدم ملء صورة الألبوم.
SLOT SLOT SLOT
1 2 3
بشكل افتراضي، يعرض الجزء زر تبديل تشغيل/إيقاف مؤقت. ويمكن للمطوّرين استخدام السمة castControlButtons
لإلغاء الأزرار التي سيتم عرضها.
يتم تعريف أزرار التحكّم المتاحة على أنّها
موارد المعرّف:
نوع الزر | الوصف |
---|---|
@id/cast_button_type_empty |
لا تضع زرًا في هذه الفتحة |
@id/cast_button_type_custom |
الزر المخصّص |
@id/cast_button_type_play_pause_toggle |
التبديل بين التشغيل والإيقاف المؤقت |
@id/cast_button_type_skip_previous |
الانتقال إلى العنصر السابق في قائمة الانتظار |
@id/cast_button_type_skip_next |
للانتقال إلى العنصر التالي في قائمة الانتظار |
@id/cast_button_type_rewind_30_seconds |
ترجيع التشغيل بمقدار 30 ثانية |
@id/cast_button_type_forward_30_seconds |
تقديم الفيديو بمقدار 30 ثانية |
@id/cast_button_type_mute_toggle |
كتم صوت المتلقّي وإعادة صوته |
@id/cast_button_type_closed_caption |
يفتح هذا الزر مربّع حوار لاختيار النصوص والمقاطع الصوتية. |
فيما يلي مثال يستخدم صورة الألبوم، وزر تبديل التشغيل/الإيقاف المؤقت، وزر التخطي للأمام بهذا الترتيب من اليسار إلى اليمين:
<array name="cast_mini_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_play_pause_toggle</item>
<item>@id/cast_button_type_forward_30_seconds</item>
</array>
...
<fragment
android:id="@+id/cast_mini_controller"
...
app:castControlButtons="@array/cast_mini_controller_control_buttons"
class="com.google.android.gms.cast.framework.media.widget.MiniControllerFragment">
تحذير: يجب أن تحتوي هذه المصفوفة على ثلاثة عناصر بالضبط، وإلا سيتم تطبيق استثناء وقت التشغيل. إذا كنت لا تريد عرض زر في أحد الفتحات، استخدِم
@id/cast_button_type_empty
.
إضافة أزرار مخصصة
تتيح MiniControllerFragment
إضافة أزرار تحكُّم مخصّصة لا توفّرها حزمة تطوير البرامج (SDK)، مثل زر "رفع الإبهام". الخطوات كالآتي:
حدِّد خانة تحتوي على زر مخصّص باستخدام
@id/cast_button_type_custom
في السمةcastControlButtons
للسمةMiniControllerFragment
.تنفيذ فئة فرعية من
UIController
. يحتويUIController
على طُرق تستدعيها حزمة تطوير البرامج (SDK) عند تغيير حالة جلسة البث أو جلسة الوسائط. يجب أن تأخذ الفئة الفرعيةUIController
ImageView
كإحدى المَعلمات وتُعدِّل حالتها حسب الحاجة.الفئة الفرعية
MiniControllerFragment
، ثم قم بإلغاءonCreateView
واستدعِgetButtonImageViewAt(int)
للحصول علىImageView
لهذا الزر المخصّص. بعد ذلك، اطلب الرمزbindViewToUIController(View, UIController)
لربط العرض بالعناصر المخصّصةUIController
.راجِع
MediaIntentReceiver
على الرابط إضافة إجراءات مخصّصة لمعرفة كيفية التعامل مع الإجراء من الزر المخصّص.في ما يلي مثال على ربط زر في الخانة 2 بـ
UIController
يُسمىMyCustomUIController
:
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_custom</item>
<item>@id/cast_button_type_empty</item>
</array>
// MyCustomUIController.kt class MyCustomUIController(private val mView: View) : UIController() { override fun onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.visibility = View.INVISIBLE ... } } // MyMiniControllerFragment.kt class MyMiniControllerFragment : MiniControllerFragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { super.onCreateView(inflater, container, savedInstanceState) val customButtonView = getButtonImageViewAt(2) val myCustomUiController = MyCustomUIController(customButtonView) uiMediaController.bindViewToUIController(customButtonView, myCustomUiController) ... } }
// MyCustomUIController.java class MyCustomUIController extends UIController { private final View mView; public MyCustomUIController(View view) { mView = view; } @Override public onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.setVisibility(View.INVISIBLE); ... } } // MyMiniControllerFragment.java class MyMiniControllerFragment extends MiniControllerFragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { super.onCreateView(inflater, container, savedInstanceState); ImageView customButtonView = getButtonImageViewAt(2); MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView); getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController); ... } }
تخصيص وحدة التحكّم الموسّعة
تخصيص المظهر
إذا كان نشاط وحدة التحكم الموسعة يستخدم شريط أدوات مظهر داكن، فيمكنك تعيين مظهر على شريط الأدوات لاستخدام نص فاتح ولون رمز فاتح:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="castExpandedControllerToolbarStyle">
@style/ThemeOverlay.AppCompat.Dark.ActionBar
</item>
</style>
يمكنك تحديد صورك الخاصة التي تُستخدَم لرسم الأزرار على وحدة التحكّم الموسّعة:
<style name="CustomCastExpandedController" parent="CastExpandedController">
<item name="castButtonColor">@null</item>
<item name="castPlayButtonDrawable">@drawable/cast_ic_expanded_controller_play</item>
<item name="castPauseButtonDrawable">@drawable/cast_ic_expanded_controller_pause</item>
<item name="castStopButtonDrawable">@drawable/cast_ic_expanded_controller_stop</item>
<item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_expanded_controller_skip_previous</item>
<item name="castSkipNextButtonDrawable">@drawable/cast_ic_expanded_controller_skip_next</item>
<item name="castRewind30ButtonDrawable">@drawable/cast_ic_expanded_controller_rewind30</item>
<item name="castForward30ButtonDrawable">@drawable/cast_ic_expanded_controller_forward30</item>
</style>
اختيار الأزرار
يوجد في نشاط وحدة التحكم الموسعة خمس خانات لعرض أزرار التحكم. تعرض الفتحة الوسطى دائمًا زر تبديل التشغيل/الإيقاف المؤقت وهي غير قابلة للتهيئة. الخانات الأربعة الأخرى قابلة للتهيئة، من اليسار إلى اليمين، بواسطة تطبيق المرسل.
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
بشكل افتراضي، يعرض "النشاط" زر ترجمة وشرح وزر "تخطّي إلى العنصر السابق" وزر "تخطّي إلى العنصر التالي" وزر تبديل كتم الصوت في هذه الخانات الأربع، من اليسار إلى اليمين. ويمكن للمطوّرين استخدام السمة castControlButtons
لإلغاء الأزرار التي سيتم عرضها في أي خانات. قائمة أزرار التحكّم المتوافقة هي موارد معرّف تُطابق أنواع الأزرار لأزرار وحدة التحكّم المصغّرة.
فيما يلي مثال يضع زر ترجيع في الفتحة الثانية، وزر التخطي للأمام في الفتحة الثالثة، وترك الخانتين الأولى والأخيرة فارغتين:
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_forward_30_seconds</item>
<item>@id/cast_button_type_empty</item>
</array>
...
// styles.xml
<style name="Theme.MyTheme">
<item name="castExpandedControllerStyle">
@style/CustomCastExpandedController
</item>
</style>
...
<style name="CustomCastExpandedController" parent="CastExpandedController">
<item name="castControlButtons">
@array/cast_expanded_controller_control_buttons
</item>
</style>
يجب أن تحتوي الصفيفة على أربعة عناصر بالضبط، وإلا سيتم
طرح استثناء وقت التشغيل. إذا كنت لا تريد عرض زر في أحد الفتحات، استخدِم
@id/cast_button_type_empty
. يمكن لـ "CastContext
" إدارة دورة
حياة هذا النشاط وعرضه.
إضافة أزرار مخصصة
يتيح ExpandedControllerActivity
إضافة أزرار تحكُّم مخصّصة لا توفِّرها حزمة تطوير البرامج (SDK)،
مثل زر "رفع الإبهام". الخطوات كالآتي:
حدِّد خانة تحتوي على زر مخصّص باستخدام
@id/cast_button_type_custom
في السمةcastControlButtons
للسمةExpandedControllerActivity
. يمكنك بعد ذلك استخدامgetButtonImageViewAt(int)
للحصول علىImageView
لهذا الزر المخصّص.تنفيذ فئة فرعية من
UIController
. يحتويUIController
على طُرق تطلبها حزمة تطوير البرامج (SDK) عند تغيير حالة جلسة البث أو جلسة الوسائط. أمّا الفئة الفرعية للسمةUIController
، فيجب أن تأخذImageView
كإحدى المَعلمات، وأن تعدِّل حالتها حسب الحاجة.Subclass expandControllerActivity، بعد ذلك قم بإلغاء
onCreate
واطلبgetButtonImageViewAt(int)
للحصول على كائن العرض للزر. بعد ذلك، يمكنك استدعاءbindViewToUIController(View, UIController)
لربط العرض بـUIController
المخصص.راجِع
MediaIntentReceiver
على الرابط إضافة إجراءات مخصّصة لمعرفة كيفية التعامل مع الإجراء من الزر المخصّص.
في ما يلي مثال على ربط زر في الخانة 2 بـ UIController
يسمّى MyCustomUIController
:
// arrays.xml
<array name="cast_expanded_controller_control_buttons">
<item>@id/cast_button_type_empty</item>
<item>@id/cast_button_type_rewind_30_seconds</item>
<item>@id/cast_button_type_custom</item>
<item>@id/cast_button_type_empty</item>
</array>
// MyCustomUIController.kt class MyCustomUIController(private val mView: View) : UIController() { override fun onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.visibility = View.INVISIBLE ... } } // MyExpandedControllerActivity.kt internal class MyExpandedControllerActivity : ExpandedControllerActivity() { public override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val customButtonView = getButtonImageViewAt(2) val myCustomUiController = MyCustomUIController(customButtonView) uiMediaController.bindViewToUIController(customButtonView, myCustomUiController) ... } }
// MyCustomUIController.java class MyCustomUIController extends UIController { private final View mView; public MyCustomUIController(View view) { mView = view; } @Override public onMediaStatusUpdated() { // Update the state of mView based on the latest the media status. ... mView.setVisibility(View.INVISIBLE); ... } } // MyExpandedControllerActivity.java class MyExpandedControllerActivity extends ExpandedControllerActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ImageView customButtonView = getButtonImageViewAt(2); MyCustomUIController myCustomUiController = new MyCustomUIController(customButtonView); getUIMediaController().bindViewToUIController(customButtonView, myCustomUiController); ... } }