میتوانید ویجتهای 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>
سه خط آخر بالا شما را قادر می سازد تا سبک های مخصوص پوشش مقدماتی، کنترلر کوچک و کنترلر گسترش یافته را به عنوان بخشی از این موضوع تعریف کنید. نمونههایی در بخشهای بعدی گنجانده شده است.
سفارشی کردن دکمه Cast
برای افزودن یک 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>
اگر نسخه کتابخانه پشتیبانی جدیدتر از 26.0.0 باشد باید از 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 تعریف می شوند:
نوع دکمه | توضیحات |
---|---|
@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
به عنوان یکی از پارامترها در نظر بگیرد و در صورت نیاز وضعیت آن را به روز کند.Subclass
MiniControllerFragment
، سپسonCreateView
لغو کنید وgetButtonImageViewAt(int)
را فراخوانی کنید تاImageView
برای آن دکمه سفارشی دریافت کنید. سپسbindViewToUIController(View, UIController)
را فراخوانی کنید تا view را باUIController
سفارشی خود مرتبط کنید.برای نحوه مدیریت عملکرد از دکمه سفارشی خود
MediaIntentReceiver
را در Add Custom Actions ببینید.در اینجا مثالی از مرتبط کردن یک دکمه در شکاف 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
به طور پیشفرض، Activity یک دکمه زیرنویس بسته، یک دکمه پرش به دکمه مورد قبلی، یک دکمه پرش به دکمه مورد بعدی، و یک دکمه تغییر صدا را در این چهار اسلات، از چپ به راست نشان میدهد. توسعهدهندگان میتوانند از ویژگی 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
حاوی متدهایی است که با تغییر وضعیت جلسه cast یا جلسه رسانه توسط SDK فراخوانی می شوند. زیرکلاسUIController
شما بایدImageView
به عنوان یکی از پارامترها در نظر بگیرد و در صورت نیاز وضعیت آن را به روز کند.Subclass ExpandedControllerActivity را انتخاب کنید، سپس
onCreate
لغو کنید وgetButtonImageViewAt(int)
را فراخوانی کنید تا شی view دکمه را دریافت کنید. سپسbindViewToUIController(View, UIController)
را فراخوانی کنید تا view را باUIController
سفارشی خود مرتبط کنید.برای نحوه مدیریت عملکرد از دکمه سفارشی خود
MediaIntentReceiver
را در Add Custom Actions ببینید.
در اینجا مثالی از مرتبط کردن یک دکمه در شکاف 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); ... } }