Creare una visualizzazione dei dettagli

Crea app migliori con Compose
Crea UI accattivanti con codice minimo utilizzando Jetpack Compose per Android TV OS.

Le classi dell'interfaccia di navigazione multimediale fornite dalla libreria androidx.leanback includono classi per la visualizzazione di informazioni aggiuntive su un elemento multimediale, come una descrizione o recensioni. Sono incluse anche classi per intraprendere azioni su quell'elemento, come l'acquisto o la riproduzione dei contenuti.

Questa guida spiega come creare una classe di presentatore per i dettagli degli elementi multimediali e come estendere la classe DetailsSupportFragment per implementare una visualizzazione dei dettagli per un elemento multimediale quando l'utente lo seleziona.

Nota:l'esempio di implementazione mostrato qui utilizza un'attività aggiuntiva per contenere DetailsSupportFragment. Tuttavia, è possibile evitare di creare una seconda attività sostituendo BrowseSupportFragment con DetailsSupportFragment all'interno della stessa attività utilizzando le transazioni di frammenti. Per saperne di più sull'utilizzo delle transazioni di frammenti, consulta Creare un frammento.

Creare un presentatore di dettagli

Nel framework di navigazione multimediale fornito dal toolkit UI Leanback, utilizzi gli oggetti presenter per controllare la visualizzazione dei dati sullo schermo, inclusi i dettagli degli elementi multimediali. A questo scopo, il framework fornisce la classe AbstractDetailsDescriptionPresenter, che è un'implementazione quasi completa del presentatore per i dettagli dell'elemento multimediale. Tutto quello che devi fare è implementare il metodo onBindDescription() per associare i campi della visualizzazione agli oggetti dati, come mostrato nel seguente esempio di codice:

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

Estendere il frammento dei dettagli

Quando utilizzi la classe DetailsSupportFragment per visualizzare i dettagli dell'elemento multimediale, estendi la classe per fornire contenuti aggiuntivi, ad esempio un'immagine di anteprima e azioni per l'elemento multimediale. Puoi anche fornire contenuti aggiuntivi, ad esempio un elenco di elementi multimediali correlati.

Il seguente codice di esempio mostra come utilizzare la classe presenter mostrata nella sezione precedente per aggiungere un'immagine di anteprima e azioni per l'elemento multimediale visualizzato. Questo esempio mostra anche l'aggiunta di una riga di elementi multimediali correlati, che viene visualizzata sotto l'elenco dei dettagli.

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

Creare un'attività di dettagli

I frammenti come DetailsSupportFragment devono essere contenuti all'interno di un'attività per essere utilizzati per la visualizzazione. La creazione di un'attività per la visualizzazione dei dettagli, separata dall'attività di navigazione, consente di richiamare la visualizzazione dei dettagli utilizzando un Intent. Questa sezione spiega come creare un'attività per contenere l'implementazione della visualizzazione dettagliata per gli elementi multimediali.

Crea l'attività dei dettagli creando un layout che faccia riferimento all'implementazione di 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"
/>

Successivamente, crea una classe di attività che utilizza il layout mostrato nell'esempio di codice precedente:

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

Infine, aggiungi questa nuova attività al manifest. Ricorda di applicare il tema Leanback per assicurarti che l'interfaccia utente sia coerente con l'attività di navigazione dei contenuti multimediali.

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

</application>

Definisci un listener per gli elementi selezionati

Dopo aver implementato DetailsSupportFragment, modifica la visualizzazione principale di navigazione dei contenuti multimediali per passare alla visualizzazione dei dettagli quando un utente fa clic su un elemento multimediale. Per attivare questo comportamento, aggiungi un oggetto OnItemViewClickedListener all'BrowseSupportFragment che attiva un intent per avviare l'attività dei dettagli dell'elemento.

Il seguente esempio mostra come implementare un listener per avviare la visualizzazione dei dettagli quando un utente fa clic su un elemento multimediale nell'attività principale di navigazione dei contenuti multimediali:

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