Fornire una visualizzazione a schede

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.

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:

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()
}

@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:

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

@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:

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

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

    ...
    cardView.isFocusable = true
    cardView.isFocusableInTouchMode = true
    return ViewHolder(cardView)
}

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