میتوانید ابزارههای Cast را با تنظیم رنگها، سبکدهی به دکمهها، نوشتار، و ظاهر ریزعکس، و با انتخاب انواع دکمهها برای نمایش سفارشیسازی کنید.
سفارشیسازی کردن زمینه برنامه
این نمونه یک سبک زمینه سفارشی 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
باید استفاده شود اگر نسخه کتابخانه پشتیبانی جدیدتر از ۲۶.۰.۰ باشد. برای نسخههای قدیمیتر کتابخانه پشتیبانی، لطفاً بهجای آن از 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 |
بازپخش را ۳۰ ثانیه به عقب میبرد |
@id/cast_button_type_forward_30_seconds |
بازپخش را ۳۰ ثانیه به جلو میبرد |
@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 از افزودن دکمههای کنترل سفارشی که توسط کیت توسعه نرمافزار ارائه نمیشوند، مانند دکمه «پسندیدن»، پشتیبانی میکند. مراحل عبارتاند از:
جایگاهی را برای قرار دادن دکمه سفارشی بااستفاده از
@id/cast_button_type_customدر مشخصهcastControlButtonsازMiniControllerFragmentمشخص کنید.زیرکلاسی از
UIControllerرا پیادهسازی کنید.UIControllerحاوی روشهایی است که وقتی وضعیت جلسه ارسال محتوا یا جلسه رسانه تغییر میکند، توسط کیت توسعه نرمافزار فراخوانی میشوند. زیرکلاسUIControllerشما بایدImageViewرا بهعنوان یکی از پارامترها درنظر بگیرد و وضعیت آن را درصورت نیاز بهروز کند.زیرکلاس
MiniControllerFragment، سپس لغوonCreateViewو تماسgetButtonImageViewAt(int)برای دریافتImageViewبرای آن دکمه سفارشی. سپسbindViewToUIController(View, UIController)را فراخوانی کنید تا نما را باUIControllerسفارشیتان مرتبط کنید.برای نحوه مدیریت کنش از دکمه سفارشی،
MediaIntentReceiverرا در افزودن کنشهای سفارشی ببینید.در اینجا مثالی از مرتبط کردن دکمهای در جایگاه ۲ به
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 از افزودن دکمههای کنترل سفارشی که توسط کیت توسعه نرمافزار ارائه نمیشوند،
مانند دکمه «پسندیدن»، پشتیبانی میکند. مراحل عبارتاند از:
جایگاهی را برای قرار دادن دکمه سفارشی بااستفاده از
@id/cast_button_type_customدر مشخصهcastControlButtonsازExpandedControllerActivityمشخص کنید. سپس میتوانید ازgetButtonImageViewAt(int)برای دریافتImageViewبرای آن دکمه سفارشی استفاده کنید.زیرکلاسی از
UIControllerرا پیادهسازی کنید.UIControllerحاوی روشهایی است که وقتی وضعیت جلسه ارسال محتوا یا جلسه رسانه تغییر میکند، توسط کیت توسعه نرمافزار فراخوانده میشوند. زیرکلاس شما ازUIControllerبایدImageViewرا بهعنوان یکی از پارامترها بگیرد، و وضعیت آن را درصورت نیاز بهروز کند.Subclass ExpandedControllerActivity, then override
onCreateand callgetButtonImageViewAt(int)to get the view object of the button. سپسbindViewToUIController(View, UIController)را فراخوانی کنید تا نما را باUIControllerسفارشیتان مرتبط کنید.برای نحوه مدیریت کنش از دکمه سفارشی،
MediaIntentReceiverرا در افزودن کنشهای سفارشی ببینید.
در اینجا مثالی از مرتبط کردن دکمهای در جایگاه ۲ به
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); ... } }