Diese Seite wurde von der Cloud Translation API übersetzt.

Kartenansicht bereitstellen

In der vorherigen Lektion haben Sie einen Katalogbrowser erstellt, der in einem Stöberfragment implementiert wurde. zeigt eine Liste mit Medienelementen an. In dieser Lektion erstellen Sie die Kartenansichten für Ihre Medienelemente und und präsentieren sie im Fragment.

Das BaseCardView und abgeleitete Klassen zeigen die mit einem Medienelement verknüpften Metadaten an. Die ImageCardView verwendet, zeigt ein Bild für den Inhalt sowie den Titel des Medienelements an.

Weitere Informationen finden Sie in der Beispielimplementierung in der <ph type="x-smartling-placeholder"></ph> Leanback-Beispiel-App .

Abbildung 1: Bildkartenansicht der Leanback-Beispiel-App, wenn ausgewählt.

Kartenpräsentation erstellen

Ein Presenter-Objekt erzeugt Ansichten und bindet Objekte an diese. on demand. Im Fragment, in dem Ihre Anwendung dem Nutzer ihre Inhalte präsentiert, erstellen Sie ein Presenter für die Inhaltskarten und übergeben Sie sie an den Adapter. mit der die Inhalte dem Bildschirm hinzugefügt werden. Im folgenden Code wird die CardPresenter erstellt. in onLoadFinished() Callback des 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();
}

Kartenansicht erstellen

In diesem Schritt erstellen Sie die Kartenpräsentation mit einem Ansichtshalter für die Kartenansicht, die Ihrer Medieninhalte. Jeder Vortragende darf nur einen Ansichtstyp erstellen. Wenn Sie zwei Kartenansichtstypen verwenden möchten, benötigen Sie zwei Kartenvortragende.

Implementieren Sie in der Presenter ein onCreateViewHolder() -Callback, der einen Ansichtshalter erstellt, der zur Anzeige eines Inhaltselements verwendet werden kann:

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

In der Methode onCreateViewHolder() eine Kartenansicht für Inhaltselemente erstellen. Im folgenden Beispiel wird ein ImageCardView

Wenn eine Karte ausgewählt ist, wird sie standardmäßig vergrößert. Wenn Sie Wählen Sie eine andere Farbe für die ausgewählte Karte aus, rufen Sie setSelected() auf. wie hier gezeigt:

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

Wenn der Nutzer deine App öffnet, wird der Presenter.ViewHolder zeigt die CardView-Objekte für Ihre Inhaltselemente an. Du musst diese festlegen, um setFocusable(true) über das Steuerkreuz aufrufen und setFocusableInTouchMode(true), Dies wird im folgenden Code dargestellt:

Kotlin

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

Java

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

Wenn der Nutzer das ImageCardView auswählt, wird es maximiert. um den Textbereich mit der von Ihnen angegebenen Hintergrundfarbe anzuzeigen (siehe Abbildung 1).

Zurück

Katalogbrowser erstellen

Weiter

Detailansicht erstellen