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

Renkleri ayarlayarak, düğmelerin, metnin ve küçük resmin görünümünü biçimlendirerek ve gösterilecek düğme türlerini seçerek Yayın widget'larını özelleştirebilirsiniz.

Uygulama temasını özelleştirin

Bu örnek; ö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şturur.

<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 özel stiller tanımlamanızı sağlar. Sonraki bölümlerde bu örneklere örnekler verilmiştir.

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önlendiricisi temanızı beyan edin ve bir özel 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 yeniyse setTint kullanılmalıdır. Eski destek kitaplığı sürümleri için lütfen buttonTint değerini kullanın.

Tanıtım Amaçlı 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'ının üzerinde hem düğmenin hem de başlığın metin görünümünü nasıl geçersiz kılacağınız 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 resmin görüntülenmesini nasıl etkinleştireceğiniz 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üğme seçin

Bir MiniControllerFragment, albüm resmini gösterebilen üç yuvaya ve iki albüm düğmesi doldurulmadıysa üç kontrol düğmesine sahiptir.

SLOT  SLOT  SLOT
  1     2     3

Parça varsayılan olarak oynatma/duraklatma açma/kapatma düğmesini 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:

Albüm kapağını, oynatma/duraklatma açma/kapatma düğmesini ve soldan sağa doğru sırayla ileri sarma düğmesini kullanmak için bir örnek aşağıda 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. Alanda bir 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ğenme" düğmesi gibi özel kontrol düğmeleri eklemeyi destekler. Adımlar aşağıdaki gibidr:

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

2. Bir UIController alt sınıfı 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ı ve durumunu gerektiği şekilde güncellemelidir.

3. Alt sınıfı MiniControllerFragment belirleyin, ardından onCreateView öğesini geçersiz kılın ve özel düğme için ImageView almak amacıyla getButtonImageViewAt(int) çağırın. Daha sonra, görünümü özel UIController ile ilişkilendirmek için bindViewToUIController(View, UIController) yöntemini çağırın.

4. Özel düğmenizden işlemin nasıl yapılacağını öğrenmek için Özel İşlemler Ekleme bölümüne MediaIntentReceiver bakın.

   2. yuvadaki bir düğmenin MyCustomUIController adlı UIController ile ilişkilendirilmesiyle 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>

// 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ş kumandayı özelleştirin

Temayı özelleştirin

Genişletilmiş bir denetleyicinin Etkinliği koyu bir tema araç çubuğu kullanı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ı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üğme seçin

Genişletilmiş kumandanın etkinliğinde kontrol düğmelerinin gösterildiği beş alan vardır. Ortadaki alanda her zaman bir oynat/duraklat düğmesi gösterilir ve 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 bir altyazı düğmesi, önceki öğe düğmesine atla, sonraki öğe düğmesine atla ve bu dört alanda soldan sağa bir açma/kapatma düğmesi gösterilir. Geliştiriciler, hangi alanlarda hangi düğmelerin gösterileceğini geçersiz kılmak için castControlButtons özelliğini kullanabilir. Desteklenen kontrol düğmeleri listesi, mini kumanda düğmeleri için düğme türleri ile aynı kimlik kaynakları olarak tanımlanır.

Aşağıda, ikinci alana geri sarma düğmesi, üçüncü alana ileri sarma düğmesi ve ilk ile son yuvaları boş bırakan 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>

Dizide tam olarak dört öğe bulunmalıdır. Aksi takdirde, bir çalışma zamanı istisnası atılır. Alanda bir 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 "kontrol" 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 bir düğme içerecek bir alan belirtin. Daha sonra, bu özel düğme için ImageView değerini almak üzere getButtonImageViewAt(int) kullanılabilir.

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

3. Genişletilmiş Genişletilmiş ControllerActivity alt sınıfını değiştirin, ardından düğmenin görüntüleme 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 cihazınızla ilişkilendirmek için bindViewToUIController(View, UIController) yöntemini çağırın.

4. Özel düğmenizdeki işlemi nasıl gerçekleştireceğinizi öğrenmek için Özel İşlemler Ekleme bölümüne MediaIntentReceiver bakın.

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

// 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);
        ...
    }
}