Nella lezione precedente hai creato un browser catalogo, implementato in un frammento di navigazione, che visualizza un elenco di elementi multimediali. In questa lezione, creerai le visualizzazioni schede per i tuoi elementi multimediali e li presenterai nel frammento Sfoglia.
La classe e le sottoclassi BaseCardView mostrano i metadati associati a un elemento multimediale. Il corso ImageCardView utilizzato in questa lezione mostra un'immagine per i contenuti insieme al titolo dell'elemento multimediale.
Vedi anche l'implementazione di esempio nell' app di esempio Leanback.
Figura 1. La visualizzazione scheda dell'immagine dell'app di esempio Leanback quando selezionata.
Crea un presentatore della scheda
Un Presenter genera viste e associa gli oggetti a queste
on demand. Nel frammento Sfoglia in cui l'app presenta i propri contenuti all'utente, crei un Presenter per le schede dei contenuti e lo passi all'adattatore che aggiunge i contenuti allo schermo. Nel codice seguente, CardPresenter viene creato nel callback onLoadFinished() di LoaderManager:
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();
}
Creare una visualizzazione schede
In questo passaggio, creerai il presentatore schede con un contenitore per la visualizzazione schede che descrive i tuoi contenuti multimediali. Tieni presente che ogni presentatore deve creare un solo tipo di visualizzazione. Se hai due tipi di visualizzazioni schede, hai bisogno di due presentatori di schede.
In Presenter, implementa un
callback onCreateViewHolder() che crei un titolare della visualizzazione che può essere utilizzato per visualizzare un elemento dei contenuti:
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);
...
Nel metodo onCreateViewHolder(),
crea una visualizzazione schede per gli elementi dei contenuti. Il seguente esempio utilizza un
ImageCardView.
Quando è selezionata una scheda, il comportamento predefinito la espande a una dimensione maggiore. Se vuoi impostare
un colore diverso per la scheda selezionata, chiama setSelected()
come mostrato qui:
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);
}
};
...
Quando l'utente apre l'app, Presenter.ViewHolder
mostra gli oggetti CardView per i tuoi contenuti. Devi impostarle per ricevere
l'elemento attivo dal controller D-pad chiamando setFocusable(true)
e setFocusableInTouchMode(true),
come mostrato nel seguente codice:
Kotlin
...
cardView.isFocusable = true
cardView.isFocusableInTouchMode = true
return ViewHolder(cardView)
}
Java
...
cardView.setFocusable(true);
cardView.setFocusableInTouchMode(true);
return new ViewHolder(cardView);
}
Quando l'utente seleziona l'elemento ImageCardView, questo si espande
per mostrare la sua area di testo con il colore di sfondo specificato, come mostrato nella figura 1.