Leanback UI 工具包的播放控制項可改善 使用者體驗就影片應用程式而言,傳輸控制項支援影片拖曳功能 方便查看搜尋結果拖曳顯示畫面時 方便他們瀏覽影片
程式庫提供抽象類別,以及預先建構的立即實作項目 可為開發人員提供更多精細的控制選項使用預先建構的 不必花費太多程式碼,就能快速建構功能豐富的應用程式。 如果您需要更多自訂,可以擴充任何預先建構的程式庫 元件。
控制項和播放器
Leanback UI 工具包將傳輸控制項 UI 與 播放影片的播放器。這會透過兩個元件完成: 用於顯示傳輸控制項的播放支援片段 (以及 影片) 和播放器轉接程式來封裝媒體播放器。
播放片段
應用程式的 UI 活動應使用
PlaybackSupportFragment
或
VideoSupportFragment
。
兩者都包含 leanback 傳輸控制項:
PlaybackSupportFragment
可建立動畫控制項動畫,並視需要隱藏/顯示這些控制項。VideoSupportFragment
會擴充PlaybackSupportFragment
,且具有SurfaceView
來算繪影片。
您可以自訂片段的
ObjectAdapter
強化 UI舉例來說,請使用
setAdapter()
新增「相關影片」列。
PlayerAdapter
PlayerAdapter
是一種抽象類別,會用來
控制基礎媒體播放器開發人員可以選擇
預先建立的 MediaPlayerAdapter
實作,或寫入
自己的程式碼實作方式
將這些元素凝聚在一起
你必須使用「控制黏膠」連結播放片段 傳遞到播放器中極致時尚 程式庫提供兩種黏附方式:
PlaybackBannerControlGlue
會繪製 播放片段中的傳輸控制項,並放置於「舊樣式」中 都放在不透明背景中(PlaybackBannerControlGlue
)。 取代PlaybackControlGlue
, 已淘汰)。PlaybackTransportControlGlue
使用「新樣式」使用透明背景的控制項
如要讓應用程式支援影片拖曳功能
PlaybackTransportControlGlue
。
您也需要指定「黏附主機」並
將黏著劑繫結至播放
片段,在 UI 中繪製傳輸控制項並維持其狀態。
將傳輸控制事件移回黏合處。主機必須與播放片段類型相符。使用
PlaybackSupportFragmentGlueHost
搭配
是 PlaybackFragment
,以及
VideoSupportFragmentGlueHost
搭配
VideoFragment
。
這張插圖顯示 Leanback 控件的組成部分 相輔相成:
會與應用程式一起整合的程式碼應該位於
定義 UI 的 PlaybackSupportFragment
或 VideoSupportFragment
。
在下列項目中
例如,應用程式會建構 PlaybackTransportControlGlue
的例項。
將其命名為 playerGlue
。
並將其 VideoSupportFragment
連結至新建立的 MediaPlayerAdapter
。開始時間
這是 VideoSupportFragment
,設定程式碼會呼叫 setHost()
來附加
VideoSupportFragmentGlueHost
到 playerGlue
。程式碼包含在類別中
擴充 VideoSupportFragment
。
Kotlin
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)) } }
Java
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()
:
Kotlin
override fun onCreateRowPresenter(): PlaybackRowPresenter { return super.onCreateRowPresenter().apply { (this as? PlaybackTransportRowPresenter) ?.setDescriptionPresenter(MyCustomDescriptionPresenter()) } }
Java
@Override protected PlaybackRowPresenter onCreateRowPresenter() { PlaybackTransportRowPresenter presenter = (PlaybackTransportRowPresenter) super.onCreateRowPresenter(); presenter.setDescriptionPresenter(new MyCustomDescriptionPresenter()); return presenter; }
新增控制項
控制項黏合中會顯示 PlaybackControlsRow
中動作的控制項。
PlaybackControlsRow
中的動作
指派給兩個群組:主要動作和次要群組
動作。主要群組的控制項會顯示在跳轉列上方,以及
控制列下方會顯示次要群組。一開始只有一個主要動作
沒有次要動作。
您可以透過覆寫的方式,將動作新增至主要和次要群組
「onCreatePrimaryActions()
」和
onCreateSecondaryActions()
。
Kotlin
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) } }
Java
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()
可處理新動作。
Kotlin
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. }
Java
@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 展示應用程式。
,直接在 Google Cloud 控制台實際操作。