Kartenansicht bereitstellen

In der vorherigen Lektion haben Sie einen Katalogbrowser erstellt, der in ein 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 Klasse BaseCardView und die abgeleiteten Klassen zeigen die mit einem Medienelement verknüpften Metadaten an. Bei der Klasse ImageCardView, die in dieser Lektion verwendet wird, wird ein Bild für den Inhalt und der Titel des Medienelements angezeigt.

Sehen Sie sich auch die Beispielimplementierung in der Leanback-Beispiel-App an.

Abbildung 1: Die Kartenansicht der Leanback-Beispiel-App, wenn diese ausgewählt ist.

Kartenpräsentation erstellen

Ein Presenter generiert Ansichten und bindet Objekte bei Bedarf an sie. Im Stöberfragment, in dem die App den Nutzern den Inhalt 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 von LoaderManager erstellt:

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

Kartenansicht erstellen

In diesem Schritt erstellen Sie die Kartenpräsentation mit einem Ansichtshalter für die Kartenansicht, der Ihre Medieninhaltselemente beschreibt. Beachten Sie, dass jeder Vortragende nur einen Ansichtstyp erstellen darf. Wenn Sie zwei Arten von Kartenansichten haben, benötigen Sie zwei Kartenpräsentationen.

Implementieren Sie im Presenter einen onCreateViewHolder()-Callback, mit dem ein Ansichtsinhaber erstellt wird, der zum Anzeigen eines Inhaltselements verwendet werden kann:

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

Erstellen Sie in der Methode onCreateViewHolder() eine Kartenansicht für Inhaltselemente. Im folgenden Beispiel wird ein ImageCardView verwendet.

Wenn eine Karte ausgewählt wird, wird sie standardmäßig vergrößert. Wenn du eine andere Farbe für die ausgewählte Karte festlegen möchtest, rufe setSelected() wie hier gezeigt auf:

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

Wenn der Nutzer die App öffnet, werden im Presenter.ViewHolder die CardView-Objekte für Ihre Inhaltselemente angezeigt. Sie müssen diese festlegen, um den Fokus vom Steuerkreuz-Controller zu erhalten. Dazu rufen Sie setFocusable(true) und setFocusableInTouchMode(true) auf, wie im folgenden Code gezeigt:

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

...
    cardView.setFocusable(true);
    cardView.setFocusableInTouchMode(true);
    return new ViewHolder(cardView);
}

Wenn der Nutzer ImageCardView auswählt, wird es maximiert und der Textbereich wird in der von Ihnen angegebenen Hintergrundfarbe sichtbar (siehe Abbildung 1).