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

Renkleri ayarlayarak, düğmelere, metne ve küçük resim görünümüne stil uygulayarak 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, giriş yer paylaşımı stili, mini kontrol cihazı stili ve genişletilmiş kontrol cihazı 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 tanıtım yer paylaşımı, mini kontrol cihazı ve genişletilmiş kontrol cihazına özel stiller tanımlamanızı sağlar. Örnekler, aşağıdaki bölümlerde verilmiştir.

Yayınlama düğmesini özelleştirme

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 Media Router 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 yeniyse setTint kullanılmalıdır. Eski destek kitaplığı sürümleri için lütfen bunun yerine buttonTint kullanın.

Giriş yer paylaşımı temasını özelleştirme

IntroductoryOverlay sınıfı, uygulamanızın özel temada geçersiz kılabileceği çeşitli stil özelliklerini destekler. Bu örnekte, yer paylaşımı widget'ının üzerindeki düğme ve 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 temada geçersiz kılabileceği çeşitli stil özelliklerini destekler. Bu örnekte, küçük resmin görüntülemesinin nasıl etkinleştirileceği, hem alt başlığın hem de altyazı metninin 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, albüm kapağını ve iki düğmeyi (albüm kapağı doldurulmamışsa üç kontrol düğmesi) gösterebilen üç yuvaya sahiptir.

SLOT  SLOT  SLOT
  1     2     3

Parça, varsayılan olarak oynatma/duraklatma düğmesi gösterir. 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 Sırada önceki öğeye atlar.
@id/cast_button_type_skip_next Sırada sonraki öğeye atlar.
@id/cast_button_type_rewind_30_seconds Oynatma işlemini 30 saniye geri sarar
@id/cast_button_type_forward_30_seconds Oynatma işlemini 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, albüm kapağı, oynatma/duraklatma düğmesi ve ileri atlama düğmesini soldan sağa doğru bu sırayla 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 bir çalışma zamanı istisnası atılır. 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 eklenmesi (ör. "beğen" düğmesi) için kullanılır. Adımlar aşağıdaki gibidr:

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

  2. UIController alt sınıfını uygulayın. UIController, yayınlama 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 bir ImageView almalıdır ve durumunu gerektiği gibi güncellemelidir.

  3. MiniControllerFragment alt sınıfını oluşturun, ardından onCreateView'i geçersiz kılın ve söz konusu özel düğmenin ImageView değerini almak için getButtonImageViewAt(int)'ı çağırın. Ardından, görünümü özel UIController ile ilişkilendirmek için bindViewToUIController(View, UIController) işlevini çağırın.

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

    2. yuvada bulunan bir düğmenin MyCustomUIController adlı bir UIController ile ilişkilendirilmesini gösteren örnek:

// 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 temalı bir araç çubuğu kullanıyorsa araç çubuğunda açık metin ve açık simge rengi kullanacak şekilde bir tema ayarlayabilirsiniz:

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

Genişletilmiş kontrol cihazındaki düğmeleri çizmek için 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 Etkinliği'nde, kontrol düğmelerini göstermek için beş yuva bulunur. Ortadaki yuva her zaman oynatma/duraklatma düğmesi gösterir ve yapılandırılabilir değildir. Diğer dört yuva, 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

Etkinlik'te varsayılan olarak soldan sağa doğru altyazı düğmesi, önceki öğeye atlama düğmesi, sonraki öğeye atlama düğmesi ve sessize alma açma/kapatma düğmesi gösterilir. Geliştiriciler, hangi düğmelerin hangi slotlarda gösterileceğini geçersiz kılmak için castControlButtons özelliğini kullanabilir. Desteklenen kontrol düğmelerinin listesi, mini kontrol düğmelerinin düğme türleriyle aynı kimlik kaynakları olarak tanımlanır.

Aşağıda, ikinci yuvaya geri sar düğmesi, üçüncü yuvaya ileri atlama düğmesi yerleştirilen ve ilk ile son yuvalar boş bırakılan 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_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 @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 eklenmesi (ör. "beğen" düğmesi) için kullanılır. Adımlar aşağıdaki gibidr:

  1. ExpandedControllerActivity öğesinin castControlButtons özelliğinde @id/cast_button_type_custom kullanarak özel bir düğme içeren bir yuva belirtin. Ardından, bu özel düğmenin ImageView değerini almak için getButtonImageViewAt(int) değerini kullanabilirsiniz.

  2. UIController alt sınıfını uygulayın. UIController, yayınlama 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 bir ImageView almalıdır ve durumunu gerektiği gibi güncellemelidir.

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

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

2. yuvada bulunan bir düğmenin MyCustomUIController adlı bir UIController ile ilişkilendirilmesini gösteren ö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