版權(quán)聲明：本文為博主原創(chuàng)翻譯文章，轉(zhuǎn)載請(qǐng)注明出處报腔。
推薦：
歡迎關(guān)注我創(chuàng)建的Android TV 簡(jiǎn)書(shū)專(zhuān)題株搔，會(huì)定期給大家分享一些AndroidTv相關(guān)的內(nèi)容：
http://www.reibang.com/c/3f0ab61a1322
本章僅介紹UI部分，下一章將介紹視頻控制。我們將實(shí)現(xiàn)用于處理視頻內(nèi)容的UI翻诉。
PlaybackOverlayActivity＆PlaybackOverlayFragment
創(chuàng)建PlaybackOverlayActivity＆PlaybackOverlayFragment與以前介紹的相同炮姨。
創(chuàng)建PlaybackOverlayActivity
New → Activity → BlankActivity
Activity 名稱(chēng): PlaybackOverlayActivity
Layout 名稱(chēng): activity_playback_overlay
…
此PlaybackOverlayActivity將在res / layout文件夾中引用activity_playback_overlay.xml文件。 它包含2層：視圖- 后面的VideoView和前面的PlaybackOverlayFragment舒岸。 VideoView是我們將播放視頻內(nèi)容的視圖绅作，PlaybackOverlayFragment將顯示用于控制視頻的UI洪乍，我們將在本章中重點(diǎn)介紹壳澳。 activity_playback_overlay.xml編寫(xiě)如下：
<?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>
現(xiàn)在我們不需要對(duì)PlaybackOverlayActivity進(jìn)行修改岂贩。
PlaybackOverlayFragment
創(chuàng)建PlaybackOverlayFragment：New -> Java Class -> Name: PlaybackOverlayFragment
這個(gè)PlaybackOverlayFragment是android.support.v17.leanback.app.PlaybackOverlayFragment的子類(lèi)，它為我們提供了構(gòu)建視頻控制UI的組件巷波。
它與VideoDetailsFragment非常相似萎津，因此在適配器中設(shè)置行后，您只需要調(diào)用setAdapter(adapter)即可褥紫。 對(duì)于PlaybackOverlayFragment姜性，我們需要將顯示視頻控制UI的“PlaybackControlsRow”的實(shí)例設(shè)置為適配器的第一行元素。
我們來(lái)研究“PlaybackControlsRow”及其 Presenter,“PlaybackControlsRowPresenter”髓考。 我們需要在每個(gè)實(shí)例中指定以下內(nèi)容部念。
-
PlaybackControlsRow
PrimaryActionsAdapter - 它擁有主列的圖標(biāo)
SecondaryActionsAdapter - 它擁有子行的圖標(biāo)請(qǐng)注意，PlaybackControlsRow類(lèi)為我們提供了許多有用的視頻控制默認(rèn)圖標(biāo)氨菇。 我們只需要實(shí)例化它的內(nèi)部類(lèi)儡炼。
-
PlaybackControlsRowPresenter
DescriptionPresenter - 它是Presenter用于在PrimaryActions欄頂部顯示項(xiàng)目詳細(xì)信息。
PlaybackOverview2
上圖解釋了PlaybackControlsRow的內(nèi)部構(gòu)造 - PlaybackControlsRowpresenter查蓉。 PlaybackControlsRowPresenter的構(gòu)造器接受DescriptionPresenter對(duì)象的參數(shù)乌询，該對(duì)象決定了如何顯示視頻細(xì)節(jié)。 這一次豌研，我們將重用DetailsDescriptionPresenter妹田，我們?cè)谏弦徽轮薪o出了在DetailsFragment中顯示項(xiàng)目詳細(xì)信息。 PlaybackControlsRow有2行內(nèi)部設(shè)置動(dòng)作鹃共，PrimaryActionsAdapter和SecondaryActionsAdapter鬼佣。 我們可以在這些actionadapters中設(shè)置“動(dòng)作”圖標(biāo)。 有關(guān)可用操作和這些圖標(biāo)霜浴，請(qǐng)參閱上述照片晶衷。
PlaybackOverlayFragment的示例實(shí)現(xiàn)如下。
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尚未實(shí)現(xiàn)，黑色晌纫。 但是我們可以看到視頻控制UI已經(jīng)完成了税迷！
源代碼在github上。下一篇來(lái)介紹控制類(lèi)具體實(shí)現(xiàn)：視頻控制最小化實(shí)現(xiàn) – Android TV 應(yīng)用開(kāi)發(fā)教程八
我將在下一章繼續(xù)使用這個(gè)UI實(shí)現(xiàn)視頻控件锹漱。
關(guān)注微信公眾號(hào)箭养，定期為你推薦移動(dòng)開(kāi)發(fā)相關(guān)文章。
