UI のカスタマイズ

Media3 には、いくつかのカスタマイズ オプションを提供するデフォルトの PlayerView が用意されています。さらにカスタマイズするために、アプリ デベロッパーは独自の UI コンポーネントを実装する必要があります。

おすすめの方法

Media3 Player に接続するメディア UI（ExoPlayer、MediaController、またはカスタム Player の実装など）を実装する場合、UI のエクスペリエンスを最適化するために、アプリで以下のベスト プラクティスに従うことをおすすめします。

再生/一時停止ボタン

再生ボタンと一時停止ボタンが、各プレーヤーの状態に直接対応していません。 たとえば、再生が終了または失敗した後、プレーヤーが一時停止していない場合でも再生を再開できるようにする必要があります。

実装を簡素化するために、Media3 には、表示するボタンを決定（Util.shouldShowPlayButton）し、ボタンの押下を処理（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));

状態の更新をリッスンする

UI コンポーネントは、対応する UI の更新が必要な状態変更について通知されるように、Player.Listener を追加する必要があります。詳しくは、再生イベントをリッスンするをご覧ください。

UI を更新するとコストがかかることがあり、多くの場合、複数のプレーヤー イベントが同時に発生します。短期間に UI を過度に頻繁に更新しないようにするには、onEvents のみをリッスンし、そこから UI の更新をトリガーすることをおすすめします。

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

使用可能なコマンドを処理する

さまざまな Player 実装で動作する必要がある汎用 UI コンポーネントは、使用可能なプレーヤー コマンドを確認してボタンの表示と非表示を切り替え、サポートされていないメソッドを呼び出さないようにします。

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

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