Android Gönderen kullanıcı arayüzünü özelleştirme

Renkleri ayarlayarak, düğmeleri, metni ve küçük resim görünümünü biçimlendirerek 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ımlayabilen özel bir tema stili Theme.CastVideosTheme oluşturulur.

<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ş kumandaya özgü stiller tanımlamanızı sağlar. Örnekler, aşağıdaki bölümlerde verilmiştir.

Yayın 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 tanımlayın:

<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>

Destek kitaplığı sürümü 26.0.0'dan daha yeniyse setTint kullanılmalıdır. Eski destek kitaplığı sürümleri için bunun yerine lütfen buttonTint kullanın.

Başlangıç 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, hem düğmenin hem de başlığın metin görünümünün yer paylaşımlı widget üzerinde 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, küçük resim görüntüsünün nasıl etkinleştirileceği, hem alt başlığın hem de altyazının metin görünümünü geçersiz kılmanın, renklerin nasıl ayarlanacağını ve düğmelerin nasıl özelleştirileceğini 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

MiniControllerFragment öğesinde albüm resmini gösterebilen üç alan ve iki düğme bulunur. Albüm kapağı doldurulmamışsa üç kontrol düğmesi vardır.

SLOT  SLOT  SLOT
  1     2     3

Varsayılan olarak parçada bir oynatma/duraklatma düğmesi gösterilir. Geliştiriciler hangi düğmelerin gösterileceğini 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ştirme
@id/cast_button_type_custom Özel düğme
@id/cast_button_type_play_pause_toggle Oynatma ve duraklatma arasında geçiş yapar
@id/cast_button_type_skip_previous Sıradaki bir önceki öğ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ı seçmek için bir iletişim kutusu açar

Albüm kapağı, oynat/duraklat geçiş düğmesi ve ileri atla düğmesi soldan sağa doğru şu sırayla kullanılabilir:

<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ı verilir. Alanda düğme göstermek istemiyorsanız @id/cast_button_type_empty özelliğini kullanın.

Özel düğmeler ekleme

MiniControllerFragment, SDK tarafından sağlanmayan "beğen" düğmesi gibi özel kontrol düğmelerinin eklenmesini destekler. Adımlar aşağıdaki gibidr:

  1. MiniControllerFragment öğesinin castControlButtons özelliğinde @id/cast_button_type_custom öğesini kullanarak özel düğme içerecek bir alan belirtin.

  2. 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 olarak ImageView değerini almalı ve durumunu gerektiği gibi güncellemelidir.

  3. MiniControllerFragment alt sınıfını kullanın, ardından söz konusu özel düğme için ImageView kodunu almak üzere onCreateView alt sınıfını geçersiz kılın ve getButtonImageViewAt(int) yöntemini çağırın. Ardından, görünümü özel UIController cihazınızla ilişkilendirmek için bindViewToUIController(View, UIController) yöntemini çağırın.

  4. İşlemin özel düğmenizden nasıl işleneceğini öğrenmek için Özel İşlem Ekleme sayfasındaki MediaIntentReceiver bölümüne bakın.

    2. alandaki bir düğmeyi MyCustomUIController adlı bir UIController ile ilişkilendirmeye dair bir örneği burada 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_custom</item>
    <item>@id/cast_button_type_empty</item>
</array>
Kotlin
// 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)
        ...
    }
}
Java
// 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ştir

Temayı özelleştirin

Genişletilmiş kumandanın Etkinliğinde koyu tema araç çubuğu kullanılıyorsa açık renk metin ve açık simge rengi kullanmak için araç çubuğunda bir tema ayarlayabilirsiniz:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="castExpandedControllerToolbarStyle">
        @style/ThemeOverlay.AppCompat.Dark.ActionBar
    </item>
</style>

Genişletilmiş denetleyicideki düğmeleri çizmek için kullanılacak 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 bulunur. Orta alanda her zaman bir oynat/duraklat düğmesi gösterilir ve bu düğme yapılandırılamaz. Diğer dört slot, 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 altyazı düğmesi, önceki öğeye atlama düğmesi, sonraki öğeye atlama düğmesi ve bu dört alanda 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üğmeleri için düğme türlerine benzer kimlik kaynakları olarak tanımlanır.

İkinci yuvaya geri sarma düğmesi, üçüncü yuvaya ileri atla düğmesi yerleştiren, birinci ve son yuvanı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ı atanır. Alanda düğme göstermek istemiyorsanız @id/cast_button_type_empty özelliğini kullanın. CastContext bu etkinliğin yaşam döngüsünü ve sunumunu yönetebilir.

Özel düğmeler ekleme

ExpandedControllerActivity, SDK tarafından sağlanmayan "beğen" düğmesi gibi özel kontrol düğmelerinin eklenmesini destekler. Adımlar aşağıdaki gibidr:

  1. ExpandedControllerActivity öğesinin castControlButtons özelliğinde @id/cast_button_type_custom öğesini kullanarak özel düğme içerecek bir alan belirtin. Daha sonra, söz konusu özel düğme için ImageView kodunu edinmek için getButtonImageViewAt(int) kullanabilirsiniz.

  2. 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 olarak ImageView almalı ve durumunu gerektiği gibi güncellemelidir.

  3. ExpandedControllerActivity alt sınıfını ekleyin, ardından düğmenin görünüm nesnesini almak için onCreate değerini geçersiz kılın ve getButtonImageViewAt(int) yöntemini çağırın. Ardından, görünümü özel UIController ürününüzle ilişkilendirmek için bindViewToUIController(View, UIController) yöntemini çağırın.

  4. İşlemi özel düğmenizden nasıl işleyebileceğinizi öğrenmek için Özel İşlem Ekleme sayfasındaki MediaIntentReceiver bölümüne bakın.

2. alan adındaki bir düğmeyi MyCustomUIController adlı UIController ile ilişkilendirmeyle ilgili bir örneği burada 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_custom</item>
    <item>@id/cast_button_type_empty</item>
</array>
Kotlin
// 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)
        ...
    }
}
Java
// 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);
        ...
    }
}