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

Renkleri ayarlayarak, düğmeleri, metni ve küçük resim görünümünü şekillendirerek ve gösterilecek düğme türlerini seçerek Yayın widget'larını özelleştirebilirsiniz.

Uygulama temasını özelleştirme

Bu örnekte, özel renkler, tanıtım amaçlı yer paylaşımı stili, mini denetleyici stili ve genişletilmiş denetleyici stili tanımlayabilen ö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 tanıtım yer paylaşımı, mini kontrolcü ve genişletilmiş kontrolcüye özel stiller tanımlamanıza olanak tanır. Örnekler, sonraki bölümlerde verilmiştir.

Yayınla düğmesini özelleştirme

Uygulamanızın temasına özel mediaRouteTheme eklemek için:

<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <!-- ... -->
  <item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>

Özel Media Router 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>

Destek kitaplığı sürümü 26.0.0'dan yeni ise setTint 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ştirme

IntroductoryOverlay sınıfı, uygulamanızın özel bir temada geçersiz kılacağı çeşitli stil özelliklerini destekler. Bu örnekte, hem düğmenin hem de yer paylaşımı widget'ındaki 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 kontrol cihazını özelleştirme

Temayı özelleştirin

MiniControllerFragment sınıfı, uygulamanızın özel bir temada geçersiz kılacağı çeşitli stil özelliklerini destekler. Bu örnekte, küçük resmin gösteriminin nasıl etkinleştirileceği, hem alt başlığın hem de altyazının metin görünümünün nasıl geçersiz kılınacağı, renklerin nasıl ayarlanacağı ve düğmelerin nasıl özelleş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

MiniControllerFragment simgesinde, albüm kapağının gösterilebileceği üç yuva ve iki düğme bulunur. Albüm kapağı doldurulmamışsa üç kontrol düğmesi gösterilir.

SLOT  SLOT  SLOT
  1     2     3

Varsayılan olarak parçacıkta oynatma/duraklatma açma/kapatma 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ştirmeyin
@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 Kuyruktaki önceki öğeye atlar.
@id/cast_button_type_skip_next Sıradaki sonraki öğ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 sarar.
@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.

Aşağıda, soldan sağa sırasıyla albüm kapak resmi, oynatma/duraklatma açma/kapatma düğmesi ve ileri atlama düğmesi kullanan bir örnek verilmiştir:

<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, çalışma zamanı istisnası oluşturulur. Bir yuvada düğme göstermek istemiyorsanız @id/cast_button_type_empty kullanın.

Özel düğmeler ekleme

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

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

  2. UIController sınıfının bir 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. Alt sınıf MiniControllerFragment, ardından onCreateView öğesini geçersiz kılın ve getButtonImageViewAt(int) öğesini çağırarak söz konusu özel düğme için ImageView öğesini alın. Ardından, görünümü özel UIController ile ilişkilendirmek için bindViewToUIController(View, UIController) numaralı telefonu arayın.

  4. Özel düğmenizdeki işlemi nasıl ele alacağınızla ilgili bilgileri MediaIntentReceiver Özel İşlemler Ekleme bölümünde bulabilirsiniz.

    Aşağıda, 2. yuvadaki bir düğmenin MyCustomUIController adlı bir UIController ile ilişkilendirilmesine ilişkin bir örnek verilmiştir:

// 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ştirme

Temayı özelleştirin

Genişletilmiş bir denetleyicinin etkinliği koyu tema araç çubuğu kullanıyorsa araç çubuğunda açık renkli metin ve açık renkli simge 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ş denetleyicinin Etkinlik bölümünde, kontrol düğmelerini göstermek için beş yuva bulunur. Ortadaki yuva her zaman oynatma/duraklatma açma/kapatma düğmesini gösterir ve yapılandırılamaz. Diğer dört yuva, gönderen uygulama tarafından soldan sağa doğru yapılandırılabilir.

SLOT  SLOT  PLAY/PAUSE  SLOT  SLOT
  1     2     BUTTON      3     4

Etkinlik, varsayılan olarak soldan sağa doğru bu dört yuvada altyazı düğmesi, önceki öğeye atla düğmesi, sonraki öğeye atla düğmesi ve sesi kapatma/açma düğmesi gösterir. Geliştiriciler, hangi yuvalarda hangi düğmelerin 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ürleriyle aynı kimlik kaynakları olarak tanımlanır.

İkinci yuvaya geri sarma düğmesi, üçüncü yuvaya ileri sarma düğmesi yerleştirilen ve ilk ile 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, çalışma zamanı istisnası oluşturulur. Bir yuvada düğme göstermek istemiyorsanız @id/cast_button_type_empty 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 özel kontrol düğmelerinin (ör. "beğen" düğmesi) eklenmesini destekler. Adımlar aşağıdaki gibidr:

  1. ExpandedControllerActivity öğesinin castControlButtons özelliğinde @id/cast_button_type_custom kullanarak özel bir düğme içerecek bir yuva belirtin. Daha sonra, bu özel düğmenin getButtonImageViewAt(int) değerini elde etmek için ImageView kullanabilirsiniz.

  2. UIController sınıfının bir 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 şekilde güncellemelidir.

  3. ExpandedControllerActivity'yi alt sınıfa ayırın, ardından onCreate'yi geçersiz kılın ve getButtonImageViewAt(int)'ı çağırarak düğmenin görünüm nesnesini alın. Ardından, görünümü özel UIController ile ilişkilendirmek için bindViewToUIController(View, UIController) numaralı telefonu arayın.

  4. Özel düğmenizdeki işlemi nasıl ele alacağınızla ilgili bilgileri MediaIntentReceiver Özel İşlemler Ekleme bölümünde bulabilirsiniz.

2. yuvadaki bir düğmenin MyCustomUIController adlı bir UIController ile ilişkilendirilmesine ilişkin örneği aşağıda 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>
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