In dieser Anleitung geht es darum, Kartenansichten für Ihre Media-Elemente zu erstellen und sie im Browse-Fragment mit dem eingestellten Leanback UI-Toolkit zu präsentieren. Die Implementierung des Katalogbrowsers in einem Browse-Fragment wird in der Anleitung zum Browse-Fragmentbeschrieben.
Die Klasse BaseCardView und ihre Unterklassen zeigen die Metadaten an, die mit einem Media-Element verknüpft sind. Die in dieser Lektion verwendete Klasse ImageCardView zeigt ein Bild für den Inhalt zusammen mit dem Titel des Media-Elements an.
Siehe auch die Beispielimplementierung in der eingestellten Leanback-Beispiel-App .
Abbildung 1 : Die Bildkartenansicht der Leanback-Beispiel-App, wenn sie ausgewählt ist.
Karten-Presenter erstellen
Ein Presenter generiert Ansichten und verknüpft Objekte bei Bedarf damit. Im Browse-Fragment, in dem Ihre App dem Nutzer ihre Inhalte präsentiert, erstellen Sie einen Presenter für die Karten mit den Inhalten und übergeben ihn an den Adapter, der die Inhalte auf dem Bildschirm hinzufügt. Im folgenden Code wird der CardPresenter im onLoadFinished()-Callback des LoaderManager erstellt:
Kotlin
override fun onLoadFinished(loader: Loader<HashMap<String, List<Movie>>>, data: HashMap<String, List<Movie>>) { rowsAdapter = ArrayObjectAdapter(ListRowPresenter()) val cardPresenter = CardPresenter() var i = 0L data.entries.forEach { entry -> val listRowAdapter = ArrayObjectAdapter(cardPresenter).apply { entry.value.forEach { movie -> add(movie) } } val header = HeaderItem(i, entry.key) i++ rowsAdapter.add(ListRow(header, listRowAdapter)) } val gridHeader = HeaderItem(i, getString(R.string.more_samples)) val gridRowAdapter = ArrayObjectAdapter(GridItemPresenter()).apply { add(getString(R.string.grid_view)) add(getString(R.string.error_fragment)) add(getString(R.string.personal_settings)) } rowsAdapter.add(ListRow(gridHeader, gridRowAdapter)) adapter = rowsAdapter updateRecommendations() }
Java
@Override public void onLoadFinished(Loader<HashMap<String, List<Movie>>> arg0, HashMap<String, List<Movie>> data) { rowsAdapter = new ArrayObjectAdapter(new ListRowPresenter()); CardPresenter cardPresenter = new CardPresenter(); int i = 0; for (Map.Entry<String, List<Movie>> entry : data.entrySet()) { ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(cardPresenter); List<Movie> list = entry.getValue(); for (int j = 0; j < list.size(); j++) { listRowAdapter.add(list.get(j)); } HeaderItem header = new HeaderItem(i, entry.getKey()); i++; rowsAdapter.add(new ListRow(header, listRowAdapter)); } HeaderItem gridHeader = new HeaderItem(i, getString(R.string.more_samples)); GridItemPresenter gridPresenter = new GridItemPresenter(); ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(gridPresenter); gridRowAdapter.add(getString(R.string.grid_view)); gridRowAdapter.add(getString(R.string.error_fragment)); gridRowAdapter.add(getString(R.string.personal_settings)); rowsAdapter.add(new ListRow(gridHeader, gridRowAdapter)); setAdapter(rowsAdapter); updateRecommendations(); }
Kartenansicht erstellen
In diesem Schritt erstellen Sie den Karten-Presenter mit einem View-Holder für die Kartenansicht, der Ihre Media-Inhalte beschreibt. Beachten Sie, dass jeder Presenter nur einen Ansichtstyp erstellen darf. Wenn Sie zwei Arten von Kartenansichten haben, benötigen Sie zwei Karten-Presenter.
Implementieren Sie im Presenter einen onCreateViewHolder()-Callback, der einen View-Holder erstellt, mit dem ein Inhaltselement angezeigt werden kann:
Kotlin
private const val CARD_WIDTH = 313 private const val CARD_HEIGHT = 176 class CardPresenter : Presenter() { private lateinit var mContext: Context private lateinit var defaultCardImage: Drawable override fun onCreateViewHolder(parent: ViewGroup): Presenter.ViewHolder { mContext = parent.context defaultCardImage = mContext.resources.getDrawable(R.drawable.movie) ...
Java
@Override public class CardPresenter extends Presenter { private Context context; private static int CARD_WIDTH = 313; private static int CARD_HEIGHT = 176; private Drawable defaultCardImage; @Override public ViewHolder onCreateViewHolder(ViewGroup parent) { context = parent.getContext(); defaultCardImage = context.getResources().getDrawable(R.drawable.movie); ...
Erstellen Sie in der Methode onCreateViewHolder() eine Kartenansicht für Inhaltselemente. Im folgenden Beispiel wird ImageCardView verwendet.
Wenn eine Karte ausgewählt wird, wird sie standardmäßig vergrößert. Wenn Sie eine andere Farbe für die ausgewählte Karte festlegen möchten, rufen Sie setSelected() auf, wie hier gezeigt:
Kotlin
... val cardView = object : ImageCardView(context) { override fun setSelected(selected: Boolean) { val selected_background = context.resources.getColor(R.color.detail_background) val default_background = context.resources.getColor(R.color.default_background) val color = if (selected) selected_background else default_background findViewById<View>(R.id.info_field).setBackgroundColor(color) super.setSelected(selected) } } ...
Java
... ImageCardView cardView = new ImageCardView(context) { @Override public void setSelected(boolean selected) { int selected_background = context.getResources().getColor(R.color.detail_background); int default_background = context.getResources().getColor(R.color.default_background); int color = selected ? selected_background : default_background; findViewById(R.id.info_field).setBackgroundColor(color); super.setSelected(selected); } }; ...
Wenn der Nutzer Ihre App öffnet, zeigt Presenter.ViewHolder die CardView-Objekte für Ihre Inhaltselemente an. Sie müssen so festgelegt werden, dass sie den Fokus vom Steuerkreuz-Controller erhalten. Rufen Sie dazu setFocusable(true) und setFocusableInTouchMode(true) auf, wie im folgenden Code gezeigt:
Kotlin
... cardView.isFocusable = true cardView.isFocusableInTouchMode = true return ViewHolder(cardView) }
Java
... cardView.setFocusable(true); cardView.setFocusableInTouchMode(true); return new ViewHolder(cardView); }
Wenn der Nutzer ImageCardView auswählt, wird sie erweitert und der Textbereich mit der von Ihnen angegebenen Hintergrundfarbe angezeigt, wie in Abbildung 1 zu sehen.