Puoi personalizzare i widget Google Cast. impostando i colori, personalizzando pulsanti, testo e miniatura aspetto e scegliendo i tipi di pulsanti da visualizzare.
Personalizza tema app
Questo esempio crea uno stile con tema personalizzato Theme.CastVideosTheme
che
può definire colori personalizzati, uno stile di overlay introduttivo, un mini controller
e uno stile di controller espanso.
<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>
Le ultime tre righe ti consentono di definire stili specifici per overlay introduttivo, mini controller e controller espanso nell'ambito di questo tema. Nelle sezioni che seguono sono inclusi alcuni esempi.
Personalizza pulsante Trasmetti
Per aggiungere un elemento mediaRouteTheme
personalizzato al tema della tua app:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- ... -->
<item name="mediaRouteTheme">@style/CustomMediaRouterTheme</item>
</style>
Dichiara il tuo tema Media Router e un tema personalizzato
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
se la versione della libreria di supporto è successiva alla 26.0.0. Per i vecchi
Supporta le versioni della libreria, utilizza buttonTint
.
Personalizza tema overlay introduttivo
La
IntroductoryOverlay
supporta vari attributi di stile che l'app può sostituire in una
tema. Questo esempio mostra come ignorare l'aspetto del testo di entrambi i pulsanti
e titolo sopra il widget di overlay:
<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>
Personalizza il mini controller
Personalizza tema
La
MiniControllerFragment
supporta vari attributi di stile che l'app può sostituire in una
tema. Questo esempio mostra come attivare la visualizzazione dell'immagine in miniatura, per
sostituisce l'aspetto del testo sia del sottotitolo che del sottotitolo, imposta
i colori e personalizza i pulsanti:
<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>
Scegli pulsanti
Un MiniControllerFragment
ha tre slot che possono visualizzare la copertina dell'album
e due pulsanti o tre pulsanti di controllo se la copertina dell'album non è compilata.
SLOT SLOT SLOT
1 2 3
Per impostazione predefinita, il frammento mostra un pulsante di attivazione/disattivazione Riproduci/Pausa. Gli sviluppatori possono utilizzare
l'attributo castControlButtons
per sostituire i pulsanti da mostrare.
I pulsanti di controllo supportati sono definiti come
Risorse ID:
Tipo pulsante | Descrizione |
---|---|
@id/cast_button_type_empty |
Non inserire pulsanti in questo spazio |
@id/cast_button_type_custom |
Pulsante personalizzato |
@id/cast_button_type_play_pause_toggle |
Alterna la riproduzione e la pausa |
@id/cast_button_type_skip_previous |
Passa all'elemento precedente in coda |
@id/cast_button_type_skip_next |
Passa all'elemento successivo in coda |
@id/cast_button_type_rewind_30_seconds |
Riavvolge la riproduzione di 30 secondi |
@id/cast_button_type_forward_30_seconds |
Passa avanti nella riproduzione di 30 secondi |
@id/cast_button_type_mute_toggle |
Disattiva e riattiva l'audio del ricevitore |
@id/cast_button_type_closed_caption |
Apre una finestra di dialogo per selezionare testo e tracce audio |
Ecco un esempio in cui vengono utilizzati la copertina dell'album, un pulsante di attivazione/disattivazione Riproduce/mette in pausa e un pulsante per andare avanti in quell'ordine da sinistra a destra:
<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">
Avviso: questo array deve contenere esattamente tre elementi, altrimenti un runtime
verrà generata un'eccezione. Se non vuoi mostrare un pulsante in uno spazio, utilizza
@id/cast_button_type_empty
.
Aggiungere pulsanti personalizzati
Un MiniControllerFragment
supporta l'aggiunta di pulsanti di controllo personalizzati
non forniti dall'SDK, ad esempio un . I passaggi sono:
Specifica uno spazio che contenga un pulsante personalizzato utilizzando
@id/cast_button_type_custom
nell'attributocastControlButtons
diMiniControllerFragment
.Implementare una sottoclasse
UIController
UIController
contiene metodi chiamati dall'SDK quando lo stato della sessione di trasmissione o delle modifiche alla sessione multimediale. La tua sottoclasseUIController
prendere unImageView
parametro e aggiornarne lo stato in base alle esigenze.Sottoclasse
MiniControllerFragment
, quindi sostituiscionCreateView
e chiamagetButtonImageViewAt(int)
per ottenereImageView
per quel pulsante personalizzato. Quindi chiamabindViewToUIController(View, UIController)
per associare la vista ai tuoiUIController
.Consulta:
MediaIntentReceiver
in Aggiungere azioni personalizzate per scoprire come gestire l'azione. dal pulsante personalizzato.Ecco un esempio di associazione di un pulsante nello spazio 2 a un
UIController
chiamatoMyCustomUIController
:
// 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); ... } }
Personalizza il controller espanso
Personalizza tema
Se l'Attività di un controller espanso utilizza una barra degli strumenti con tema scuro, puoi impostare un tema sulla barra degli strumenti in modo che utilizzi testo chiaro e un'icona di colore chiaro:
<style name="Theme.CastVideosTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="castExpandedControllerToolbarStyle">
@style/ThemeOverlay.AppCompat.Dark.ActionBar
</item>
</style>
Puoi specificare le tue immagini utilizzate per disegnare i pulsanti sul controller espanso:
<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>
Scegli pulsanti
L'attività del controller espanso ha cinque slot che mostrano i pulsanti di controllo. Al centro Lo slot presenta sempre un interruttore Play/Pausa e non è configurabile. Le altre quattro gli slot sono configurabili, da sinistra a destra, dall'app del mittente.
SLOT SLOT PLAY/PAUSE SLOT SLOT
1 2 BUTTON 3 4
Per impostazione predefinita, l'Attività mostra un pulsante per i sottotitoli, un passaggio
un pulsante per l'elemento precedente, un pulsante per passare all'elemento successivo e un pulsante di disattivazione audio
in queste quattro aree, da sinistra a destra. Gli sviluppatori possono utilizzare
l'attributo castControlButtons
per sostituire i pulsanti da mostrare in
quali slot. L'elenco di pulsanti di controllo supportati è definito come
di risorse ID identiche
Tipi di pulsanti per i pulsanti del mini controller.
Ecco un esempio in cui viene inserito un pulsante Indietro nel secondo spazio, nel terzo spazio, lasciando vuoti il primo e l'ultimo spazio:
// 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>
L'array deve contenere esattamente quattro elementi, altrimenti verrà
essere lanciate. Se non vuoi mostrare un pulsante in uno spazio, utilizza
@id/cast_button_type_empty
. CastContext
può gestire il ciclo di vita
presentazione di questa attività.
Aggiungere pulsanti personalizzati
Una ExpandedControllerActivity
supporta l'aggiunta di pulsanti di controllo personalizzati non forniti dall'SDK.
ad esempio "Mi piace" . I passaggi sono:
Specifica uno spazio che contenga un pulsante personalizzato utilizzando
@id/cast_button_type_custom
nell'attributocastControlButtons
diExpandedControllerActivity
. Puoi quindi utilizzaregetButtonImageViewAt(int)
per ottenereImageView
per quel pulsante personalizzato.Implementare una sottoclasse
UIController
UIController
contiene metodi che vengono chiamati dall'SDK quando lo stato della sessione di trasmissione o delle modifiche alla sessione multimediale. La sottoclasse diUIController
deve utilizzareImageView
come parametro, e aggiornarne lo stato in base alle esigenze.Sottoclasse ExpandedControllerActivity, quindi sostituisci
onCreate
e chiamagetButtonImageViewAt(int)
per ottenere l'oggetto "view" del pulsante. Quindi chiamabindViewToUIController(View, UIController)
per associare la vista al tuoUIController
personalizzato.Consulta:
MediaIntentReceiver
in Aggiungere azioni personalizzate su come gestire l'azione dal pulsante personalizzato.
Ecco un esempio di associazione di un pulsante nello spazio 2 a un
UIController
ha chiamato 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>
// 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); ... } }