版权声明：本文为博主原创翻译文章，转载请注明出处。
推荐：
欢迎关注我创建的Android TV 简书专题，会定期给大家分享一些AndroidTv相关的内容：
https://www.jianshu.com/c/3f0ab61a1322
本章仅介绍UI部分，下一章将介绍视频控制。我们将实现用于处理视频内容的UI。
PlaybackOverlayActivity＆PlaybackOverlayFragment
创建PlaybackOverlayActivity＆PlaybackOverlayFragment与以前介绍的相同。
创建PlaybackOverlayActivity
New → Activity → BlankActivity
Activity 名称: PlaybackOverlayActivity
Layout 名称: activity_playback_overlay
…
此PlaybackOverlayActivity将在res / layout文件夹中引用activity_playback_overlay.xml文件。 它包含2层：视图- 后面的VideoView和前面的PlaybackOverlayFragment。 VideoView是我们将播放视频内容的视图，PlaybackOverlayFragment将显示用于控制视频的UI，我们将在本章中重点介绍。 activity_playback_overlay.xml编写如下：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<VideoView android:id="@+id/videoView" android:layout_width="match_parent"
android:layout_alignParentRight="true" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:layout_alignParentBottom="true"
android:layout_height="match_parent" android:layout_gravity="center"
android:layout_centerInParent="true"></VideoView>
<fragment android:id="@+id/playback_controls_fragment"
android:name="com.corochann.androidtvapptutorial.PlaybackOverlayFragment"
android:layout_width="match_parent" android:layout_height="match_parent" />
</FrameLayout>
现在我们不需要对PlaybackOverlayActivity进行修改。
PlaybackOverlayFragment
创建PlaybackOverlayFragment：New -> Java Class -> Name: PlaybackOverlayFragment
这个PlaybackOverlayFragment是android.support.v17.leanback.app.PlaybackOverlayFragment的子类，它为我们提供了构建视频控制UI的组件。
它与VideoDetailsFragment非常相似，因此在适配器中设置行后，您只需要调用setAdapter(adapter)即可。 对于PlaybackOverlayFragment，我们需要将显示视频控制UI的“PlaybackControlsRow”的实例设置为适配器的第一行元素。
我们来研究“PlaybackControlsRow”及其 Presenter,“PlaybackControlsRowPresenter”。 我们需要在每个实例中指定以下内容。
-
PlaybackControlsRow
PrimaryActionsAdapter - 它拥有主列的图标
SecondaryActionsAdapter - 它拥有子行的图标请注意，PlaybackControlsRow类为我们提供了许多有用的视频控制默认图标。 我们只需要实例化它的内部类。
-
PlaybackControlsRowPresenter
DescriptionPresenter - 它是Presenter用于在PrimaryActions栏顶部显示项目详细信息。
PlaybackOverview2
上图解释了PlaybackControlsRow的内部构造 - PlaybackControlsRowpresenter。 PlaybackControlsRowPresenter的构造器接受DescriptionPresenter对象的参数，该对象决定了如何显示视频细节。 这一次，我们将重用DetailsDescriptionPresenter，我们在上一章中给出了在DetailsFragment中显示项目详细信息。 PlaybackControlsRow有2行内部设置动作，PrimaryActionsAdapter和SecondaryActionsAdapter。 我们可以在这些actionadapters中设置“动作”图标。 有关可用操作和这些图标，请参阅上述照片。
PlaybackOverlayFragment的示例实现如下。
package com.corochann.androidtvapptutorial;
import android.content.Context;
import android.os.Bundle;
import android.support.v17.leanback.widget.ArrayObjectAdapter;
import android.support.v17.leanback.widget.ClassPresenterSelector;
import android.support.v17.leanback.widget.ControlButtonPresenterSelector;
import android.support.v17.leanback.widget.HeaderItem;
import android.support.v17.leanback.widget.ListRow;
import android.support.v17.leanback.widget.ListRowPresenter;
import android.support.v17.leanback.widget.PlaybackControlsRow;
import android.support.v17.leanback.widget.PlaybackControlsRowPresenter;
import android.util.Log;
public class PlaybackOverlayFragment extends android.support.v17.leanback.app.PlaybackOverlayFragment {
private static final String TAG = PlaybackOverlayFragment.class.getSimpleName();
private Movie mSelectedMovie;
private PlaybackControlsRow mPlaybackControlsRow;
private ArrayObjectAdapter mPrimaryActionAdapter;
private ArrayObjectAdapter mSecondaryActionAdapter;
private PlaybackControlsRow.PlayPauseAction mPlayPauseAction;
private PlaybackControlsRow.RepeatAction mRepeatAction;
private PlaybackControlsRow.ThumbsUpAction mThumbsUpAction;
private PlaybackControlsRow.ThumbsDownAction mThumbsDownAction;
private PlaybackControlsRow.ShuffleAction mShuffleAction;
private PlaybackControlsRow.SkipNextAction mSkipNextAction;
private PlaybackControlsRow.SkipPreviousAction mSkipPreviousAction;
private PlaybackControlsRow.FastForwardAction mFastForwardAction;
private PlaybackControlsRow.RewindAction mRewindAction;
private PlaybackControlsRow.HighQualityAction mHighQualityAction;
private PlaybackControlsRow.ClosedCaptioningAction mClosedCaptioningAction;
private PlaybackControlsRow.MoreActions mMoreActions;
@Override
public void onCreate(Bundle savedInstanceState) {
Log.i(TAG, "onCreate");
super.onCreate(savedInstanceState);
mSelectedMovie = (Movie) getActivity().getIntent().getSerializableExtra(DetailsActivity.MOVIE);
setBackgroundType(PlaybackOverlayFragment.BG_LIGHT);
setFadingEnabled(true);
setUpRows();
}
private ArrayObjectAdapter mRowsAdapter;
private void setUpRows() {
ClassPresenterSelector ps = new ClassPresenterSelector();
PlaybackControlsRowPresenter playbackControlsRowPresenter;
playbackControlsRowPresenter = new PlaybackControlsRowPresenter(new DetailsDescriptionPresenter());
ps.addClassPresenter(PlaybackControlsRow.class, playbackControlsRowPresenter);
ps.addClassPresenter(ListRow.class, new ListRowPresenter());
mRowsAdapter = new ArrayObjectAdapter(ps);
/*
* Add PlaybackControlsRow to mRowsAdapter, which makes video control UI.
* PlaybackControlsRow is supposed to be first Row of mRowsAdapter.
*/
addPlaybackControlsRow();
/* add ListRow to second row of mRowsAdapter */
addOtherRows();
setAdapter(mRowsAdapter);
}
private void addPlaybackControlsRow() {
mPlaybackControlsRow = new PlaybackControlsRow(mSelectedMovie);
mRowsAdapter.add(mPlaybackControlsRow);
ControlButtonPresenterSelector presenterSelector = new ControlButtonPresenterSelector();
mPrimaryActionsAdapter = new ArrayObjectAdapter(presenterSelector);
mSecondaryActionsAdapter = new ArrayObjectAdapter(presenterSelector);
mPlaybackControlsRow.setPrimaryActionsAdapter(mPrimaryActionsAdapter);
mPlaybackControlsRow.setSecondaryActionsAdapter(mSecondaryActionsAdapter);
Activity activity = getActivity();
mPlayPauseAction = new PlaybackControlsRow.PlayPauseAction(activity);
mRepeatAction = new PlaybackControlsRow.RepeatAction(activity);
mThumbsUpAction = new PlaybackControlsRow.ThumbsUpAction(activity);
mThumbsDownAction = new PlaybackControlsRow.ThumbsDownAction(activity);
mShuffleAction = new PlaybackControlsRow.ShuffleAction(activity);
mSkipNextAction = new PlaybackControlsRow.SkipNextAction(activity);
mSkipPreviousAction = new PlaybackControlsRow.SkipPreviousAction(activity);
mFastForwardAction = new PlaybackControlsRow.FastForwardAction(activity);
mRewindAction = new PlaybackControlsRow.RewindAction(activity);
mHighQualityAction = new PlaybackControlsRow.HighQualityAction(activity);
mClosedCaptioningAction = new PlaybackControlsRow.ClosedCaptioningAction(activity);
mMoreActions = new PlaybackControlsRow.MoreActions(activity);
/* PrimaryAction setting */
mPrimaryActionsAdapter.add(mSkipPreviousAction);
mPrimaryActionsAdapter.add(mRewindAction);
mPrimaryActionsAdapter.add(mPlayPauseAction);
mPrimaryActionsAdapter.add(mFastForwardAction);
mPrimaryActionsAdapter.add(mSkipNextAction);
/* SecondaryAction setting */
mSecondaryActionsAdapter.add(mThumbsUpAction);
mSecondaryActionsAdapter.add(mThumbsDownAction);
mSecondaryActionsAdapter.add(mRepeatAction);
mSecondaryActionsAdapter.add(mShuffleAction);
mSecondaryActionsAdapter.add(mHighQualityAction);
mSecondaryActionsAdapter.add(mClosedCaptioningAction);
mSecondaryActionsAdapter.add(mMoreActions);
}
private void addOtherRows() {
ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(new CardPresenter());
Movie movie = new Movie();
movie.setTitle("Title");
movie.setStudio("studio");
movie.setDescription("description");
movie.setCardImageUrl("http://heimkehrend.raindrop.jp/kl-hacker/wp-content/uploads/2014/08/DSC02580.jpg");
listRowAdapter.add(movie);
listRowAdapter.add(movie);
HeaderItem header = new HeaderItem(0, "OtherRows");
mRowsAdapter.add(new ListRow(header, listRowAdapter));
}
}
背景VideoView尚未实现，黑色。 但是我们可以看到视频控制UI已经完成了！
源代码在github上。下一篇来介绍控制类具体实现：视频控制最小化实现 – Android TV 应用开发教程八
我将在下一章继续使用这个UI实现视频控件。
关注微信公众号，定期为你推荐移动开发相关文章。
