Personalizzazioni dell'interfaccia utente

Media3 fornisce un'PlayerView predefinita che fornisce alcune opzioni di personalizzazione. Per ogni ulteriore personalizzazione, gli sviluppatori di app devono implementare i componenti dell'interfaccia utente.

Best practice

Quando implementi un'interfaccia utente multimediale che si collega a un Player di Media3 (ad esempio ExoPlayer, MediaController o un'implementazione Player personalizzata), si consiglia alle app di seguire queste best practice per avere un'esperienza UI ottimale.

Pulsante Pausa/Riproduzione

Il pulsante di riproduzione e pausa non corrisponde direttamente a un singolo stato del player. Ad esempio, un utente deve essere in grado di riavviare la riproduzione dopo che è terminata o non è andata a buon fine, anche se il player non è in pausa.

Per semplificare l'implementazione, Media3 fornisce metodi util per decidere quale pulsante mostrare (Util.shouldShowPlayButton) e per gestire la pressione dei pulsanti (Util.handlePlayPauseButtonAction):

val shouldShowPlayButton: Boolean = Util.shouldShowPlayButton(player)
playPauseButton.setImageDrawable(if (shouldShowPlayButton) playDrawable else pauseDrawable)
playPauseButton.setOnClickListener { Util.handlePlayPauseButtonAction(player) }

boolean shouldShowPlayButton = Util.shouldShowPlayButton(player);
playPauseButton.setImageDrawable(shouldShowPlayButton ? playDrawable : pauseDrawable);
playPauseButton.setOnClickListener(view -> Util.handlePlayPauseButtonAction(player));

Ascolta gli aggiornamenti dello stato

Il componente dell'interfaccia utente deve aggiungere un elemento Player.Listener per essere informato delle modifiche di stato che richiedono un aggiornamento dell'interfaccia utente corrispondente. Per ulteriori dettagli, consulta la sezione Ascoltare eventi di riproduzione.

L'aggiornamento dell'interfaccia utente può essere costoso e spesso arrivano più eventi giocatore insieme. Per evitare di aggiornare l'interfaccia utente troppo spesso in un breve periodo di tempo, in genere è meglio ascoltare solo onEvents e attivare gli aggiornamenti dell'interfaccia utente da lì:

player.addListener(object : Player.Listener{
  override fun onEvents(player: Player, events: Player.Events){
    if (events.containsAny(
        Player.EVENT_PLAY_WHEN_READY_CHANGED,
        Player.EVENT_PLAYBACK_STATE_CHANGED,
        Player.EVENT_PLAYBACK_SUPPRESSION_REASON_CHANGED)) {
      updatePlayPauseButton()
    }
    if (events.containsAny(Player.EVENT_REPEAT_MODE_CHANGED)) {
      updateRepeatModeButton()
    }
  }
})

player.addListener(new Player.Listener() {
  @Override
  public void onEvents(Player player, Player.Events events) {
    if (events.containsAny(
        Player.EVENT_PLAY_WHEN_READY_CHANGED,
        Player.EVENT_PLAYBACK_STATE_CHANGED,
        Player.EVENT_PLAYBACK_SUPPRESSION_REASON_CHANGED)) {
      updatePlayPauseButton();
    }
    if (events.containsAny(Player.EVENT_REPEAT_MODE_CHANGED)) {
      updateRepeatModeButton();
    }
  }
});

Gestire i comandi disponibili

Un componente dell'interfaccia utente per uso generico che potrebbe dover funzionare con diverse implementazioni Player dovrebbe controllare i comandi disponibili del player per mostrare o nascondere i pulsanti ed evitare di chiamare metodi non supportati:

nextButton.isEnabled = player.isCommandAvailable(Player.COMMAND_SEEK_TO_NEXT)

nextButton.setEnabled(player.isCommandAvailable(Player.COMMAND_SEEK_TO_NEXT));