میتوانید ابزارههای 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 از افزودن دکمههای کنترل سفارشی که توسط SDK ارائه نمیشوند، مانند دکمه «پسندیدن» پشتیبانی میکند. مراحل به این صورت است:
جایگاهی را برای نگهداری دکمه سفارشی بااستفاده از
@id/cast_button_type_customدر مشخصهcastControlButtonsازExpandedControllerActivityمشخص کنید. سپس میتوانید ازgetButtonImageViewAt(int)برای دریافتImageViewبرای آن دکمه سفارشی استفاده کنید.زیرکلاسی از
UIControllerرا پیادهسازی کنید. UIControllerحاوی روشهایی است که وقتی وضعیت جلسه پخش محتوا یا جلسه رسانه تغییر میکند، کیت توسعه نرمافزار آنها را فرا میخواند. زیرکلاس شما ازUIControllerبایدImageViewرا بهعنوان یکی از پارامترها بگیرد، و وضعیت خود را درصورت نیاز بهروز کند.زیرکلاس ExpandedControllerActivity، سپس لغو
onCreateو تماسgetButtonImageViewAt(int)برای دریافت شیء نمای دکمه. سپس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); ... } }