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.
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.