このページは Cloud Translation API によって翻訳されました。

カタログブラウザを作成する

テレビで動作するメディアアプリでは、ユーザーが提供するコンテンツをブラウジングし、選択を行い、コンテンツの再生を開始できるようにする必要があります。コンテンツのブラウジングエクスペリエンスは、シンプルで直感的であり、視覚に訴える魅力的なものである必要があります。

このガイドでは、Leanback AndroidX ライブラリが提供するクラスを使用して、アプリのメディアカタログから音楽や動画を閲覧するためのユーザーインターフェースを実装する方法について説明します。

注: 下記の実装例では、サポートが終了した BrowseFragment クラスではなく、BrowseSupportFragment を使用しています。BrowseSupportFragment は AndroidX の Fragment クラスを拡張し、デバイスと Android のバージョン間で一貫した動作を保証します。

図 1. Leanback サンプルアプリのブラウズフラグメントは、動画カタログのデータを表示する。

メディアブラウズレイアウトを作成する

Leanback ライブラリの BrowseSupportFragment クラスを使用すると、最小限のコードでブラウジングカテゴリのプライマリレイアウトとメディアアイテムの行を作成できます。次の例は、BrowseSupportFragment オブジェクトを含むレイアウトを作成する方法を示しています。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

</FrameLayout>

次の例に示すように、このビューはアプリケーションのメインアクティビティによって設定されます。

Kotlin

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.main)
    }
...

Java

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

BrowseSupportFragment メソッドは、ビューに動画データと UI 要素を入力し、レイアウトパラメータ（アイコンやタイトルなど）、カテゴリヘッダーが有効かどうかを設定します。

UI 要素の設定について詳しくは、UI 要素を設定するをご覧ください。ヘッダーの非表示について詳しくは、ヘッダーを非表示または無効にするをご覧ください。

次の例に示すように、BrowseSupportFragment メソッドを実装するアプリのサブクラスは、UI 要素に対するユーザーアクションのイベントリスナーもセットアップし、バックグラウンドマネージャーを準備します。

Kotlin

class MainFragment : BrowseSupportFragment(),
        LoaderManager.LoaderCallbacks<HashMap<String, List<Movie>>> {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        loadVideoData()
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        prepareBackgroundManager()
        setupUIElements()
        setupEventListeners()
    }
    ...
    private fun prepareBackgroundManager() {
        backgroundManager = BackgroundManager.getInstance(activity).apply {
            attach(activity?.window)
        }
        defaultBackground = resources.getDrawable(R.drawable.default_background)
        metrics = DisplayMetrics()
        activity?.windowManager?.defaultDisplay?.getMetrics(metrics)
    }

    private fun setupUIElements() {
        badgeDrawable = resources.getDrawable(R.drawable.videos_by_google_banner)
        // Badge, when set, takes precedent over title
        title = getString(R.string.browse_title)
        headersState = BrowseSupportFragment.HEADERS_ENABLED
        isHeadersTransitionOnBackEnabled = true
        // Set header background color
        brandColor = ContextCompat.getColor(requireContext(), R.color.fastlane_background)

        // Set search icon color
        searchAffordanceColor = ContextCompat.getColor(requireContext(), R.color.search_opaque)
    }

    private fun loadVideoData() {
        VideoProvider.setContext(activity)
        videosUrl = getString(R.string.catalog_url)
        loaderManager.initLoader(0, null, this)
    }

    private fun setupEventListeners() {
        setOnSearchClickedListener {
            Intent(activity, SearchActivity::class.java).also { intent ->
                startActivity(intent)
            }
        }

        onItemViewClickedListener = ItemViewClickedListener()
        onItemViewSelectedListener = ItemViewSelectedListener()
    }
    ...

Java

public class MainFragment extends BrowseSupportFragment implements
        LoaderManager.LoaderCallbacks<HashMap<String, List<Movie>>> {
}
...
    @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 header 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());
    }
...

UI 要素を設定する

上記のサンプルでは、メディアカタログブラウザのスタイルを設定するために、プライベートメソッド setupUIElements() によっていくつかの BrowseSupportFragment メソッドが呼び出されます。

setBadgeDrawable() は、図 1 と図 2 に示すように、指定されたドローアブルリソースをブラウズフラグメントの右上隅に配置します。setTitle() も呼び出された場合、このメソッドはタイトル文字列をドローアブルリソースに置き換えます。ドローアブルリソースの高さは 52 dp にする必要があります。
setTitle() は、setBadgeDrawable() が呼び出されない限り、ブラウズフラグメントの右上隅にタイトル文字列を設定します。
setHeadersState() と setHeadersTransitionOnBackEnabled() は、ヘッダーを非表示または無効にします。詳しくは、ヘッダーを非表示または無効にするをご覧ください。
setBrandColor() は、ブラウズフラグメント内の UI 要素の背景色（具体的にはヘッダーセクションの背景色）を指定された色の値で設定します。
setSearchAffordanceColor() は、指定された色の値を使用して検索アイコンの色を設定します。図 1 と図 2 に示すように、検索アイコンはブラウズフラグメントの左上に表示されます。

ヘッダービューをカスタマイズする

図 1 のブラウズフラグメントは、動画データベースの行ヘッダーである動画カテゴリ名をテキストビューに表示します。より複雑なレイアウトで追加のビューを含めるようにヘッダーをカスタマイズすることもできます。以下のセクションでは、図 2 に示すように、カテゴリ名の横にアイコンを表示する画像ビューを組み込む方法について説明します。

図 2. アイコンとテキストラベルの両方があるブラウズフラグメントの行ヘッダー。

行ヘッダーのレイアウトは次のように定義されます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/header_icon"
        android:layout_width="32dp"
        android:layout_height="32dp" />
    <TextView
        android:id="@+id/header_label"
        android:layout_marginTop="6dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Presenter を使用して、ビューホルダーの作成、バインド、バインド解除を行う抽象メソッドを実装します。次の例は、2 つのビュー（ImageView と TextView）にビューホルダーをバインドする方法を示しています。

Kotlin

class IconHeaderItemPresenter : Presenter() {

    override fun onCreateViewHolder(viewGroup: ViewGroup): Presenter.ViewHolder {
        val view = LayoutInflater.from(viewGroup.context).run {
            inflate(R.layout.icon_header_item, null)
        }

        return Presenter.ViewHolder(view)
    }


    override fun onBindViewHolder(viewHolder: Presenter.ViewHolder, o: Any) {
        val headerItem = (o as ListRow).headerItem
        val rootView = viewHolder.view

        rootView.findViewById<ImageView>(R.id.header_icon).apply {
            rootView.resources.getDrawable(R.drawable.ic_action_video, null).also { icon ->
                setImageDrawable(icon)
            }
        }

        rootView.findViewById<TextView>(R.id.header_label).apply {
            text = headerItem.name
        }
    }

    override fun onUnbindViewHolder(viewHolder: Presenter.ViewHolder) {
        // no-op
    }
}

Java

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
    }
}

ヘッダーは、D-pad でスクロールできるようにフォーカス可能にする必要があります。これを管理する方法は 2 つあります。

onBindViewHolder() でビューをフォーカス可能に設定します。

Kotlin

override fun onBindViewHolder(viewHolder: Presenter.ViewHolder, o: Any) {
    val headerItem = (o as ListRow).headerItem
    val rootView = viewHolder.view

    rootView.focusable = View.FOCUSABLE
    // ...
}

Java

@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
    // ...
}

レイアウトをフォーカス可能に設定します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   ...
   android:focusable="true">

最後に、カタログブラウザを表示する BrowseSupportFragment 実装で、次の例に示すように、setHeaderPresenterSelector() メソッドを使用して行ヘッダーのプレゼンターを設定します。

Kotlin

setHeaderPresenterSelector(object : PresenterSelector() {
    override fun getPresenter(o: Any): Presenter {
        return IconHeaderItemPresenter()
    }
})

Java

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

詳細な例については、 Leanback サンプルアプリをご覧ください。

ヘッダーを非表示または無効にする

スクロール可能なリストを必要とするほど十分なカテゴリがない場合など、行ヘッダーを表示したくない場合もあります。フラグメントの onActivityCreated() メソッド中に BrowseSupportFragment.setHeadersState() メソッドを呼び出して、行ヘッダーを非表示または無効にします。setHeadersState() メソッドは、次のいずれかの定数をパラメータとして指定して、ブラウズフラグメント内のヘッダーの初期状態を設定します。

HEADERS_ENABLED: ブラウズフラグメントアクティビティが作成されると、ヘッダーはデフォルトで有効になり、表示されます。ヘッダーは、このページの図 1 と図 2 のように表示されます。
HEADERS_HIDDEN: ブラウズフラグメントアクティビティが作成されると、ヘッダーはデフォルトで有効になり、非表示になります。カードビューを提供するの図に示すように、画面のヘッダーセクションが折りたたまれています。ユーザーは、折りたたまれたヘッダーセクションを選択して展開できます。
HEADERS_DISABLED: ブラウズフラグメントアクティビティが作成されると、ヘッダーはデフォルトで無効になり、表示されません。

HEADERS_ENABLED または HEADERS_HIDDEN が設定されている場合は、setHeadersTransitionOnBackEnabled() を呼び出して、行で選択されたコンテンツアイテムから行ヘッダーに戻る操作をサポートできます。メソッドを呼び出さない場合、これはデフォルトで有効になっています。「戻る」移動を自分で処理するには、false を setHeadersTransitionOnBackEnabled() に渡して、独自のバックスタック処理を実装します。

メディアリストを表示する

BrowseSupportFragment クラスを使用すると、アダプターとプレゼンターを使用して、ブラウズ可能なメディアコンテンツカテゴリと、メディアカタログのメディアアイテムを定義し、表示できます。アダプタを使用すると、メディアカタログ情報を含むローカルまたはオンラインのデータソースに接続できます。アダプターは、プレゼンターを使用してビューを作成し、データをそれらのビューにバインドして、画面にアイテムを表示します。

次のサンプルコードは、文字列データを表示する Presenter の実装を示しています。

Kotlin

private const val TAG = "StringPresenter"

class StringPresenter : Presenter() {

    override fun onCreateViewHolder(parent: ViewGroup): Presenter.ViewHolder {
        val textView = TextView(parent.context).apply {
            isFocusable = true
            isFocusableInTouchMode = true
            background = parent.resources.getDrawable(R.drawable.text_bg)
        }
        return Presenter.ViewHolder(textView)
    }

    override fun onBindViewHolder(viewHolder: Presenter.ViewHolder, item: Any) {
        (viewHolder.view as TextView).text = item.toString()
    }

    override fun onUnbindViewHolder(viewHolder: Presenter.ViewHolder) {
        // no op
    }
}

Java

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
    }
}

メディアアイテムのプレゼンタークラスを作成したら、アダプターを作成して BrowseSupportFragment にアタッチし、ユーザーがブラウジングできるようにそれらのアイテムを画面に表示できます。次のサンプルコードは、上記のコード例で示した StringPresenter クラスを使用して、カテゴリとそのカテゴリのアイテムを表示するアダプタの作成方法を示しています。

Kotlin

private const val NUM_ROWS = 4
...
private lateinit var rowsAdapter: ArrayObjectAdapter

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    buildRowsAdapter()
}

private fun buildRowsAdapter() {
    rowsAdapter = ArrayObjectAdapter(ListRowPresenter())
    for (i in 0 until NUM_ROWS) {
        val listRowAdapter = ArrayObjectAdapter(StringPresenter()).apply {
            add("Media Item 1")
            add("Media Item 2")
            add("Media Item 3")
        }
        HeaderItem(i.toLong(), "Category $i").also { header ->
            rowsAdapter.add(ListRow(header, listRowAdapter))
        }
    }
    browseSupportFragment.adapter = rowsAdapter
}

Java

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);
}

この例では、アダプターの静的実装を示しています。一般的なメディアブラウジングアプリは、オンラインデータベースやウェブサービスのデータを使用します。ウェブから取得したデータを使用するブラウジングアプリの例については、 Leanback サンプルアプリをご覧ください。

背景を切り替える

テレビのメディアブラウジングアプリの見た目を良くするために、ユーザーがコンテンツをブラウジングしている際に背景画像を更新できます。これにより、アプリの操作がより映画のような楽しいものになります。

Leanback サポートライブラリには、TV アプリのアクティビティの背景を変更するための BackgroundManager クラスが用意されています。次の例は、TV アプリのアクティビティ内で背景を更新するシンプルなメソッドを作成する方法を示しています。

Kotlin

protected fun updateBackground(drawable: Drawable) {
    BackgroundManager.getInstance(this).drawable = drawable
}

Java

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

多くのメディアブラウジングアプリでは、ユーザーがメディアリスト内を移動すると、背景が自動的に更新されます。そのためには、ユーザーの現在の選択に基づいて背景を自動的に更新するように、選択リスナーをセットアップします。次の例は、OnItemViewSelectedListener クラスをセットアップして、選択イベントを捕捉して背景を更新する方法を示しています。

Kotlin

protected fun clearBackground() {
    BackgroundManager.getInstance(this).drawable = defaultBackground
}

protected fun getDefaultItemViewSelectedListener(): OnItemViewSelectedListener =
        OnItemViewSelectedListener { _, item, _, _ ->
            if (item is Movie) {
                item.getBackdropDrawable().also { background ->
                    updateBackground(background)
                }
            } else {
                clearBackground()
            }
        }

Java

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();
            }
        }
    };
}

注: 前の実装は、説明のためのシンプルな例です。ご自身のアプリでこの関数を作成する場合は、パフォーマンスを向上させるために、別のスレッドでバックグラウンド更新アクションを実行します。また、ユーザーがアイテムをスクロールするのに応じて背景を更新する予定がある場合は、ユーザーがアイテムに落ち着くまで背景画像の更新を遅らせる時間を追加します。これにより、背景画像の過剰な更新を回避できます。

カタログ ブラウザを作成する

メディア ブラウズ レイアウトを作成する

Kotlin

Java

Kotlin

Java

UI 要素を設定する

ヘッダービューをカスタマイズする

Kotlin

Java

Kotlin

Java

Kotlin

Java

ヘッダーを非表示または無効にする

メディアリストを表示する

Kotlin

Java

Kotlin

Java

背景を切り替える

Kotlin

Java

Kotlin

Java

カタログブラウザを作成する

メディアブラウズレイアウトを作成する