Créer une vue détaillée

Créez mieux avec Compose

Créez des interfaces utilisateur attrayantes avec un minimum de code à l'aide de Jetpack Compose pour l'OS Android TV.

<ph type="x-smartling-placeholder"></ph> Compose pour la télévision →

Classes de l'interface de navigation multimédia fournies par la bibliothèque androidx.leanback Inclure des classes permettant d'afficher des informations supplémentaires sur un élément multimédia, comme une description ou des avis. Elles incluent également des cours permettant d'effectuer des actions sur cet article, 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 portée 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 contient le DetailsSupportFragment. Cependant, il est possible de évitez de créer une deuxième activité en remplaçant BrowseSupportFragment par un DetailsSupportFragment dans la même activité à l'aide de les 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 le kit d'interface utilisateur Leanback, vous utilisez le présentateur 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 le AbstractDetailsDescriptionPresenter , qui est une implémentation presque complète du présentateur pour l'élément multimédia, plus de détails. Il vous suffit d'implémenter onBindDescription() pour lier les champs de vue à vos objets de données, comme indiqué dans la 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 l'élément multimédia, étendez cette classe pour fournir du contenu supplémentaire, comme un aperçu. et des actions pour l'élément multimédia. Vous pouvez également fournir des contenus supplémentaires, tels qu'une liste les éléments multimédias associés.

L'exemple de code suivant montre comment utiliser la classe Presenter présentée dans le précédente afin d'ajouter une image d'aperçu et des actions pour l'élément multimédia consulté. Cet exemple affiche é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é liée aux détails

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

Créez l'activité "Details" (Détails) en créant une mise en page qui référence votre implémentation de le 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 illustré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, Modifier l'affichage principal de navigation multimédia pour accéder à la vue détaillée lorsqu'un utilisateur clique sur un élément multimédia élément. Pour activer ce comportement, ajoutez un OnItemViewClickedListener à la classe BrowseSupportFragment qui déclenche un intent pour démarrer l'élément détaille l'activité.

L'exemple suivant montre comment implémenter un écouteur pour lancer 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);
                }
            });
    }
}