Personalizzazione dell'interfaccia utente di Android Sender

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 più grandi 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:

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:

1. Specifica uno spazio che contenga un pulsante personalizzato utilizzando @id/cast_button_type_custom nell'attributo castControlButtons di MiniControllerFragment.

2. 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 sottoclasse UIController prendere un ImageView parametro e aggiornarne lo stato in base alle esigenze.

3. Sottoclasse MiniControllerFragment, quindi sostituisci onCreateView e chiama getButtonImageViewAt(int) per ottenere ImageView per quel pulsante personalizzato. Quindi chiama bindViewToUIController(View, UIController) per associare la vista ai tuoi UIController.

4. 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 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
        ...
    }
}

// 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:

1. Specifica uno spazio che contenga un pulsante personalizzato utilizzando @id/cast_button_type_custom nell'attributo castControlButtons di ExpandedControllerActivity. Puoi quindi utilizzare getButtonImageViewAt(int) per ottenere ImageView per quel pulsante personalizzato.

2. 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 di UIController deve utilizzare ImageView come parametro, e aggiornarne lo stato in base alle esigenze.

3. Sottoclasse ExpandedControllerActivity, quindi sostituisci onCreate e chiama getButtonImageViewAt(int) per ottenere l'oggetto "view" del pulsante. Quindi chiama bindViewToUIController(View, UIController) per associare la vista al tuo UIController personalizzato.

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