Les classes d'interface de navigation multimédia fournies par la bibliothèque androidx.leanback 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 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 d'un élément multimédia et comment étendre la classe DetailsSupportFragment afin d'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 un 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 le kit d'UI Leanback, vous utilisez des objets de 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 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 vue à vos objets de données, comme illustré 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-la afin de 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 du 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é liée aux détails
Les fragments tels que DetailsSupportFragment doivent être contenus dans une activité pour être utilisés à des fins d'affichage. En créant une activité pour votre vue détaillée, distincte de l'activité de navigation, vous pouvez l'appeler à l'aide d'un Intent. Cette section 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 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, modifiez la vue principale de navigation multimédia pour qu'elle affiche la 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 afin de démarrer l'activité des détails de l'élément.
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é de navigation principale:
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);
}
});
}
}