手順4： Presenterを介してユーザーインターフェイス（UI）を編集する
Presenterクラスについて詳しく見ていきましょう。Presenterクラスを使用すると、基になるデータ構造を編集しなくても、Leanback対応アプリのルックアンドフィールを定義できます。
Presenterクラス
Leanbackテンプレートは、一般的な開発パターンであるModel-view-controller（MVC）のカスタム版に基づいて作成されています。ここでは、PresenterクラスがViewとして機能します。Presenterは引数としてArrayObjectAdapterに渡され、アダプターのコンテンツの表示方法を定義します。
このLeanbackテンプレートでは、さまざまなPresenterが事前定義されています。
CardPresenter：単一のコンテンツを定義します。ListRowPresenter：さまざまなコンテンツを1行にどのように表示・配置するかを定義します。DetailsDescriptionPresenter：DetailsFragmentのUIを定義します。
これらのPresenterの実装は非常によく似ています。いずれもViewHolderパターンに基づいており、主にビューのフィールドを設定するメソッドを持つカスタムビューによって構成されます。
例として、CardPresenterのカスタマイズについて詳しく見てみましょう。
CardPresenterのカスタマイズ
BrowseFragmentでは、CardPresenterを使用して、アダプターの単一アイテムのUIを定義しています。
public class MainFragment extends BrowseFragment {
CardPresenter cardPresenter = new CardPresenter();
//行のアダプターを作成し、すべての映画を追加します
ArrayObjectAdapter listRowAdapter
= new ArrayObjectAdapter(cardPresenter);
}
前の画像で強調表示されたビューはImageCardViewと呼ばれるカスタムビューで、単一コンポーネントのUIを定義するためにCardPresenterで使用されます。
CardPresenterでビューがどのように初期化されるかを見てみましょう。
public class CardPresenter extends Presenter {
public ViewHolder onCreateViewHolder(ViewGroup parent) {
...
ImageCardView cardView = new ImageCardView(parent.getContext);
cardView.setFocusable(true);
cardView.setFocusableInTouchMode(true);
return new ViewHolder(cardView);
...
}
}
ここで注意すべきことは2つあります。
- 前述したとおり、
CardPresenterはViewHolderパターンに基づいて構築されています。これにより、ビューが正しくリサイクルされ、メモリが無駄になることはありません。 CardViewはSetFocusable(true)およびsetFocusableInTouchMode(true)に設定されます。TV画面には既存のタッチ操作はありませんが、現在Androidがビューのフォーカス機能をこの方式で管理しているため、この手順が必要となります。
次に、ImageCardView（およびPresenter）のコンポーネントがどのように設定されるかを見てみましょう。
public void onBindViewHolder(Presenter.ViewHolder viewHolder, Object item) {
Movie movie = (Movie) item;
ImageCardView cardView = (ImageCardView) viewHolder.view;
if (movie.getCardImageUrl() != null) {
cardView.setTitleText(movie.getTitle());
cardView.setContentText(movie.getDescription());
Glide.with(viewHolder.view.getContext())
.load(movie.getCardImageUrl())
.centerCrop()
.into(cardView.getMainImageView());
}
}
この例では、独自のカスタムクラスである「Movie」を使用して、表示する情報を取得しています。
cardViewはViewHolderから取得されます。その後、シンプルなセッターであるsetTitleText()およびsetContentText()を使用して、ビューのメインフィールドを編集します。
Leanbackは、Glideライブラリを自動的に使用してサムネイルの画像を取得します（ただし、ほかの画像読み込みライブラリと簡単に置き換えることができます）。