Tworzenie widoku szczegółów

Ulepszaj dzięki funkcji tworzenia wiadomości
Dzięki Jetpack Compose na system operacyjny Android TV możesz tworzyć atrakcyjne interfejsy użytkownika przy użyciu minimalnej ilości pisania.

klasy interfejsu przeglądania multimediów dostępne w bibliotece androidx.leanback, Dołącz klasy do wyświetlania dodatkowych informacji o elemencie multimedialnym, np. opisu lub opinii. Obejmuje to też zajęcia dotyczące wykonywania działań związanych z danym elementem, np. zakupu go lub odtwarzania jego treści.

Z tego przewodnika dowiesz się, jak utworzyć zajęcia prowadzące do szczegółów elementu multimedialnego i jak je rozszerzać. klasę DetailsSupportFragment do zaimplementowania widoku szczegółów po wybraniu elementu multimedialnego przez użytkownika.

Uwaga: w przykładzie implementacji użyto dodatkowego działania, aby: zawierają DetailsSupportFragment. Jest jednak możliwe unikaj tworzenia drugiej aktywności, zastępując BrowseSupportFragment elementem DetailsSupportFragment w tej samej aktywności za pomocą parametru transakcji fragmentarycznych. Więcej informacji o korzystaniu z transakcji opartych na fragmentach znajdziesz w sekcji Tworzenie fragmentu.

Tworzenie prezentacji szczegółów

W ramach platformy przeglądania multimediów dostępnej w zestawie narzędzi interfejsu Leanback używasz funkcji pozwalają sterować wyświetlaniem danych na ekranie, w tym szczegółów elementów multimedialnych. W tym celu platforma udostępnia AbstractDetailsDescriptionPresenter klasy, która jest prawie pełną implementacją osoby prowadzącej element multimedialny . Wystarczy, że zaimplementujesz onBindDescription() do powiązania pól widoku z obiektami danych, jak widać w kluczu następujący przykładowy kod:

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

Rozszerz fragment szczegółów

Użycie klasy DetailsSupportFragment do wyświetlania szczegółów elementu multimedialnego, rozszerz te zajęcia o dodatkowe treści, np. podgląd obraz i działania związane z danym elementem multimedialnym. Możesz również podać dodatkowe treści, np. listę powiązane elementy multimedialne.

Ten przykładowy kod pokazuje, jak użyć klasy prowadzącego pokazanej w aby dodać obraz podglądu i działania dla wyświetlanego elementu multimedialnego. Ten przykład pokazuje też dodanie wiersza powiązanych elementów multimedialnych, który znajduje się pod listą szczegółów.

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

Utwórz aktywność z informacjami

Fragmenty takie jak DetailsSupportFragment muszą być zawarte w ramach aktywności, która ma być używana do wyświetlania. Tworzę aktywność dla Twoich informacji – niezależnie od aktywności związanej z przeglądaniem – pozwala wywołać widok szczegółów za pomocą Intent Ten zawiera informacje o tym, jak utworzyć działanie obejmujące implementację widoku szczegółowego Twoje elementy multimedialne.

Utwórz aktywność związaną z szczegółami, tworząc układ, który odwołuje się do Twojej implementacji 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"
/>

Następnie utwórz klasę aktywności wykorzystującą układ pokazany w poprzednim przykładzie kodu:

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

Na koniec dodaj tę nową aktywność do pliku manifestu. Pamiętaj o zastosowaniu motywu Leanback, aby zapewnić zgodność interfejsu z przeglądaniem multimediów.

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

</application>

Zdefiniuj detektor klikanych elementów

Po zaimplementowaniu algorytmu DetailsSupportFragment modyfikować główny widok przeglądania multimediów, aby przejść do widoku szczegółów, gdy użytkownik kliknie plik multimedialny elementu. Aby włączyć to działanie, dodaj parametr OnItemViewClickedListener do funkcji BrowseSupportFragment, który wywołuje intencję uruchomienia elementu szczegóły aktywności.

Przykład poniżej pokazuje, jak wdrożyć detektor, aby uruchamiać widok szczegółów, gdy użytkownik kliknie element multimedialny w głównej aktywności związanej z przeglądaniem multimediów:

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