使用傳輸控制項

使用 Compose 建構更優質的內容

使用 Jetpack Compose for Android TV OS 以最少的程式碼建立精美的 UI。

Compose for TV →

Leanback UI 工具包的播放控制項可改善使用者體驗。如果是影片應用程式，傳輸控制項支援透過向前和向後控制項播放影片。拖曳顯示畫面時 會顯示縮圖，方便觀眾瀏覽影片

程式庫包含抽象類別，以及預先建構的立即實作項目，可為開發人員提供更精細的控制選項。使用預先建構的實作項目，不必編寫太多程式碼，就能快速建構功能豐富的應用程式。如果您需要更多自訂，您可以擴充任何程式庫的預先建構元件。

控制項和播放器

Leanback UI 工具包會將傳輸控制項 UI 與播放影片的播放器區隔開來。這會透過兩個元件完成：一個用於顯示傳輸控制項 (選擇性為影片) 的播放支援片段，以及用於封裝媒體播放器的播放器轉接程式。

播放片段

應用程式的 UI 活動應使用 PlaybackSupportFragment 或 VideoSupportFragment。兩者都包含 leanback 傳輸控制項：

• PlaybackSupportFragment 可建立動畫控制項動畫，並視需要隱藏/顯示這些控制項。
• VideoSupportFragment 會擴充 PlaybackSupportFragment，且具有 SurfaceView 來算繪影片。

您可以自訂片段的 ObjectAdapter 來改善 UI。例如，使用 setAdapter() 新增「相關影片」列。

PlayerAdapter

PlayerAdapter 是控制基礎媒體播放器的抽象類別。開發人員可以選擇預先建構的 MediaPlayerAdapter 實作項目，或自行編寫這個類別的實作項目。

將這些元素凝聚在一起

您必須使用「control glue」來將播放片段連結至播放器。leanback 程式庫提供兩種黏附方式：

• PlaybackBannerControlGlue 會在播放片段中繪製「舊樣式」的傳輸控制項，將其放置在不透明背景中。(PlaybackBannerControlGlue 會取代已淘汰的 PlaybackControlGlue)。
• PlaybackTransportControlGlue 會使用透明背景的「新樣式」控制項。

如要讓應用程式支援影片拖曳功能，則必須使用 PlaybackTransportControlGlue。

您還需要指定「黏合主機」將黏合作業繫結至播放片段、在 UI 中繪製傳輸控制項並維持其狀態，並將傳輸控制項事件傳遞回黏合處。主機必須與播放片段類型相符。請將 PlaybackSupportFragmentGlueHost 與 PlaybackFragment 搭配使用，並將 VideoSupportFragmentGlueHost 與 VideoFragment 搭配使用。

下圖說明 leanback Transport 控制項各部分如何搭配運作的圖解：

會黏著應用程式的程式碼應該位於定義 UI 的 PlaybackSupportFragment 或 VideoSupportFragment 內。

在以下範例中，應用程式會建構 PlaybackTransportControlGlue 的例項，將其命名為 playerGlue，並將其 VideoSupportFragment 連結至新建立的 MediaPlayerAdapter。由於這是 VideoSupportFragment，設定程式碼會呼叫 setHost() 以將 VideoSupportFragmentGlueHost 附加至 playerGlue。程式碼會包含在擴充 VideoSupportFragment 的類別中。

class MyVideoFragment : VideoSupportFragment() {

  fun onCreate(savedInstanceState: Bundle) {
      super.onCreate(savedInstanceState)
      val playerGlue = PlaybackTransportControlGlue(getActivity(),
          MediaPlayerAdapter(getActivity()))
      playerGlue.setHost(VideoSupportFragmentGlueHost(this))
      playerGlue.addPlayerCallback(object : PlaybackGlue.PlayerCallback() {
          override fun onPreparedStateChanged(glue: PlaybackGlue) {
              if (glue.isPrepared()) {
                  playerGlue.seekProvider = MySeekProvider()
                  playerGlue.play()
              }
          }
      })
      playerGlue.setSubtitle("Leanback artist")
      playerGlue.setTitle("Leanback team at work")
      val uriPath = "android.resource://com.example.android.leanback/raw/video"
      playerGlue.getPlayerAdapter().setDataSource(Uri.parse(uriPath))
  }
}

public class MyVideoFragment extends VideoSupportFragment {

  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      final PlaybackTransportControlGlue<MediaPlayerAdapter> playerGlue =
              new PlaybackTransportControlGlue(getActivity(),
                      new MediaPlayerAdapter(getActivity()));
      playerGlue.setHost(new VideoSupportFragmentGlueHost(this));
      playerGlue.addPlayerCallback(new PlaybackGlue.PlayerCallback() {
          @Override
          public void onPreparedStateChanged(PlaybackGlue glue) {
              if (glue.isPrepared()) {
                  playerGlue.setSeekProvider(new MySeekProvider());
                  playerGlue.play();
              }
          }
      });
      playerGlue.setSubtitle("Leanback artist");
      playerGlue.setTitle("Leanback team at work");
      String uriPath = "android.resource://com.example.android.leanback/raw/video";
      playerGlue.getPlayerAdapter().setDataSource(Uri.parse(uriPath));
  }
}

請注意，設定程式碼也定義了 PlayerAdapter.Callback，用於處理媒體播放器的事件。

自訂 UI 黏合處

您可以自訂 PlaybackBannerControlGlue 和 PlaybackTransportControlGlue 來變更 PlaybackControlsRow。

自訂標題和說明

如要自訂播放控制項頂端的標題和說明，請覆寫 onCreateRowPresenter()：

override fun onCreateRowPresenter(): PlaybackRowPresenter {
    return super.onCreateRowPresenter().apply {
        (this as? PlaybackTransportRowPresenter)
                ?.setDescriptionPresenter(MyCustomDescriptionPresenter())
    }
}

@Override
protected PlaybackRowPresenter onCreateRowPresenter() {
  PlaybackTransportRowPresenter presenter = (PlaybackTransportRowPresenter) super.onCreateRowPresenter();
  presenter.setDescriptionPresenter(new MyCustomDescriptionPresenter());
  return presenter;
}

新增控制項

控制項黏合中會顯示 PlaybackControlsRow 中動作的控制項。

PlaybackControlsRow 中的動作會指派給兩個群組：「主要動作」和「次要動作」。主要群組的控制項會顯示在跳轉列上方，次要群組的控制項會顯示在跳轉列下方。一開始，播放/暫停按鈕只有一個主要動作，沒有任何次要動作。

您可以覆寫 onCreatePrimaryActions() 和 onCreateSecondaryActions()，將動作新增至主要和次要群組。

private lateinit var repeatAction: PlaybackControlsRow.RepeatAction
private lateinit var pipAction: PlaybackControlsRow.PictureInPictureAction
private lateinit var thumbsUpAction: PlaybackControlsRow.ThumbsUpAction
private lateinit var thumbsDownAction: PlaybackControlsRow.ThumbsDownAction
private lateinit var skipPreviousAction: PlaybackControlsRow.SkipPreviousAction
private lateinit var skipNextAction: PlaybackControlsRow.SkipNextAction
private lateinit var fastForwardAction: PlaybackControlsRow.FastForwardAction
private lateinit var rewindAction: PlaybackControlsRow.RewindAction

override fun onCreatePrimaryActions(primaryActionsAdapter: ArrayObjectAdapter) {
    // Order matters, super.onCreatePrimaryActions() will create the play / pause action.
    // Will display as follows:
    // play/pause, previous, rewind, fast forward, next
    //   > /||      |<        <<        >>         >|
    super.onCreatePrimaryActions(primaryActionsAdapter)
    primaryActionsAdapter.apply {
        add(skipPreviousAction)
        add(rewindAction)
        add(fastForwardAction)
        add(skipNextAction)
    }
}

override fun onCreateSecondaryActions(adapter: ArrayObjectAdapter?) {
    super.onCreateSecondaryActions(adapter)
    adapter?.apply {
        add(thumbsDownAction)
        add(thumbsUpAction)
    }
}

private PlaybackControlsRow.RepeatAction repeatAction;
private PlaybackControlsRow.PictureInPictureAction pipAction;
private PlaybackControlsRow.ThumbsUpAction thumbsUpAction;
private PlaybackControlsRow.ThumbsDownAction thumbsDownAction;
private PlaybackControlsRow.SkipPreviousAction skipPreviousAction;
private PlaybackControlsRow.SkipNextAction skipNextAction;
private PlaybackControlsRow.FastForwardAction fastForwardAction;
private PlaybackControlsRow.RewindAction rewindAction;

@Override
protected void onCreatePrimaryActions(ArrayObjectAdapter primaryActionsAdapter) {
    // Order matters, super.onCreatePrimaryActions() will create the play / pause action.
    // Will display as follows:
    // play/pause, previous, rewind, fast forward, next
    //   > /||      |<        <<        >>         >|
    super.onCreatePrimaryActions(primaryActionsAdapter);
    primaryActionsAdapter.add(skipPreviousAction);
    primaryActionsAdapter.add(rewindAction);
    primaryActionsAdapter.add(fastForwardAction);
    primaryActionsAdapter.add(skipNextAction);
}

@Override
protected void onCreateSecondaryActions(ArrayObjectAdapter adapter) {
    super.onCreateSecondaryActions(adapter);
    adapter.add(thumbsDownAction);
    adapter.add(thumbsUpAction);
}

您必須覆寫 onActionClicked() 來處理新的動作。

override fun onActionClicked(action: Action) {
    when(action) {
        rewindAction -> {
            // Handle Rewind
        }
        fastForwardAction -> {
            // Handle FastForward
        }
        thumbsDownAction -> {
            // Handle ThumbsDown
        }
        thumbsUpAction -> {
            // Handle ThumbsUp
        }
        else ->
            // The superclass handles play/pause and delegates next/previous actions to abstract methods,
            // so those two methods should be overridden rather than handling the actions here.
            super.onActionClicked(action)
    }
}

override fun next() {
    // Skip to next item in playlist.
}

override fun previous() {
    // Skip to previous item in playlist.
}

@Override
public void onActionClicked(Action action) {
    if (action == rewindAction) {
        // Handle Rewind
    } else if (action == fastForwardAction ) {
        // Handle FastForward
    } else if (action == thumbsDownAction) {
        // Handle ThumbsDown
    } else if (action == thumbsUpAction) {
        // Handle ThumbsUp
    } else {
        // The superclass handles play/pause and delegates next/previous actions to abstract methods,
        // so those two methods should be overridden rather than handling the actions here.
        super.onActionClicked(action);
    }
}

@Override
public void next() {
    // Skip to next item in playlist.
}

@Override
public void previous() {
    // Skip to previous item in playlist.
}

在特殊情況下，您可能會想實作自己的 PlaybackTransportRowPresenter 來轉譯自訂控制項，並使用 PlaybackSeekUi 回應搜尋動作。

影片拖曳

如果您的應用程式使用 VideoSupportFragment，而您想要支援影片拖曳功能。

您必須提供 PlaybackSeekDataProvider 的實作。這個元件可提供捲動時使用的影片縮圖。您必須擴充 PlaybackSeekDataProvider 來實作自己的供應器。請參閱 Leanback 展示應用程式中的範例。