corochannNote

BrowseFragmentの構成

本章では、Leanbackライブラリのメインとして使われるBrowseFragmentについて説明する。BrowseFragmentに、HeaderとListの組み合わせを格納していくことによって、コンテンツをリスト上に表示することができる。ちなみに、BrowseFragmentのソースコードは sdk上 　(android/support/v17/leanback/app/) で見ることができる。 

下の写真は Android TV のサンプルアプリのメインページで、これがBrowseFragmentによって作成されている。 コンテンツがグリッド上に並べられ、ヘッダーごとにカテゴリ分けされているのがわかる。それぞれのヘッダーに対応してコンテンツの列があり、１対１対応している。この “ヘッダー + コンテント列” の組み合わせは ListRow で作られる。 BrowseFragment の中身（本体）は  ListRow のセットだということだ。今後このセットのことを RowsAdapter と呼ぶ。

下の写真に対応関係を図示した。 ListRow は青丸で囲ってある部分、RowsAdapter はListRowすべてを囲っている青い四角の部分に相当する。 

ListRow 部分に注目してみよう。各コンテンツ (以降 CardInfo や アイテム と表記)は ArrayObjectAdapter の中に格納される(ここでは RowAdapter と表記)。   

このアイテムはどんなクラス、オブジェクトでもよくそのUI表示は Presenter クラスによって指定される。 

まとめ

 ArrayObjectAdapter (RowsAdapter) ← ListRow の集合
 ListRow = HeaderItem + ArrayObjectAdapter (RowAdapter)
 ArrayObjectAdapter (RowAdapter) ← アイテムの集合

Presenter クラス

アイテム(カード)のデザインは Presenter が担う。 Presenter はその名の通り、どのようにアイテムを表示するかを決めるクラスだ。 Presenter クラス自体は抽象クラスで、このPresenterクラスを継承したサブクラスに、アプリに適した具体的なUI表示の実装を行う。

Presenter クラスを継承するときには、以下の3つのメソッドをオーバーライド（実装）が必須となる。 

• onCreateViewHolder(Viewgroup parent)
• onBindViewHolder(ViewHolder viewHolder, Object cardInfo/item)
• onUnbindViewHolder(ViewHolder viewHolder)

それぞれのメソッドの詳細は Presenter クラスのソースコードに記載されているので参照してほしい。 Presenter クラスは ViewHolder をインナークラスとして持っていて、これが View の参照を保持する。 アイテムオブジェクトに応じて、 View のUIを実装したい場合は viewHolder を介してViewにアクセスすることができる。アクセスするタイミングは onBind, onUnbind といったそれぞれのイベントにリスナーが用意されていて、その中でUI処理を行う（後述）。

実はこれはModel-View-Presenter （MVP）アーキテクチャによるもの。コンテンツをModel Objectで扱う際、そのUI表示のテンプレートデザインをViewが担当し、ModelとViewのつなぎ役をPresenterが担当する。より細かくMVPに関して知りたい方は１４章を参照。

HeadersFragment & RowsFragment (GridItemPresenter) の実装

説明はここまでにして、ここから実装。ここではPresenterの１例として GridItemPresenter クラスを実装する。
ここでは”アイテム”(Model)は  String クラス、 viewHolder は TextView (View)を保持する。

Viewに関する設定を、Presenterが行う。初期化処理は onCreateViewHolder()にて。 
実際にアイテムをViewと結びつける処理は onBindViewHolder() にて行われる。onBindViewHolderでは、第１引数で viewHolder を受け取ることができ、これが onCreateViewHolder 時に作成したViewを保持している。また第２引数で実際に表示するアイテムのインスタンスを受け取っている。

    private class GridItemPresenter extends Presenter {
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent) {
            TextView view = new TextView(parent.getContext());
            view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH, GRID_ITEM_HEIGHT));
            view.setFocusable(true);
            view.setFocusableInTouchMode(true);
            view.setBackgroundColor(getResources().getColor(R.color.default_background));
            view.setTextColor(Color.WHITE);
            view.setGravity(Gravity.CENTER);
            return new ViewHolder(view);
        }

        @Override
        public void onBindViewHolder(ViewHolder viewHolder, Object item) {
            ((TextView) viewHolder.view).setText((String) item);
        }

        @Override
        public void onUnbindViewHolder(ViewHolder viewHolder) {

        }
    }

}

実際にPresenterクラスの実装ができたら、これを RowsAdapter にセットすることで適用できる。これはActivityの作成時に行う。 以下では MainFragment の onActivityCreated() に実装

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        Log.i(TAG, "onActivityCreated");
        super.onActivityCreated(savedInstanceState);

        setupUIElements();

        loadRows();
    }

    ...

    private void loadRows() {
        mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());

        /* GridItemPresenter */
        HeaderItem gridItemPresenterHeader = new HeaderItem(0, "GridItemPresenter");

        GridItemPresenter mGridPresenter = new GridItemPresenter();
        ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(mGridPresenter);
        gridRowAdapter.add("ITEM 1");
        gridRowAdapter.add("ITEM 2");
        gridRowAdapter.add("ITEM 3");
        mRowsAdapter.add(new ListRow(gridItemPresenterHeader, gridRowAdapter));

        /* set */
        setAdapter(mRowsAdapter);
    }

 最終的に、MainFragment の全ソースコードはこんな感じになる。

package com.corochann.androidtvapptutorial;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v17.leanback.app.BrowseFragment;
import android.support.v17.leanback.widget.ArrayObjectAdapter;
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.Presenter;
import android.util.Log;
import android.view.Gravity;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by corochann on 2015/06/28.
 */
public class MainFragment extends BrowseFragment {
    private static final String TAG = MainFragment.class.getSimpleName();

    private ArrayObjectAdapter mRowsAdapter;
    private static final int GRID_ITEM_WIDTH = 300;
    private static final int GRID_ITEM_HEIGHT = 200;

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        Log.i(TAG, "onActivityCreated");
        super.onActivityCreated(savedInstanceState);

        setupUIElements();

        loadRows();
    }

    private void setupUIElements() {
        // setBadgeDrawable(getActivity().getResources().getDrawable(R.drawable.videos_by_google_banner));
        setTitle("Hello Android TV!"); // Badge, when set, takes precedent
        // over title
        setHeadersState(HEADERS_ENABLED);
        setHeadersTransitionOnBackEnabled(true);

        // set fastLane (or headers) background color
        setBrandColor(getResources().getColor(R.color.fastlane_background));
        // set search icon color
        setSearchAffordanceColor(getResources().getColor(R.color.search_opaque));
    }

    private void loadRows() {
        mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());

        /* GridItemPresenter */
        HeaderItem gridItemPresenterHeader = new HeaderItem(0, "GridItemPresenter");

        GridItemPresenter mGridPresenter = new GridItemPresenter();
        ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(mGridPresenter);
        gridRowAdapter.add("ITEM 1");
        gridRowAdapter.add("ITEM 2");
        gridRowAdapter.add("ITEM 3");
        mRowsAdapter.add(new ListRow(gridItemPresenterHeader, gridRowAdapter));

        /* set */
        setAdapter(mRowsAdapter);
    }

    private class GridItemPresenter extends Presenter {
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent) {
            TextView view = new TextView(parent.getContext());
            view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH, GRID_ITEM_HEIGHT));
            view.setFocusable(true);
            view.setFocusableInTouchMode(true);
            view.setBackgroundColor(getResources().getColor(R.color.default_background));
            view.setTextColor(Color.WHITE);
            view.setGravity(Gravity.CENTER);
            return new ViewHolder(view);
        }

        @Override
        public void onBindViewHolder(ViewHolder viewHolder, Object item) {
            ((TextView) viewHolder.view).setText((String) item);
        }

        @Override
        public void onUnbindViewHolder(ViewHolder viewHolder) {

        }
    }

}

なお、MainFragmentの背景色として

    <color name="default_background">#3d3d3d</color>

をcolor.xmlに追加した。

(III) ビルド・実行

ヘッダーとコンテンツの組み合わせが見えればOK。

1点注意。ここでは、 Presenterクラスと実際に表示したいアイテム（ただのString）を用意しただけだった。その他のアニメーション（アイテムを選択すると大きくなって表示される）などはすべてSDKのなかで実装されているので、特に手間をかけなくても大丈夫なようになっている。

UIデザイナーでなくても、 Android TV アプリのUIは

ここまでのソースコード： github.

次の章では How to use Presenter and ViewHolder? – Android TV application hands on tutorial 3、 ImageCardView を用いてカードに画像とタイトル・サブタイトルを載せた表示を行う CardPresenter の実装をする。

本記事は元記事の日本語訳です。

Android TV アプリ開発入門

Nexus Player, SONY BRAVIAと、Android TV（アンドロイドテレビ）が発売されてからすでに時間がたっているがまだまだAndroid TVアプリの開発に関する情報は少ない。そこでここでは、Android TVアプリを実際に自分で実装しながら学べる形式の開発チュートリアルを書いていければと思う。

本稿ではAndroid “TV”プラットフォームに特化した実装を主に紹介していく。特にUIの実装がメイン、なぜならUI はスマホとテレビではその基本思想が大きく異なるからだ。たとえばテレビはリモコンで気軽に操作するようにできているので、 ↑↓→← といった上下左右の方向キーだけで（タッチを使わずに）”気軽に”操作できるようなUIが要求される。

こういったユーザーが”気軽に”操作できるようにするための基礎プラットフォームとしてAndroid open source project（AOSP）からLeanback Support library (android.support.v17.leanback) が提供されている。ちなみにここでいうLeanback（リーンバック）とは、”後ろにもたれる”というような意味。ソファーにもたれながらでも、TVを簡単に操作できるようなUIが理想ですよーという事だろう。

このLeanback Support libraryを使ってアプリを開発することで、このようなUI思想に基づいたアプリが作れるというわけだ。ということで、本稿では主にこのLeanback libraryの使い方を紹介していく。

想定する読者層

• Androidアプリは開発したことがあるが、Android TVアプリに関しては何も知らない
• 初心者～中級者向け

使用するエディタ

Eclipseは2015年にサポートが終わっているので、 Android studio を使って開発を進めていく。Androidアプリ開発では今後標準となるIDEでとてもつかいやすいので、まだ使ったことのない方は、ここからAndroid Studioをダウンロードして設定しましょう！ちなみに、自分は英語版のAndroid Studioをそのまま使っているので日本語版の方は適宜読み替えて読み進めていただければと思います。

注：なお、本稿で説明するソースはAOSPで公開されている android TV サンプルソースコードが元ネタで、ただこのソースコードをもとに、より細かく説明しているだけです。

新しいAndroid TV アプリプロジェクトの作成

1. Android studio

   起動

New project

 Application name: AndroidTVappTutorial

 Company Domain: corochann.com ( or you can use your own domain name )

Target Android Devices

Add an activity to TV

“Add No Activity” 選択後、Finish

するとAndroid studio が自動でAndroidアプリ開発を進めるにあたって必要な最低限のソースコードを自動生成してくれる。

ここまでの手順が終わった状態のソースコードは githubで。

2. Add activity

はじめにActivityを作成する。 “com.corochann.androidtvapptutorial”を右クリックして

New -> Activity -> Blank activity

“Launcher Activity”をチェック。

そして”MainActivity“という名前で、blank activityを作成する。 

すると、Android studioはJava class と layout/activity_main.xmlを自動生成してくれる(res/menu/menu_main.xmlも作成されるが、Android TVアプリでは使わないので無視)

* 注: Android Studio で、”Android TV activity” という項目も見つけることができる。これを選択すると一気に大量のファイルが自動生成される。Leanbackライブラリの各種機能がサンプル実装された状態でのファイルが生成されるので、参考ファイルとしては役立つんだけれど、一度に大量のファイルが生成されるので、どのファイルがどの機能とつながっているのかいまいちわかりづらい。
ということで、本稿ではこれらの機能を一つずつ実装していくことによって、理解を進めていきたい。

次に MainActivity の 実際のUI 表示部分を担当する MainFragmentを作る。

3. Add fragment

パッケージネームを右クリック (例 com.corochann.androidtvapptutorial)

New -> Java Class -> Name: MainFragment

*  上の手順の代わりに、New -> Fragment -> Blank fragment Uncheck “Create layout XML?” を選択すると、これまた一気に不要なコードまで自動生成されてしまうので、今回は空のJava ClassからFragmentを作成していく。

まず、 activity_main.xml を以下のように変更して、MainActivityがMainFragmentのみを表示するようにする。

* 以後、ソースのコピペをしたいときは、右上の “<>” アイコンをクリックするとできます。

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_browse_fragment"
    android:name="com.corochann.androidtvapptutorial.MainFragment" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context=".MainActivity" tools:deviceIds="tv"
    tools:ignore="MergeRootFrame" />

次に MainFragment の修正

この MainFragment を BrowseFragment のサブクラスとする。BrowseFragment class はAndroid SDK Leanback libraryで提供されているクラスで、Android TV の基本・標準となるUIを構築するために使われる（すぐ後、次の章で実例が表示されます）。

package com.corochann.helloandroidtvfromscrach;
 
import android.os.Bundle;
import android.support.v17.leanback.app.BrowseFragment;
import android.util.Log;
 
public class MainFragment extends BrowseFragment {
    private static final String TAG = MainFragment.class.getSimpleName();
 
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        Log.i(TAG, "onActivityCreated");
        super.onActivityCreated(savedInstanceState);
 
    }
}

(I) ビルド・実行

BrowseFragment の構成要素である HeadersFragment と RowsFragment が確認できる。
HeaderFragment (ヘッダー) が右側、 RowsFragment (コンテンツ部分) が左側。このフラグメントの基本設定を行っていく。

まずは初めにBrowseFragmentのメインカラーとタイトルを設定しよう。

ここまでのソースコード： github

4. setupUIElements() をMainFragment.javaに実装

MainFragment.javaにsetupUIElements()を実装する、このメソッドはアプリの基本UI情報を設定する。

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        Log.i(TAG, "onActivityCreated");
        super.onActivityCreated(savedInstanceState);

        setupUIElements();
        
    }

    private void setupUIElements() {
        // setBadgeDrawable(getActivity().getResources().getDrawable(R.drawable.videos_by_google_banner));
        setTitle("Hello Android TV!"); // Badge, when set, takes precedent
        // over title
        setHeadersState(HEADERS_ENABLED);
        setHeadersTransitionOnBackEnabled(true);

        // set fastLane (or headers) background color
        setBrandColor(getResources().getColor(R.color.fastlane_background));
        // set search icon color
        setSearchAffordanceColor(getResources().getColor(R.color.search_opaque));
    }

ここで設定しているのは

• アプリタイトル　もしくは　アプリアイコン
• ブランドカラー

色情報は colors.xml から参照される。このファイルを作成しよう。res/values を右クリックして、

New -> values Resource file
File name: colors.xml -> “OK”
と選択。できたファイルに以下のように記載する。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="fastlane_background">#0096e6</color>
    <color name="search_opaque">#ffaa3f</color>
</resources>

(II) ビルド・実行

右上にタイトルが表示され、ヘッダー部分の色がブランドカラーで指定した色になっていればOK。

ちなみに、 setTitle() のかわりに setBadgeDrawable() を使うこともできる。こちらのメソッドを用いた時にはタイトルテキストの代わりにアイコンが表示される。また、両方のメソッドを読んだ場合にはアイコン表示が優先される。

ここまでのソースコード： github.

5. Android Manifest の修正

ここまでのソースコードでは、アプリのアイコンが Leanback Launcher (Android TV のホーム画面・ホームランチャーアプリ) に表示されていなかったと思う。
アプリのランチャー（起動用）アイコンをAndroid TVで表示するためには、 AndroidManifest.xml を以下のようにする。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.corochann.androidtvapptutorial" >


    <!-- TV app need to declare touchscreen not required -->
    <uses-feature
        android:name="android.hardware.touchscreen"
        android:required="false" />

    <!--
     true:  your app runs on only TV
     false: your app runs on phone and TV -->
    <uses-feature
        android:name="android.software.leanback"
        android:required="true" />


    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Leanback" >
        <activity
            android:name=".MainActivity"
            android:icon="@drawable/app_icon_your_company"
            android:label="@string/app_name"
            android:logo="@drawable/app_icon_your_company" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

また、 app_icon_your_compan.png は main/res/drawble/ フォルダの中に入れた。

(III) ビルド・実行

Leanback launcherにてアプリのランチャーアイコンを表示するには以下の宣言を行う必要がある。

 <category android:name="android.intent.category.LEANBACK_LAUNCHER" />

またアイコン・ロゴはActivityタグ内で指定されている。

        <activity
            android:name=".MainActivity"
            android:icon="@drawable/app_icon_your_company"
            android:label="@string/app_name"
            android:logo="@drawable/app_icon_your_company" >

            ...

To show application icon in Leanback launcher

アプリのアイコンを表示するには、アプリタグ内に以下を記載。

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Leanback" >

        ...

アプリアイコンはActivityのランチャーアイコンとは異なるので注意。アプリアイコンはAndroid TVの設定→アプリ画面で確認できる。

Android TV向けのAndroidManifestの設定に関しては Android developers pageも参照。

次章BrowseFragmentの構成 – Android TVアプリ開発入門２ では BrowseFragment, HeadersFragment, RowsFragment をより深く説明する。Adapter と Presenter を用いて実際にBrowseFragment内にアイテムの表示をしていく。

References

• Android Developer site – Building Apps for TV
• Android TV sample application on github
• Building applications for Android TV