In der vorherigen Lektion haben Sie einen Katalogbrowser erstellt, der in einem Suchfragment implementiert ist und eine Liste von Medienelementen anzeigt. In dieser Lektion erstellen Sie die Kartenansichten für Ihre Medienelemente und präsentieren sie im Suchfragment.
Die BaseCardView-Klasse und die abgeleiteten Klassen zeigen die mit einem Medienelement verknüpften Metadaten an. Die in dieser Lektion verwendete Klasse ImageCardView zeigt ein Bild für den Inhalt zusammen mit dem Titel des Medienelements an.
Weitere Informationen finden Sie in der Beispielimplementierung in der Leanback-Beispiel-App.
Abbildung 1: Bildkartenansicht der Leanback-Beispiel-App, wenn ausgewählt.
Kartenpräsentation erstellen
Ein Presenter generiert Ansichten und bindet Objekte bei Bedarf daran. Im Fragment, in dem Ihre App dem Nutzer Inhalte präsentiert, erstellen Sie ein Presenter für die Inhaltskarten und übergeben es an den Adapter, der den Inhalt dem Bildschirm hinzufügt. Im folgenden Code wird die 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 die Kartenpräsentation mit einem Ansichtsinhaber für die Kartenansicht, die Ihre Medieninhaltselemente beschreibt. Jeder Vortragende darf nur einen Ansichtstyp erstellen. Wenn Sie zwei Kartenansichtstypen haben, benötigen Sie zwei Kartenvortragende.
Implementieren Sie in der Presenter einen onCreateViewHolder()-Callback, der einen Ansichtshalter erstellt, der zum Anzeigen eines Inhaltselements verwendet 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 ein ImageCardView verwendet.
Wenn eine Karte ausgewählt ist, wird sie standardmäßig vergrößert. Wenn Sie für die ausgewählte Karte eine andere Farbe 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 deine App öffnet, zeigt der Presenter.ViewHolder die CardView-Objekte für deine Inhaltselemente an. Du musst sie so einstellen, dass der Fokus vom Steuerkreuz-Controller empfangen wird. Dazu rufst du 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 das ImageCardView auswählt, wird es maximiert und der Textbereich wird mit der von Ihnen angegebenen Hintergrundfarbe angezeigt (siehe Abbildung 1).