在 TV 上运行的媒体应用需要允许用户浏览其提供的内容、选择要播放的内容,以及开始播放内容。此类应用的内容浏览体验应简单直观,并且视觉上要赏心悦目。

本节课介绍如何利用 Leanback androidx 库提供的类来实现一个用户界面,该界面可让用户浏览应用的媒体目录中包含的音乐或视频。

注意:此处显示的实现示例使用的是 BrowseSupportFragment,BrowseSupportFragment 扩展了 AndroidX Fragment 类,这可确保各种设备和 Android 版本中的行为一致。

图 1. Leanback 示例应用浏览 Fragment 中显示视频目录数据。

创建媒体浏览布局

通过 Leanback 库中的 BrowseSupportFragment 类,您只需很少的代码,即可创建用于浏览媒体项目类别和行的主要布局。以下示例展示了如何创建一个包含 BrowseSupportFragment 对象的布局:

android:id="@+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:name="com.example.android.tvleanback.ui.MainFragment"
android:id="@+id/main_browse_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />

应用的主 Activity 用于设置此视图,如下例所示:

public class MainActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
...

BrowseSupportFragment 方法用于在视图中填入视频数据和界面元素,并设置图标、标题以及是否启用类别标题等布局参数。

实现 BrowseSupportFragment 方法的应用子类还会设置事件监听器来监听界面元素上的用户操作,并准备后台管理器,如下例所示:

public class MainFragment extends BrowseSupportFragment implements
LoaderManager.LoaderCallbacks>> {
}
...
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
loadVideoData();
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
prepareBackgroundManager();
setupUIElements();
setupEventListeners();
}
...
private void prepareBackgroundManager() {
backgroundManager = BackgroundManager.getInstance(getActivity());
backgroundManager.attach(getActivity().getWindow());
defaultBackground = getResources()
.getDrawable(R.drawable.default_background);
metrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
}
private void setupUIElements() {
setBadgeDrawable(getActivity().getResources()
.getDrawable(R.drawable.videos_by_google_banner));
// Badge, when set, takes precedent over title
setTitle(getString(R.string.browse_title));
setHeadersState(HEADERS_ENABLED);
setHeadersTransitionOnBackEnabled(true);
// set headers background color
setBrandColor(ContextCompat.getColor(requireContext(), R.color.fastlane_background));
// set search icon color
setSearchAffordanceColor(ContextCompat.getColor(requireContext(), R.color.search_opaque));
}
private void loadVideoData() {
VideoProvider.setContext(getActivity());
videosUrl = getString(R.string.catalog_url);
getLoaderManager().initLoader(0, null, this);
}
private void setupEventListeners() {
setOnSearchClickedListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(getActivity(), SearchActivity.class);
startActivity(intent);
}
});
setOnItemViewClickedListener(new ItemViewClickedListener());
setOnItemViewSelectedListener(new ItemViewSelectedListener());
}
...

设置界面元素

在上例中,私有方法 setupUIElements() 调用了几个 BrowseSupportFragment 方法来设置媒体目录浏览器的样式:

setBadgeDrawable() 用于将指定的可绘制资源置于浏览 Fragment 的右上角,如图 1 和图 2 中所示。如果还调用了 setTitle(),此方法会将标题字符串替换为可绘制资源。可绘制资源的高度应为 52dp。

如果未调用 setBadgeDrawable(),setTitle() 可用于设置浏览 Fragment 右上角的标题字符串。

setHeadersState() 和 setHeadersTransitionOnBackEnabled() 用于隐藏或停用标题。

setBrandColor() 用于将浏览 Fragment 中界面元素的背景颜色(具体来说就是标题部分的背景颜色)设为指定的颜色值。

setSearchAffordanceColor() 用于将搜索图标的颜色设为指定的颜色值。搜索图标显示在浏览 Fragment 的左上角,如图 1 和图 2 中所示。

自定义标题视图

图 1 中所示的浏览 Fragment 在左侧窗格中列出了视频类别名称(行标题)。文本视图显示的这些类别名称来自视频数据库。您可以自定义标题,以便在更复杂的布局中添加其他视图。下面几部分展示了如何添加图片视图,以在类别名称旁边显示一个图标,如图 2 中所示。

图 2. 浏览 Fragment 中的行标题,同时具有图标和文本标签。

行标题的布局定义如下:

android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/header_icon"
android:layout_width="32dp"
android:layout_height="32dp" />
android:id="@+id/header_label"
android:layout_marginTop="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

可以使用 Presenter 并实现抽象方法来创建、绑定和取消绑定 viewholder。以下示例展示了如何将 viewholder 与两个视图(一个 ImageView 和一个 TextView)绑定在一起。

public class IconHeaderItemPresenter extends Presenter {
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup) {
LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());
View view = inflater.inflate(R.layout.icon_header_item, null);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, Object o) {
HeaderItem headerItem = ((ListRow) o).getHeaderItem();
View rootView = viewHolder.view;
ImageView iconView = (ImageView) rootView.findViewById(R.id.header_icon);
Drawable icon = rootView.getResources().getDrawable(R.drawable.ic_action_video, null);
iconView.setImageDrawable(icon);
TextView label = (TextView) rootView.findViewById(R.id.header_label);
label.setText(headerItem.getName());
}
@Override
public void onUnbindViewHolder(ViewHolder viewHolder) {
// no op
}
}

您的标题必须可聚焦,以便可以使用方向键来滚动浏览。有两个备选方式:

在 onBindViewHolder() 中将您的视图设为可聚焦:

@Override
public void onBindViewHolder(ViewHolder viewHolder, Object o) {
HeaderItem headerItem = ((ListRow) o).getHeaderItem();
View rootView = viewHolder.view;
rootView.setFocusable(View.FOCUSABLE) // Allows the D-Pad to navigate to this header item
//...
}

将您的布局设为可聚焦

...

android:focusable="true">

最后,在显示目录浏览器的 BrowseSupportFragment 实现中,使用 setHeaderPresenterSelector() 方法为行标题设置 Presenter,如下例所示。

setHeaderPresenterSelector(new PresenterSelector() {
@Override
public Presenter getPresenter(Object o) {
return new IconHeaderItemPresenter();
}
});

如需查看完整示例,请参阅 Android TV GitHub 代码库中的 Android Leanback 示例应用。

隐藏或停用标题

有时,您可能不希望显示行标题。例如:当类别数量不是很多,无需使用可滚动列表时。在 Fragment 的onActivityCreated()方法期间调用 BrowseSupportFragment.setHeadersState() 方法可隐藏或停用行标题。setHeadersState() 方法用于设置浏览 Fragment 中标题的初始状态,前提是提供以下某个常量作为参数:

HEADERS_ENABLED - 创建浏览 Fragment Activity 后,默认情况下会启用并显示标题。标题外观如本页图 1 和图 2 中所示。

HEADERS_HIDDEN - 创建浏览 Fragment Activity 后,默认情况下会启用并隐藏标题。

HEADERS_DISABLED - 创建浏览 Fragment Activity 后,默认情况下会停用标题,且一律不显示标题。

如果设置了 HEADERS_ENABLED 或 HEADERS_HIDDEN,您可以调用 setHeadersTransitionOnBackEnabled(),以支持从行中所选内容项返回到行标题。它默认处于启用状态(如果您未调用该方法),但如果您希望自行处理返回操作,应将值 false 传递给 setHeadersTransitionOnBackEnabled(),并实现您自己的返回堆栈处理。

显示媒体列表

通过 BrowseSupportFragment 类,您可以使用 Adapter 和 Presenter 定义和显示来自媒体目录的可浏览媒体内容类别和媒体内容。您可以通过 Adapter 连接到包含媒体目录信息的本地或在线数据源。Adapter 使用 Presenter 来创建视图并将数据绑定到这些视图,以便在屏幕上显示内容。

以下示例代码展示了一个用于显示字符串数据的 Presenter 实现:

public class StringPresenter extends Presenter {
private static final String TAG = "StringPresenter";
public ViewHolder onCreateViewHolder(ViewGroup parent) {
TextView textView = new TextView(parent.getContext());
textView.setFocusable(true);
textView.setFocusableInTouchMode(true);
textView.setBackground(
parent.getResources().getDrawable(R.drawable.text_bg));
return new ViewHolder(textView);
}
public void onBindViewHolder(ViewHolder viewHolder, Object item) {
((TextView) viewHolder.view).setText(item.toString());
}
public void onUnbindViewHolder(ViewHolder viewHolder) {
// no op
}
}

为媒体内容构建 Presenter 类后,您可以构建 Adapter 并将其附加到 BrowseSupportFragment,以将这些内容显示在屏幕上供用户浏览。以下示例代码展示了如何构建 Adapter 来利用上一代码示例中所示的 StringPresenter 类来显示类别以及这些类别的内容:

private ArrayObjectAdapter rowsAdapter;
private static final int NUM_ROWS = 4;
@Override
protected void onCreate(Bundle savedInstanceState) {
...
buildRowsAdapter();
}
private void buildRowsAdapter() {
rowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());
for (int i = 0; i < NUM_ROWS; ++i) {
ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(
new StringPresenter());
listRowAdapter.add("Media Item 1");
listRowAdapter.add("Media Item 2");
listRowAdapter.add("Media Item 3");
HeaderItem header = new HeaderItem(i, "Category " + i);
rowsAdapter.add(new ListRow(header, listRowAdapter));
}
browseSupportFragment.setAdapter(rowsAdapter);
}

此示例展示了 Adapter 的一个静态实现。典型的媒体浏览应用会使用来自在线数据库或网络服务的数据。如需查看使用从网络检索的数据的浏览应用示例,请参阅 Android TV GitHub 代码库中的 Android Leanback 示例应用。

更新背景

为了增强 TV 上媒体浏览应用的视觉吸引力,您可以在用户浏览内容时更新背景图片。此方法可令用户与应用的交互更加赏心悦目。

Leanback 支持库提供了一个 BackgroundManager 类,以用于更改 TV 应用 Activity 的背景。以下示例展示了如何创建一个简单的方法来更新 TV 应用 Activity 内的背景:

protected void updateBackground(Drawable drawable) {
BackgroundManager.getInstance(this).setDrawable(drawable);
}

许多现有的媒体浏览应用都会在用户浏览媒体列表时自动更新背景。为了实现此项更新,您可以设置一个选择监听器,以根据用户的当前选择自动更新背景。以下示例展示了如何设置一个 OnItemViewSelectedListener 类来捕获选择事件并更新背景:

protected void clearBackground() {
BackgroundManager.getInstance(this).setDrawable(defaultBackground);
}
protected OnItemViewSelectedListener getDefaultItemViewSelectedListener() {
return new OnItemViewSelectedListener() {
@Override
public void onItemSelected(Presenter.ViewHolder itemViewHolder, Object item,
RowPresenter.ViewHolder rowViewHolder, Row row) {
if (item instanceof Movie ) {
Drawable background = ((Movie)item).getBackdropDrawable();
updateBackground(background);
} else {
clearBackground();
}
}
};
}

注意:以上实现是出于说明目的而展示的一个简单示例。在您自己的应用中创建此功能时,您应考虑在一个单独的线程内运行背景更新操作,以便获得更好的性能。此外,如果您计划在用户滚动浏览内容时更新背景,不妨考虑添加一个延迟时间,使背景图片更新延迟到用户选择某个内容后再执行。此方法可以避免背景图片更新过于频繁。

本篇文章主要是讲解如何利用BrowseSupportFragment实现结构为(分组+节目列表)结构的界面,其中包括设置搜索、标题、背景更换等操作。