Créer une vue détaillée

Développer de meilleures applications avec Compose
Créez de superbes UI avec un minimum de code à l'aide de Jetpack Compose pour Android TV OS.
Composer pour la TV →

Les classes d'interface de navigation multimédia fournies par la bibliothèque androidx.leanback obsolète incluent des classes permettant d'afficher des informations supplémentaires sur un élément multimédia, telles qu'une description ou des avis. Elles incluent également des classes permettant d'effectuer des actions sur cet élément, comme l'acheter ou lire son contenu.

Ce guide explique comment créer une classe de présentateur pour les détails des éléments multimédias et comment étendre la classe DetailsSupportFragment pour implémenter une vue détaillée d'un élément multimédia lorsque l'utilisateur le sélectionne.

Remarque : L'exemple d'implémentation présenté ici utilise une activité supplémentaire pour contenir le DetailsSupportFragment. Toutefois, il est possible d'éviter de créer une deuxième activité en remplaçant BrowseSupportFragment par DetailsSupportFragment dans la même activité à l'aide de transactions de fragment. Pour en savoir plus sur l'utilisation des transactions de fragment, consultez Créer un fragment.

Créer un présentateur de détails

Dans le framework de navigation multimédia fourni par la boîte à outils Leanback UI, vous utilisez des objets de présentation pour contrôler l'affichage des données à l'écran, y compris les détails des éléments multimédias. À cette fin, le framework fournit la classe AbstractDetailsDescriptionPresenter, qui est une implémentation presque complète du présentateur pour les détails des éléments multimédias. Il vous suffit d'implémenter la méthode onBindDescription() pour lier les champs de la vue à vos objets de données, comme indiqué dans l'exemple de code suivant :

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

Étendre le fragment de détails

Lorsque vous utilisez la classe DetailsSupportFragment pour afficher les détails de votre élément multimédia, étendez cette classe pour fournir du contenu supplémentaire, tel qu'une image d'aperçu et des actions pour l'élément multimédia. Vous pouvez également fournir du contenu supplémentaire, comme une liste d'éléments multimédias associés.

L'exemple de code suivant montre comment utiliser la classe de présentateur présentée dans la section précédente pour ajouter une image d'aperçu et des actions pour l'élément multimédia en cours de lecture. Cet exemple montre également l'ajout d'une ligne d'éléments multimédias associés, qui apparaît sous la liste des détails.

Kotlin

private const val TAG = "MediaItemDetailsFragment"

class MediaItemDetailsFragment : DetailsSupportFragment() {
    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 DetailsSupportFragment {
    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);
    }
}

Créer une activité "Détails"

Les fragments tels que DetailsSupportFragment doivent être contenus dans une activité pour être utilisés pour l'affichage. La création d'une activité pour votre vue de détails, distincte de l'activité de navigation, vous permet d'appeler votre vue de détails à l'aide d'un Intent. Cette section explique comment créer une activité pour contenir l'implémentation de la vue détaillée de vos éléments multimédias.

Créez l'activité de détails en créant une mise en page qui fait référence à votre implémentation de DetailsSupportFragment : 

<!-- 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"
/>

Ensuite, créez une classe d'activité qui utilise la mise en page affichée dans l'exemple de code précédent :

Kotlin

class DetailsActivity : FragmentActivity() {

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

Java

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

Enfin, ajoutez cette nouvelle activité au fichier manifeste. N'oubliez pas d'appliquer le thème Leanback pour vous assurer que l'interface utilisateur est cohérente avec l'activité de navigation multimédia. 

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

</application>

Définir un écouteur pour les éléments sur lesquels l'utilisateur a cliqué

Après avoir implémenté DetailsSupportFragment, modifiez votre vue principale de navigation multimédia pour passer à votre vue détaillée lorsqu'un utilisateur clique sur un élément multimédia. Pour activer ce comportement, ajoutez un objet OnItemViewClickedListener au BrowseSupportFragment qui déclenche un intent pour démarrer l'activité de détails de l'élément.

L'exemple suivant montre comment implémenter un écouteur pour démarrer la vue détaillée lorsqu'un utilisateur clique sur un élément multimédia dans l'activité principale de navigation multimédia :

Kotlin

class BrowseMediaActivity : FragmentActivity() {
    ...
    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 FragmentActivity {
    ...
    @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);
                }
            });
    }
}
Précédent
Fournir une vue Fiche
Suivant
Utiliser les commandes de transport