手順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ライブラリを自動的に使用してサムネイルの画像を取得します(ただし、ほかの画像読み込みライブラリと簡単に置き換えることができます)。