Questa pagina è stata tradotta dall'API Cloud Translation.

Personalizzazione dell'interfaccia utente di Android Sender

Puoi personalizzare i widget di trasmissione impostando i colori, lo stile dei pulsanti, l'aspetto del testo e delle miniature e scegliendo i tipi di pulsanti da visualizzare.

Personalizza il tema dell'app

In questo esempio viene creato uno stile di tema personalizzato Theme.CastVideosTheme che può definire colori personalizzati, uno stile di overlay introduttivo, uno stile mini controller e uno stile esteso per il controller.

<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 in alto consentono di definire stili specifici per overlay introduttivo, mini controller e controller espanso come parte di questo tema. Esempi sono inclusi nelle sezioni seguenti.

Personalizza pulsante Trasmetti

Per aggiungere un elemento mediaRouteTheme personalizzato al tema dell'app:

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

Dichiara il tema del tuo router multimediale personalizzato e un mediaRouteButtonStyle personalizzato:

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

Utilizza setTint se la versione della libreria di supporto è successiva alla 26.0.0. Per le versioni precedenti delle librerie di supporto, utilizza buttonTint.

Personalizza il tema in overlay introduttivo

La classe IntroductoryOverlay supporta vari attributi di stile che la tua app può sostituire in un tema personalizzato. Questo esempio mostra come sostituire l'aspetto del testo del pulsante e del titolo sul widget 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 classe MiniControllerFragment supporta vari attributi di stile che la tua app può sostituire in un tema personalizzato. Questo esempio mostra come attivare la visualizzazione dell'immagine in miniatura, di sostituire l'aspetto del testo del sottotitolo e dei sottotitoli codificati, di impostare i colori e personalizzare 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 elemento MiniControllerFragment ha tre spazi in cui è possibile visualizzare la copertina dell'album e due pulsanti oppure tre pulsanti di controllo se la copertina dell'album non è piena.

SLOT  SLOT  SLOT
  1     2     3

Per impostazione predefinita, il frammento mostra un pulsante di attivazione/disattivazione riproduzione/pausa. Gli sviluppatori possono utilizzare l'attributo castControlButtons per eseguire l'override dei pulsanti da mostrare. I pulsanti di controllo supportati sono definiti come risorse ID:

Tipo pulsante	Descrizione
`@id/cast_button_type_empty`	Non inserire un pulsante in questo slot
`@id/cast_button_type_custom`	Pulsante personalizzato
`@id/cast_button_type_play_pause_toggle`	Alterna riproduzione e pausa
`@id/cast_button_type_skip_previous`	Salta 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`	Consente di mandare avanti la riproduzione di 30 secondi
`@id/cast_button_type_mute_toggle`	Viene disattivato e riattivato l'audio del destinatario
`@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 per riprodurre/mettere in pausa e un pulsante per andare avanti in questo ordine:

<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 verrà generata un'eccezione di runtime. Se non vuoi mostrare un pulsante in uno slot, utilizza @id/cast_button_type_empty.

Aggiungere pulsanti personalizzati

Un elemento MiniControllerFragment supporta l'aggiunta di pulsanti di controllo personalizzati non forniti dall'SDK, ad esempio un pulsante "Alza il pollice". I passaggi sono:

Specifica uno slot che conterrà un pulsante personalizzato utilizzando @id/cast_button_type_custom nell'attributo castControlButtons di MiniControllerFragment.
Implementa una sottoclasse di UIController. UIController contiene metodi che vengono chiamati dall'SDK quando lo stato della sessione di trasmissione o della sessione multimediale cambia. La tua sottoclasse UIController deve utilizzare ImageView come parametro e aggiornarne lo stato in base alle esigenze.
Sottoclasse MiniControllerFragment, poi sostituisci onCreateView e chiama getButtonImageViewAt(int) per visualizzare ImageView il pulsante personalizzato. Quindi chiama bindViewToUIController(View, UIController) per associare la vista alla tua UIController personalizzata.
Consulta la sezione MediaIntentReceiver alla pagina Aggiungere azioni personalizzate per sapere come gestire l'azione dal pulsante personalizzato.

Ecco un esempio di associazione di un pulsante nello slot 2 a una UIController denominata 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>

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

Personalizza 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 immagini personalizzate da utilizzare 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

La sezione Attività del controller espanso ha cinque spazi per mostrare i pulsanti di controllo. Lo slot centrale mostra sempre un pulsante di attivazione/disattivazione della riproduzione e della pausa e non è configurabile. Gli altri quattro 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 codificati, un pulsante per passare all'elemento precedente, un pulsante per passare all'elemento successivo e un pulsante di attivazione/disattivazione per disattivare l'audio in queste quattro aree, da sinistra a destra. Gli sviluppatori possono utilizzare l'attributo castControlButtons per eseguire l'override dei pulsanti da mostrare in quali slot. L'elenco dei pulsanti di controllo supportati è definito come risorse ID identiche ai tipi di pulsanti per i pulsanti del mini controller.

Ecco un esempio di pulsante per riavvolgere nel secondo slot, pulsante Salta in avanti nel terzo slot e lasciare vuoti il primo e l'ultimo slot:

// 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à generata un'eccezione di runtime. Se non vuoi mostrare un pulsante in uno slot, utilizza @id/cast_button_type_empty. CastContext può gestire il ciclo di vita e la presentazione di questa attività.

Aggiungere pulsanti personalizzati

Una ExpandedControllerActivity supporta l'aggiunta di pulsanti di controllo personalizzati non forniti dall'SDK, ad esempio un pulsante "Non mi piace". I passaggi sono:

Specifica uno slot che conterrà un pulsante personalizzato utilizzando @id/cast_button_type_custom nell'attributo castControlButtons di ExpandedControllerActivity. Puoi quindi utilizzare getButtonImageViewAt(int) per ottenere ImageView per il pulsante personalizzato.
Implementa una sottoclasse di UIController. UIController contiene metodi che vengono chiamati dall'SDK quando lo stato della sessione di trasmissione o della sessione multimediale cambia. La tua sottoclasse UIController deve utilizzare ImageView come parametro e aggiornarne lo stato in base alle esigenze.
Esegui una sottoclasse EspansioneControllerActivity, quindi esegui l'override di onCreate e chiama getButtonImageViewAt(int) per ottenere l'oggetto di visualizzazione del pulsante. Quindi chiama bindViewToUIController(View, UIController) per associare la vista al tuo UIController personalizzato.
Consulta la pagina MediaIntentReceiver alla pagina Aggiungere azioni personalizzate per sapere come gestire l'azione dal pulsante personalizzato.

Ecco un esempio di associazione di un pulsante nello slot 2 a una UIController denominata 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>

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

Indietro

Integra Google Cast

Avanti

Automatizza test di interfaccia utente