Renkleri ayarlayarak, düğmelerin, metnin ve küçük resim görünümünün stilini ayarlayarak ve görüntülenecek düğme türlerini seçerek Yayınlama widget'larını özelleştirebilirsiniz.
Uygulama temasını özelleştirin
Bu örnekte; özel renkler, tanıtım yer paylaşımı stili, mini kumanda stili ve genişletilmiş kumanda stili tanımlanabilen özel bir tema stili Theme.CastVideosTheme
oluşturulmaktadır.
<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>
Yukarıdaki son üç satır, bu temanın bir parçası olarak giriş yer paylaşımı, mini kumanda ve genişletilmiş denetleyiciye özel stiller tanımlamanızı sağlar. Örnekler sonraki bölümlerde yer almaktadır.
Yayınla Düğmesini Özelleştir
Uygulamanızın Temasına özel bir mediaRouteTheme
eklemek için:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ... -->
<item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>
Özel Medya Yönlendirici temanızı ve özel bir mediaRouteButtonStyle
bildirin:
<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
, destek kitaplığı sürümü 26.0.0'dan yeniyse kullanılmalıdır. Daha eski destek kitaplığı sürümleri için lütfen bunun yerine buttonTint
kullanın.
Tanıtım Yer Paylaşımı Temasını Özelleştir
IntroductoryOverlay
sınıfı, uygulamanızın özel bir temada geçersiz kılabileceği çeşitli stil özelliklerini destekler. Bu örnekte, yer paylaşımı widget'ı üzerinde hem düğme hem de başlığın metin görünümünün nasıl geçersiz kılınacağı gösterilmektedir:
<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>
Mini kumandayı özelleştir
Temayı özelleştirin
MiniControllerFragment
sınıfı, uygulamanızın özel bir temada geçersiz kılabileceği çeşitli stil özelliklerini destekler. Bu örnekte, hem alt başlığın hem de altyazının metin görünümünü geçersiz kılmak, renkleri ayarlamak ve düğmeleri özelleştirmek için küçük resim görüntüsünün nasıl etkinleştirileceği gösterilmektedir:
<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>
Düğmeleri seçin
Bir MiniControllerFragment
, albüm kapağını gösterebilen üç alana ve iki düğmeye veya albüm kapağı doldurulmamışsa üç kontrol düğmesine sahiptir.
SLOT SLOT SLOT
1 2 3
Varsayılan olarak parçada bir oynat/duraklat açma/kapatma düğmesi gösterilir. Geliştiriciler, gösterilecek düğmeleri geçersiz kılmak için castControlButtons
özelliğini kullanabilir.
Desteklenen kontrol düğmeleri, kimlik kaynakları olarak tanımlanır:
Düğme Türü | Açıklama |
---|---|
@id/cast_button_type_empty |
Bu yuvaya düğme yerleştirmeyin |
@id/cast_button_type_custom |
Özel düğme |
@id/cast_button_type_play_pause_toggle |
Çalma ve duraklatma arasında geçiş yapar |
@id/cast_button_type_skip_previous |
Sıradaki öğeye atlar |
@id/cast_button_type_skip_next |
Sıradaki öğeye atlar |
@id/cast_button_type_rewind_30_seconds |
Oynatmayı 30 saniye geri sarar |
@id/cast_button_type_forward_30_seconds |
Oynatmayı 30 saniye ileri atlar |
@id/cast_button_type_mute_toggle |
Alıcının sesini kapatır ve açar |
@id/cast_button_type_closed_caption |
Metin ve ses parçalarını seçmek için bir iletişim kutusu açar |
Albüm kapağının, oynatma/duraklatma açma/kapatma düğmesi ve soldan sağa doğru sırayla bir ileri atla düğmesinin kullanıldığı bir örneği aşağıda görebilirsiniz:
<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">
Uyarı: Bu dizi tam olarak üç öğe içermelidir. Aksi takdirde, bir çalışma zamanı istisnası yayınlanır. Bir alanda düğme göstermek istemiyorsanız @id/cast_button_type_empty
öğesini kullanın.
Özel düğme ekleyin
MiniControllerFragment
, "beğen" düğmesi gibi SDK tarafından sağlanmayan özel kontrol düğmelerinin eklenmesini destekler. Adımlar aşağıdaki gibidr:
MiniControllerFragment
öğesinincastControlButtons
özelliğinde@id/cast_button_type_custom
kullanarak özel düğme içerecek bir alan belirtin.Bir
UIController
alt sınıfını uygulayın.UIController
, yayın oturumunun veya medya oturumunun durumu değiştiğinde SDK tarafından çağrılan yöntemler içerir.UIController
alt sınıfınız, parametrelerden biri olarak birImageView
parametresi almalı ve durumunu gerektiğinde güncellemelidir.MiniControllerFragment
alt sınıfını seçin, ardındanonCreateView
öğesini geçersiz kılın ve bu özel düğme içinImageView
değerini almak üzeregetButtonImageViewAt(int)
çağrısı yapın. Ardından, görünümü özelUIController
öğesiyle ilişkilendirmek içinbindViewToUIController(View, UIController)
numaralı telefonu arayın.İşlemi özel düğmenizden nasıl gerçekleştireceğinizi öğrenmek için Özel İşlemler Ekleme başlıklı
MediaIntentReceiver
bölümüne bakın.Alan 2'deki bir düğmeyi
MyCustomUIController
adlı birUIController
ile ilişkilendirme örneğini burada bulabilirsiniz:
// 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); ... } }
Genişletilmiş denetleyiciyi özelleştirin
Temayı özelleştirin
Genişletilmiş kumandanın Etkinlik'inde koyu tema araç çubuğu kullanılıyorsa araç çubuğunda açık metin ve açık simge rengi kullanmak için bir tema ayarlayabilirsiniz:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="castExpandedControllerToolbarStyle">
@style/ThemeOverlay.AppCompat.Dark.ActionBar
</item>
</style>
Genişletilmiş kumandadaki düğmeleri çizmek için kullanılan kendi resimlerinizi belirtebilirsiniz:
<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>
Düğmeleri seçin
Genişletilmiş kumandanın Etkinlik bölümünde kontrol düğmelerini göstermek için beş yuva vardır. Ortadaki alan her zaman bir oynat/duraklat düğmesi gösterir ve yapılandırılamaz. Diğer dört alan, gönderen uygulaması tarafından soldan sağa doğru yapılandırılabilir.
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
Varsayılan olarak Etkinlik'te bir altyazı düğmesi, önceki öğeye atlama, sonraki öğeye atlama düğmesi ve bu dört yuvada soldan sağa doğru açma/kapatma düğmesi gösterilir. Geliştiriciler, hangi düğmelerin hangi alanlarda gösterileceğini geçersiz kılmak için castControlButtons
özelliğini kullanabilir. Desteklenen kontrol düğmelerinin listesi, mini kumanda düğmelerinin düğme türleriyle aynı olan kimlik kaynakları olarak tanımlanır.
İkinci yuvaya bir geri sarma düğmesi, üçüncü yuvaya bir ileri atla düğmesi yerleştiren ve birinci ve son yuvaların boş bırakıldığı bir örneği aşağıda görebilirsiniz:
// 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>
Dizi tam olarak dört öğe içermelidir. Aksi takdirde, bir çalışma zamanı istisnası yayınlanır. Bir alanda düğme göstermek istemiyorsanız @id/cast_button_type_empty
öğesini kullanın. CastContext
, bu etkinliğin yaşam döngüsünü
ve sunumunu yönetebilir.
Özel düğme ekleyin
ExpandedControllerActivity
, SDK tarafından sağlanmayan özel kontrol düğmelerinin (ör. "beğen" düğmesi) eklenmesini destekler. Adımlar aşağıdaki gibidr:
ExpandedControllerActivity
öğesinincastControlButtons
özelliğinde@id/cast_button_type_custom
kullanarak özel düğme içerecek bir alan belirtin. Ardından bu özel düğme içinImageView
'i almak üzeregetButtonImageViewAt(int)
aracını kullanabilirsiniz.Bir
UIController
alt sınıfını uygulayın.UIController
, yayın oturumunun veya medya oturumunun durumu değiştiğinde SDK tarafından çağrılan yöntemleri içerir.UIController
alt sınıfınız, parametrelerden biri olarakImageView
alıp durumunu gerektiğinde güncellemelidir.GenişletilmişControllerActivity alt sınıfını kullanın, ardından düğmenin görünüm nesnesini almak için
onCreate
öğesini geçersiz kılın vegetButtonImageViewAt(int)
çağrısı yapın. Ardından, görünümü özelUIController
ile ilişkilendirmek içinbindViewToUIController(View, UIController)
numaralı telefonu arayın.Bu işlemi özel düğmenizden nasıl gerçekleştireceğinizi öğrenmek için Özel İşlemler Ekleme sayfasındaki
MediaIntentReceiver
bölümüne bakın.
Alan 2'deki bir düğmeyi MyCustomUIController
adlı bir UIController
ile ilişkilendirme örneğini burada bulabilirsiniz:
// 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); ... } }