Ir al contenido

Más visitados

Visitados recientemente

navigation

Providing a Card View

In the previous lesson, you created a catalog browser, implemented in a browse fragment, that displays a list of media items. In this lesson, you create the card views for your media items and present them in the browse fragment.

The BaseCardView class and subclasses display the meta data associated with a media item. The ImageCardView class used in this lesson displays an image for the content along with the media item's title.

This lesson describes code from the Android Leanback sample app, available on GitHub. Use this sample code to start your own app.

App card view

Figure 1. The Leanback sample app image card view when selected.

Create a Card Presenter

A Presenter generates views and binds objects to them on demand. In the browse fragment where your app presents its content to the user, you create a Presenter for the content cards and pass it to the adapter that adds the content to the screen. In the following code, the CardPresenter is created in the onLoadFinished() callback of the LoaderManager.

@Override
public void onLoadFinished(Loader<HashMap<String, List<Movie>>> arg0,
                           HashMap<String, List<Movie>> data) {

    mRowsAdapter = 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(), null);
        i++;
        mRowsAdapter.add(new ListRow(header, listRowAdapter));
    }

    HeaderItem gridHeader = new HeaderItem(i, getString(R.string.more_samples),
            null);

    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));
    mRowsAdapter.add(new ListRow(gridHeader, gridRowAdapter));

    setAdapter(mRowsAdapter);

    updateRecommendations();
}

Create a Card View

In this step, you build the card presenter with a view holder for the card view that describes your media content items. Note that each presenter must only create one view type. If you have two different card view types then you need two different card presenters.

In the Presenter, implement an onCreateViewHolder() callback that creates a view holder that can be used to display a content item.

@Override
public class CardPresenter extends Presenter {

    private Context mContext;
    private static int CARD_WIDTH = 313;
    private static int CARD_HEIGHT = 176;
    private Drawable mDefaultCardImage;

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent) {
        mContext = parent.getContext();
        mDefaultCardImage = mContext.getResources().getDrawable(R.drawable.movie);
...

In the onCreateViewHolder() method, create a card view for content items. The sample below uses an ImageCardView.

When a card is selected, the default behavior expands it to a larger size. If you want to designate a different color for the selected card, call setSelected() as shown here.

...
    ImageCardView cardView = new ImageCardView(mContext) {
        @Override
        public void setSelected(boolean selected) {
            int selected_background = mContext.getResources().getColor(R.color.detail_background);
            int default_background = mContext.getResources().getColor(R.color.default_background);
            int color = selected ? selected_background : default_background;
            findViewById(R.id.info_field).setBackgroundColor(color);
            super.setSelected(selected);
        }
    };
...

When the user opens your app, the Presenter.ViewHolder displays the CardView objects for your content items. You need to set these to receive focus from the D-pad controller by calling setFocusable(true) and setFocusableInTouchMode(true).

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

When the user selects the ImageCardView, it expands to reveal its text area with the background color you specify, as shown in figure 1.

Este sitio usa cookies para almacenar tus preferencias específicas de idioma y visualización.

Obtén las noticias y sugerencias más recientes para programadores de Android, que te ayudarán a lograr el éxito en Google Play.

* Campos obligatorios

¡Muy bien!

Sigue a Google Developers en WeChat

¿Deseas explorar este sitio en ?

Solicitaste ver la página en , pero tu preferencia de idioma actual para este sitio es .

¿Quieres cambiar tu preferencia de idioma y explorar este sitio en ? Si deseas cambiarla en otro momento, usa el menú de idioma que se encuentra en la parte inferior de cada página.

Esta clase requiere un nivel de API igual o superior a

El documento está oculto porque el nivel de API que seleccionaste para la documentación es . Puedes cambiar el nivel de API de la documentación con el selector que está sobre el menú de navegación izquierdo.

Para obtener más información sobre cómo especificar el nivel de API que requiere tu app, consulta el artículo sobre Compatibilidad con diferentes versiones de la plataforma.

Take a short survey?
Help us improve the Android developer experience. (April 2018 — Developer Survey)