Detailansicht erstellen

Besser lernen mit der Funktion „Schreiben“
Mit Jetpack Compose für Android TV OS lassen sich mit nur minimalem Code ansprechende UIs erstellen.
<ph type="x-smartling-placeholder"></ph> Für TV verfassen →

Die von der androidx.leanback-Bibliothek bereitgestellten Oberflächenklassen für das Durchsuchen von Medien Einschließen von Klassen zum Anzeigen zusätzlicher Informationen zu einem Medienelement, wie z. B. einer Beschreibung oder Rezensionen. Sie enthalten auch Klassen für die Durchführung von Aktionen im Zusammenhang mit diesem Artikel, wie etwa den Kauf oder die Wiedergabe seines Inhalts.

In diesem Leitfaden wird erläutert, wie Sie eine Vortragsklasse für Details zu Medienelementen erstellen und wie Sie Die Klasse DetailsSupportFragment zum Implementieren einer Detailansicht für ein Medienelement, wenn der Nutzer es auswählt.

Hinweis:Im hier gezeigten Implementierungsbeispiel wird eine zusätzliche Aktivität verwendet, DetailsSupportFragment enthalten. Es ist jedoch möglich, Vermeiden Sie das Erstellen einer zweiten Aktivität, indem Sie BrowseSupportFragment durch einen DetailsSupportFragment innerhalb derselben Aktivität ersetzen: Transaktionen fragmentieren. Weitere Informationen zur Verwendung von Fragmenttransaktionen finden Sie unter Fragment erstellen.

Detailpräsentation erstellen

Im Rahmen des Media Browsing-Frameworks, das vom Leanback-UI-Toolkit bereitgestellt wird, -Objekte zur Steuerung der Anzeige von Daten auf dem Bildschirm, einschließlich Details zu Medienelementen. Zu diesem Zweck sollte das Framework liefert die AbstractDetailsDescriptionPresenter -Klasse, bei der es sich um eine fast vollständige Implementierung der Präsentation für Medienelemente handelt. Details. Sie müssen lediglich die onBindDescription() -Methode zum Binden der Ansichtsfelder an Ihre Datenobjekte, wie in den folgenden Codebeispiel:

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

Detailfragment erweitern

Bei Verwendung der Klasse DetailsSupportFragment zum Anzeigen von Ihre Medienelementdetails zu aktualisieren, erweitern Sie diese Klasse um zusätzliche Inhalte, z. B. eine Vorschau, und Aktionen für das Medienelement. Sie können auch zusätzliche Inhalte bereitstellen, z. B. eine Liste mit Ähnliche Medieninhalte.

Der folgende Beispielcode zeigt, wie die Presenter-Klasse aus der zum vorherigen Abschnitt, um ein Vorschaubild und Aktionen für das angesehene Medienelement hinzuzufügen. Dieses Beispiel zeigt außerdem das Hinzufügen einer Zeile mit ähnlichen Medienelementen, die unter dem Detaileintrag zu sehen ist.

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

Detailaktivität erstellen

Fragmente wie das DetailsSupportFragment müssen enthalten sein innerhalb einer Aktivität, die für die Anzeige verwendet werden soll. Aktivität für deine Daten erstellen – getrennt von der Suchaktivität – können Sie Ihre Detailansicht mithilfe eines Intent Dieses wird erläutert, wie Sie eine Aktivität erstellen, die Ihre Implementierung der Detailansicht für Ihre Medienelemente.

Erstellen Sie die Aktivität „Details“, indem Sie ein Layout erstellen, das auf Ihre Implementierung von 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"
/>

Erstellen Sie als Nächstes eine Aktivitätsklasse, die das im vorherigen Codebeispiel gezeigte Layout verwendet:

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

Fügen Sie diese neue Aktivität schließlich dem Manifest hinzu. Denken Sie daran, das Leanback-Design anzuwenden, dass die Benutzeroberfläche mit der Medienaktivität übereinstimmt.

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

</application>

Listener für angeklickte Elemente definieren

Nach der Implementierung von DetailsSupportFragment Ändern der Hauptansicht für Medien, um zu Ihrer Detailansicht zu wechseln, wenn ein Nutzer auf ein Medium klickt ein. Um dieses Verhalten zu aktivieren, fügen Sie ein OnItemViewClickedListener-Objekt an den BrowseSupportFragment, der einen Intent zum Starten des Elements auslöst Details der Aktivität.

Das folgende Beispiel zeigt, wie ein Listener implementiert wird, um die Detailansicht zu starten, wenn ein Nutzer auf ein Medienelement in der primären Medien-Browseraktivität klickt:

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