Les classes de l'interface de navigation multimédia fournies par la bibliothèque Android Leanback incluent des classes permettant d'afficher des informations supplémentaires sur un élément multimédia, telles qu'une description ou des avis. ainsi que des classes permettant d'effectuer des actions sur un article (par exemple, 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 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 DetailsSupportFragment dans la même activité à l'aide de transactions de fragment. Pour en savoir plus sur l'utilisation des transactions de fragment, consultez la page Créer un fragment.
Créer un présentateur de détails
Dans le framework de navigation multimédia fourni par la bibliothèque Leanback, vous utilisez des objets présentateur pour contrôler l'affichage des données à l'écran, y compris les détails des éléments multimédias.
À cet effet, 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 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-la 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, tel qu'une liste d'éléments multimédias associés.
L'exemple de code suivant montre comment utiliser la classe du présentateur de la section précédente afin d'ajouter une image d'aperçu et des actions pour l'élément multimédia en cours d'affichage. Cet exemple montre également l'ajout d'une ligne d'éléments multimédias associés, qui apparaît sous la liste détaillée.
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é de vue détaillée
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 la vue détaillée, distincte de l'activité de navigation, vous permet d'appeler cette vue à l'aide d'un Intent. Cette section explique comment créer une activité destinée à contenir l'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 des utilisateurs ont cliqué
Après avoir implémenté DetailsSupportFragment, modifiez l'affichage principal de la navigation multimédia pour passer à la vue détaillée lorsqu'un utilisateur clique sur un élément multimédia. Pour activer ce comportement, ajoutez un objet OnItemViewClickedListener à BrowseSupportFragment qui déclenche un intent afin de lancer 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 multimédia 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);
}
});
}
}