Nella lezione precedente hai creato un browser del catalogo, implementato in un frammento di esplorazione, che mostra un elenco di elementi multimediali. In questa lezione creerai le visualizzazioni di schede per i tuoi elementi multimediali e li presenterai nel frammento di consultazione.
La classe e le sottoclassi BaseCardView
mostrano i metadati associati a un elemento multimediale. La classe ImageCardView
utilizzata in questa lezione mostra un'immagine per i contenuti e il titolo dell'elemento multimediale.
Consulta anche l'implementazione di esempio nell' app di esempio Leanback.
![Visualizzazione schede dell'app](https://developer.android.google.cn/static/images/tv/card-view.png?authuser=6&hl=it)
Figura 1. La visualizzazione della scheda dell'immagine dell'app di esempio Leanback quando è selezionata.
Crea un presentatore di schede
Un elemento Presenter
genera visualizzazioni e associa gli oggetti
on demand. Nel frammento di navigazione in cui l'app presenta i contenuti all'utente, puoi creare un Presenter
per le schede dei contenuti e passarlo all'adattatore che aggiunge i contenuti allo schermo. Nel seguente codice, l'oggetto 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, devi creare il presentatore della scheda con un titolare di visualizzazione 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 visualizzazione schede, sono necessari due presentatori delle schede.
In Presenter
, implementa un callback onCreateViewHolder()
che crei un titolare della visualizzazione che possa essere utilizzato per visualizzare un elemento di 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 a schede per i contenuti. L'esempio seguente utilizza un
ImageCardView
.
Quando viene selezionata una scheda, il comportamento predefinito la espande in una dimensione maggiore. Se vuoi indicare 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, l'oggetto Presenter.ViewHolder
mostra gli oggetti CardView
per i contenuti. Devi impostarli per ricevere
lo stato 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 ImageCardView
, questo si espande
per mostrare la relativa area di testo con il colore di sfondo che hai specificato, come mostrato nella figura 1.