Leanback UI ツールキットには、ユーザー エクスペリエンスを向上させる再生コントロールが用意されています。動画アプリの場合、トランスポート コントロールは、早送り / 巻き戻しコントロールによる動画スクラブをサポートしています。ディスプレイをスクラブすると、 動画内を移動しやすくします。
このライブラリには抽象クラスと、デベロッパーがよりきめ細かく制御できる、ビルド済みのすぐに使用できる実装が含まれています。事前ビルド済みの 実装すると、多くのコーディングを行うことなく、機能豊富なアプリをすばやく構築できます。 さらにカスタマイズが必要な場合は、ライブラリのビルド済みライブラリを拡張できます。 説明します。
コントロールとプレーヤー
Leanback UI ツールキットでは、トランスポート コントロール UI と、動画を再生するプレーヤーが分離されています。この分離は 2 つのコンポーネントで実現されています。それは、トランスポート コントロール(および必要な場合は動画)を表示する再生サポート フラグメントと、メディア プレーヤーをカプセル化するプレーヤー アダプターです。
再生フラグメント
アプリの UI アクティビティでは、
PlaybackSupportFragment
または
VideoSupportFragment
。
そのどちらにも Leanback トランスポート コントロールが含まれています。
PlaybackSupportFragment
は、トランスポート コントロールをアニメーション化し、必要に応じて表示 / 非表示を切り替えます。VideoSupportFragment
はPlaybackSupportFragment
を拡張したもので、動画をレンダリングするSurfaceView
を備えています。
フラグメントの
ObjectAdapter
UI を強化します。たとえば、
setAdapter()
[関連動画]を追加します選択します。
PlayerAdapter
PlayerAdapter
は、基盤メディア プレーヤーを制御する抽象クラスです。デベロッパーは
ビルド済みの MediaPlayerAdapter
実装を使用するか、
実装するために使用できます。
フラグメントを接着する
再生フラグメントをプレーヤーに接続するには、「コントロール用接着剤」を使用する必要があります。Leanback ライブラリには、2 種類の接着剤が用意されています。
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
でのアクション
は、プライマリ アクションとセカンダリ アクションの 2 つのグループに割り当てられます
アクション。プライマリ グループのコントロールはシークバーの上に、
セカンダリ グループがシークバーの下に表示されます。最初から存在しているのは、再生 / 一時停止ボタン用のプライマリ アクション 1 つだけで、セカンダリ アクションはありません。
次のようにオーバーライドすることで、プライマリ グループとセカンダリ グループにアクションを追加できます。
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 Showcase アプリの例をご覧ください。