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

Yayınlama widget'larını özelleştirebilirsiniz renkleri ayarlayarak, düğmelere, metne ve küçük resme stil katarak görünümlerini ve gösterilecek düğme türlerini seçebilirsiniz.

Uygulama temasını özelleştirin

Bu örnek, Theme.CastVideosTheme özel bir tema stili oluşturuyor. özel renkler, tanıtım yer paylaşımı stili, mini kumanda ve genişletilmiş denetleyici stiline sahip olursunuz.

<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, her bir kullanıcının reklam grubuna tanıtım yer paylaşımı, mini kumanda ve genişletilmiş kumanda bu tema kapsamında ele alacağız. Ö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:

<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 için kitaplık sürümlerini destekliyor, lütfen buttonTint kullanın .

Tanıtım Yer Paylaşımı Temasını Özelleştir

İlgili içeriği oluşturmak için kullanılan IntroductoryOverlay sınıfı, uygulamanızın özel bir tıklayın. Bu örnekte, her iki düğmenin metin görünümünün nasıl geçersiz kılınacağı gösterilmektedir yer paylaşımlı widget'ın üzerinde bir başlık ekleyin:

<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

İlgili içeriği oluşturmak için kullanılan MiniControllerFragment sınıfı, uygulamanızın özel bir tıklayın. Bu örnekte, küçük resmin görüntülenmesini sağlamak için hem alt başlığın hem de altyazının metin görünümünü geçersiz kılabilir, ve düğmeleri özelleştirin:

<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, albüm kapağını gösterebileceğiniz üç alana sahiptir ve iki düğme ya da albüm kapağı doldurulmamışsa üç kontrol düğmesi.

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 kullanın. Desteklenen kontrol düğmeleri şu şekilde tanımlanır: Kimlik kaynakları:

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ı, oynatma/duraklatma/kapatma düğmesini ve ve bir ileri atla düğmesi de bulunur:

<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, atlanır. Bir yuvada düğme göstermek istemiyorsanız şunu kullanın: @id/cast_button_type_empty

Özel düğme ekleyin

MiniControllerFragment, aşağıdakiler gibi özel kontrol düğmeleri eklemeyi destekler: SDK tarafından sağlanmaz (ör. "beğendim") düğmesini tıklayın. Adımlar aşağıdaki gibidr:

  1. Özel düğme içermek için aşağıdakileri kullanarak bir alan belirtin: @id/cast_button_type_custom MiniControllerFragment öğesinin castControlButtons özelliğinde yer alır.

  2. Şu alt sınıfı uygulayın: UIController. UIController, eyalet aşağıdaki durumlarda SDK tarafından çağrılan yöntemleri içerir: değişikliklerine ilişkin bir ipucu verir. UIController alt sınıfınız almalı ImageView olarak ayarlayın ve durumunu gerektiğinde güncelleyin.

  3. MiniControllerFragment alt sınıf, ardından geçersiz kılın onCreateView ve telefon et getButtonImageViewAt(int) almak için ImageView ekleyebilirsiniz. Ardından şu numarayı arayın: bindViewToUIController(View, UIController) özel görünümünüzle ilişkilendirmek için UIController.

  4. Görüntüleyin MediaIntentReceiver konusunda bilgi edinmek için Özel İşlemler Ekleme bölümüne bakın. özel düğmenizden seçebilirsiniz.

    Burada, 2. yuvadaki bir düğmeyi bir UIController adı 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>
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ştirin

Temayı özelleştirin

Genişletilmiş kumandanın Etkinliği'nde koyu tema araç çubuğu kullanılıyorsa açık renkli metin ve açık renkli 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>

Düğmeleri çizmek için kullanılacak kendi resimlerinizi belirtebilirsiniz genişletilmiş denetleyici:

<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. Orta slotu her zaman bir oynat/duraklat düğmesi gösterir ve yapılandırılamaz. Diğer dördü alanlar 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 gösterilir. önceki öğe düğmesi, sonraki öğeye atlama düğmesi ve sesi kapatma düğmesi düğmeyi soldan sağa doğru kaydırın. Geliştiriciler, gösterilecek düğmeleri geçersiz kılmak için castControlButtons özelliği otomatik olarak oluşturulur. Desteklenen kontrol düğmelerinin listesi şu şekilde tanımlanır: Kimlik kaynakları mini kumanda düğmeleri için düğme türleri.

İkinci yuvaya bir geri sarma düğmesi yerleştiren bir atlama örneği ilk ve son yuvaları boş bırakarak,

// 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ı atılır. Bir yuvada düğme göstermek istemiyorsanız şunu kullanın: @id/cast_button_type_empty CastContext, yaşam döngüsünü yönetebilir en iyi uygulamaları paylaşacağım.

Özel düğme ekleyin

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

  1. Özel düğme içermek için aşağıdakileri kullanarak bir alan belirtin: @id/cast_button_type_custom ExpandedControllerActivity öğesinin castControlButtons özelliğinde yer alır. Ardından getButtonImageViewAt(int) almak için ImageView ekleyebilirsiniz.

  2. Şu alt sınıfı uygulayın: UIController. UIController, durum aşağıdaki durumlarda SDK tarafından çağrılan yöntemleri içerir: değişikliklerine ilişkin bir ipucu verir. Şu alt sınıfınız: UIController, parametrelerden biri olarak bir ImageView almalıdır ve durumu gerektiği gibi güncelleyin.

  3. GenişletilmişControllerActivity alt sınıfı, ardından geçersiz kıl onCreate arayın getButtonImageViewAt(int) düğmenin görünüm nesnesini almak için. Ardından şu numarayı arayın: bindViewToUIController(View, UIController) kullanarak görünümü özel UIController ile ilişkilendirin.

  4. Görüntüleyin MediaIntentReceiver Add Custom Actions (Özel İşlem Ekle) sayfasında .

Burada, 2. yuvadaki bir düğmeyi bir MyCustomUIController adlı UIController:

// 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);
        ...
    }
}
Önceki
Cast'i entegre et
Sonraki
Kullanıcı Arayüzü Testlerini Otomatikleştir