Cómo crear una vista de detalles

Las clases de interfaces de navegación multimedia que brinda la biblioteca de Leanback de AndroidX incluyen clases para mostrar información adicional sobre un elemento multimedia, como una descripción o reseñas, y para realizar acciones sobre ese elemento, como comprarlo o reproducir su contenido.

En esta lección, se explica cómo crear una clase de presentador para los detalles de un elemento multimedia y cómo extender la clase DetailsFragment a fin de implementar una vista de detalles para un elemento cuando lo selecciona un usuario.

Nota: En el ejemplo de implementación que se muestra aquí, se usa una actividad adicional para que contenga el DetailsFragment. Sin embargo, puedes evitar crear una segunda actividad reemplazando el BrowseFragment actual por un DetailsFragment dentro de la misma actividad mediante transacciones de fragmentos. Para obtener más información sobre cómo usar fragmentos de transacciones, consulta la capacitación sobre Cómo crear una IU dinámica con fragmentos.

Cómo crear un presentador de detalles

En el marco de trabajo de navegación de medios que proporciona la biblioteca Leanback, puedes usar objetos del presentador para controlar cómo se muestran los datos en pantalla, incluidos los detalles de elementos multimedia. En el marco de trabajo, se proporciona la clase AbstractDetailsDescriptionPresenter para este fin, lo que es casi una implementación completa del presentador para los detalles de los elementos multimedia. Lo único que tienes que hacer es implementar el método onBindDescription() a fin de vincular los campos de vistas a tus objetos de datos, como se muestra en el siguiente ejemplo de código:

Kotlin

    class DetailsDescriptionPresenter : AbstractDetailsDescriptionPresenter() {

        override fun onBindDescription(viewHolder: AbstractDetailsDescriptionPresenter.ViewHolder, itemData: Any) {
            val details = itemData as MyMediaItemDetails
            // In a production app, the itemData object contains the information
            // needed to display details for the media item:
            // viewHolder.title.text = details.shortTitle

            // Here we provide static data for testing purposes:
            viewHolder.apply {
                title.text = itemData.toString()
                subtitle.text = "2014   Drama   TV-14"
                body.text = ("Lorem ipsum dolor sit amet, consectetur "
                        + "adipisicing elit, sed do eiusmod tempor incididunt ut labore "
                        + " et dolore magna aliqua. Ut enim ad minim veniam, quis "
                        + "nostrud exercitation ullamco laboris nisi ut aliquip ex ea "
                        + "commodo consequat.")
            }
        }
    }
    

Java

    public class DetailsDescriptionPresenter
            extends AbstractDetailsDescriptionPresenter {

        @Override
        protected void onBindDescription(ViewHolder viewHolder, Object itemData) {
            MyMediaItemDetails details = (MyMediaItemDetails) itemData;
            // In a production app, the itemData object contains the information
            // needed to display details for the media item:
            // viewHolder.getTitle().setText(details.getShortTitle());

            // Here we provide static data for testing purposes:
            viewHolder.getTitle().setText(itemData.toString());
            viewHolder.getSubtitle().setText("2014   Drama   TV-14");
            viewHolder.getBody().setText("Lorem ipsum dolor sit amet, consectetur "
                    + "adipisicing elit, sed do eiusmod tempor incididunt ut labore "
                    + " et dolore magna aliqua. Ut enim ad minim veniam, quis "
                    + "nostrud exercitation ullamco laboris nisi ut aliquip ex ea "
                    + "commodo consequat.");
        }
    }
    

Cómo extender el fragmento de detalles

Cuando usas la clase DetailsFragment para mostrar los detalles de tus elementos multimedia, debes extenderla a fin de proporcionar contenido adicional, como una vista previa de la imagen y acciones para el elemento multimedia. También puedes brindar contenido adicional, como una lista de elementos multimedia relacionados.

En el siguiente ejemplo de código, se muestra cómo usar la clase de presentador descrita en la sección anterior a fin de agregar una vista previa de la imagen y acciones para los elementos multimedia que se están viendo. En este ejemplo, también se muestra la inclusión de una fila de elementos multimedia relacionados, que aparecerá abajo del listado de detalles.

Kotlin

    private const val TAG = "MediaItemDetailsFragment"

    class MediaItemDetailsFragment : DetailsFragment() {
        private lateinit var rowsAdapter: ArrayObjectAdapter

        override fun onCreate(savedInstanceState: Bundle?) {
            Log.i(TAG, "onCreate")
            super.onCreate(savedInstanceState)

            buildDetails()
        }

        private fun buildDetails() {
            val selector = ClassPresenterSelector().apply {
                // Attach your media item details presenter to the row presenter:
                FullWidthDetailsOverviewRowPresenter(DetailsDescriptionPresenter()).also {
                    addClassPresenter(DetailsOverviewRow::class.java, it)
                }
                addClassPresenter(ListRow::class.java, ListRowPresenter())
            }
            rowsAdapter = ArrayObjectAdapter(selector)

            val res = activity.resources
            val detailsOverview = DetailsOverviewRow("Media Item Details").apply {

                // Add images and action buttons to the details view
                imageDrawable = res.getDrawable(R.drawable.jelly_beans)
                addAction(Action(1, "Buy $9.99"))
                addAction(Action(2, "Rent $2.99"))
            }
            rowsAdapter.add(detailsOverview)

            // Add a Related items row
            val listRowAdapter = ArrayObjectAdapter(StringPresenter()).apply {
                add("Media Item 1")
                add("Media Item 2")
                add("Media Item 3")
            }
            val header = HeaderItem(0, "Related Items")
            rowsAdapter.add(ListRow(header, listRowAdapter))

            adapter = rowsAdapter
        }
    }
    

Java

    public class MediaItemDetailsFragment extends DetailsFragment {
        private static final String TAG = "MediaItemDetailsFragment";
        private ArrayObjectAdapter rowsAdapter;

        @Override
        public void onCreate(Bundle savedInstanceState) {
            Log.i(TAG, "onCreate");
            super.onCreate(savedInstanceState);

            buildDetails();
        }

        private void buildDetails() {
            ClassPresenterSelector selector = new ClassPresenterSelector();
            // Attach your media item details presenter to the row presenter:
            FullWidthDetailsOverviewRowPresenter rowPresenter =
                new FullWidthDetailsOverviewRowPresenter(
                    new DetailsDescriptionPresenter());

            selector.addClassPresenter(DetailsOverviewRow.class, rowPresenter);
            selector.addClassPresenter(ListRow.class,
                    new ListRowPresenter());
            rowsAdapter = new ArrayObjectAdapter(selector);

            Resources res = getActivity().getResources();
            DetailsOverviewRow detailsOverview = new DetailsOverviewRow(
                    "Media Item Details");

            // Add images and action buttons to the details view
            detailsOverview.setImageDrawable(res.getDrawable(R.drawable.jelly_beans));
            detailsOverview.addAction(new Action(1, "Buy $9.99"));
            detailsOverview.addAction(new Action(2, "Rent $2.99"));
            rowsAdapter.add(detailsOverview);

            // Add a Related items row
            ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(
                    new StringPresenter());
            listRowAdapter.add("Media Item 1");
            listRowAdapter.add("Media Item 2");
            listRowAdapter.add("Media Item 3");
            HeaderItem header = new HeaderItem(0, "Related Items", null);
            rowsAdapter.add(new ListRow(header, listRowAdapter));

            setAdapter(rowsAdapter);
        }
    }
    

Cómo crear una actividad de detalles

Fragmentos como DetailsFragment deben incluirse dentro de una actividad a fin de usarlos para la visualización. Crear una actividad para tu vista de detalles, independiente de la actividad de navegación, te permite invocar la vista mediante un Intent. En esta sección, se explica cómo construir una actividad a fin de que contenga tu implementación de la vista de detalles para tus elementos multimedia.

Empieza a crear la actividad de detalles mediante un diseño que haga referencia a tu implementación de DetailsFragment:

    <!-- file: res/layout/details.xml -->

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        android:name="com.example.android.mediabrowser.MediaItemDetailsFragment"
        android:id="@+id/details_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
    />
    

A continuación, crea una clase de actividad que use el diseño que se muestra en el ejemplo de código anterior:

Kotlin

    class DetailsActivity : Activity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.details)
        }
    }
    

Java

    public class DetailsActivity extends Activity
    {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.details);
        }
    }
    

Por último, agrega esta nueva actividad al manifiesto. Recuerda aplicar el tema Leanback para garantizar que la interfaz de usuario sea coherente con la actividad de navegación de medios:

    <application>
      ...

      <activity android:name=".DetailsActivity"
        android:exported="true"
        android:theme="@style/Theme.Leanback"/>

    </application>
    

Cómo definir un objeto de escucha para elementos en los que se hizo clic

Una vez que implementes el DetailsFragment, modifica tu vista principal de navegación de medios para mover la vista cuando un usuario haga clic en un elemento multimedia. Si quieres habilitar este comportamiento, debes agregar un objeto OnItemViewClickedListener al BrowseFragment para activar un intent que inicie la actividad de detalles del elemento.

En el siguiente ejemplo, se muestra cómo implementar un objeto de escucha para iniciar la vista de detalles cuando un usuario hace clic en un elemento multimedia en la actividad principal de navegación de medios:

Kotlin

    class BrowseMediaActivity : AppCompatActivity() {
        ...

        override fun onCreate(savedInstanceState: Bundle?) {
            ...

            // create the media item rows
            buildRowsAdapter()

            // add a listener for selected items
            browseFragment.onItemViewClickedListener = OnItemViewClickedListener { _, item, _, _ ->
                println("Media Item clicked: ${item}")
                val intent = Intent(this@BrowseMediaActivity, DetailsActivity::class.java).apply {
                    // pass the item information
                    extras.putLong("id", item.getId())
                }
                startActivity(intent)
            }
        }
    }
    

Java

    public class BrowseMediaActivity extends Activity {
        ...

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            ...

            // create the media item rows
            buildRowsAdapter();

            // add a listener for selected items
            browseFragment.OnItemViewClickedListener(
                new OnItemViewClickedListener() {
                    @Override
                    public void onItemClicked(Object item, Row row) {
                        System.out.println("Media Item clicked: " + item.toString());
                        Intent intent = new Intent(BrowseMediaActivity.this,
                                DetailsActivity.class);
                        // pass the item information
                        intent.getExtras().putLong("id", item.getId());
                        startActivity(intent);
                    }
                });
        }
    }