Tworzenie widoku szczegółów

Tworzenie lepszych aplikacji za pomocą Compose

Twórz piękne interfejsy użytkownika przy użyciu minimalnej ilości kodu dzięki Jetpack Compose na Androida TV.

Compose for TV →

Ostrzeżenie: biblioteka Leanback została wycofana. Zamiast niej używaj Jetpack Compose na Androida TV.

Klasy interfejsu przeglądania multimediów udostępniane przez wycofaną bibliotekę androidx.leanback obejmują klasy do wyświetlania dodatkowych informacji o elementach multimedialnych, takich jak opis czy opinie. Obejmują one też klasy do wykonywania działań na tych elementach, np. kupowania ich lub odtwarzania ich treści.

Z tego przewodnika dowiesz się, jak utworzyć klasę prezentera szczegółów elementu multimedialnego i jak rozszerzyć klasę DetailsSupportFragment , aby zaimplementować widok szczegółów elementu multimedialnego, gdy użytkownik go wybierze.

Uwaga: w pokazanym tu przykładzie implementacji używamy dodatkowej aktywności, która zawiera DetailsSupportFragment. Można jednak uniknąć tworzenia drugiej aktywności, zastępując BrowseSupportFragment elementem DetailsSupportFragment w tej samej aktywności za pomocą transakcji fragmentów. Więcej informacji o korzystaniu z transakcji fragmentów znajdziesz w artykule Tworzenie fragmentu.

Tworzenie prezentera szczegółów

W frameworku przeglądania multimediów udostępnianym przez zestaw narzędzi Leanback UI do sterowania wyświetlaniem danych na ekranie, w tym szczegółów elementu multimedialnego, używasz obiektów prezentera. W tym celu framework udostępnia klasę AbstractDetailsDescriptionPresenter , która jest niemal kompletną implementacją prezentera szczegółów elementu multimedialnego. Wystarczy zaimplementować metodę onBindDescription() , aby powiązać pola widoku z obiektami danych, jak pokazano w tym przykładowym kodzie:

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

Rozszerzanie fragmentu szczegółów

Jeśli do wyświetlania szczegółów elementu multimedialnego używasz klasy DetailsSupportFragment, rozszerz ją, aby udostępnić dodatkowe treści, takie jak obraz podglądu i działania dotyczące elementu multimedialnego. Możesz też udostępnić dodatkowe treści, np. listę powiązanych elementów multimedialnych.

Ten przykładowy kod pokazuje, jak za pomocą klasy prezentera przedstawionej w poprzedniej sekcji dodać obraz podglądu i działania dotyczące wyświetlanego elementu multimedialnego. Ten przykład pokazuje też dodanie wiersza powiązanych elementów multimedialnych, który pojawia 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);
    }
}

Tworzenie aktywności szczegółów

Fragmenty takie jak DetailsSupportFragment muszą być zawarte w aktywności, aby można było ich używać do wyświetlania. Utworzenie aktywności dla widoku szczegółów – oddzielnie od aktywności przeglądania – umożliwia wywoływanie widoku szczegółów za pomocą Intent. Z tej sekcji dowiesz się, jak utworzyć aktywność, która będzie zawierać implementację widoku szczegółów dla elementów multimedialnych.

Utwórz aktywność szczegółów, tworząc układ, który odwołuje się do 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, która używa układu pokazanego 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, aby zastosować motyw Leanback, aby zapewnić zgodność interfejsu użytkownika z aktywnością przeglądania multimediów.

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

</application>

Określanie detektora klikniętych elementów

Po zaimplementowaniu DetailsSupportFragment, zmodyfikuj główny widok przeglądania multimediów, aby po kliknięciu elementu multimedialnego przez użytkownika przejść do widoku szczegółów. Aby włączyć to działanie, dodaj obiekt OnItemViewClickedListener do BrowseSupportFragment, który uruchamia intencję rozpoczęcia aktywności szczegółów elementu.

Ten przykład pokazuje, jak zaimplementować detektor, który uruchamia widok szczegółów, gdy użytkownik kliknie element multimedialny w głównej aktywności przeglądania 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);
                }
            });
    }
}