Membuat tampilan detail

Membangun aplikasi dengan lebih baik menggunakan Compose
Membuat UI yang menarik dengan kode minimal menggunakan Jetpack Compose untuk Android TV OS.

Class antarmuka penjelajahan media yang disediakan oleh library androidx.Lean sertakan class untuk menampilkan informasi tambahan mengenai item media, seperti deskripsi atau ulasan. Kategori ini juga mencakup class untuk mengambil tindakan terhadap item tersebut, seperti membelinya atau memutar kontennya.

Panduan ini membahas cara membuat kelas presenter untuk detail item media dan cara memperluas class DetailsSupportFragment untuk menerapkan tampilan detail untuk item media saat pengguna memilihnya.

Catatan: Contoh penerapan yang ditunjukkan di sini menggunakan aktivitas tambahan untuk berisi DetailsSupportFragment. Namun, ada kemungkinan hindari membuat aktivitas kedua dengan mengganti BrowseSupportFragment dengan DetailsSupportFragment dalam aktivitas yang sama menggunakan transaksi fragmen. Untuk informasi selengkapnya tentang cara menggunakan transaksi fragmen, lihat Membuat fragmen.

Membuat presenter detail

Dalam kerangka kerja penjelajahan media yang disediakan oleh perangkat{i> <i}UI Leanback, Anda menggunakan {i>presenter<i} untuk mengontrol tampilan data di layar, termasuk detail item media. Untuk tujuan ini, kerangka kerja menyediakan AbstractDetailsDescriptionPresenter , yang merupakan implementasi yang hampir selesai dari presenter item media spesifikasi pendukung. Anda hanya perlu mengimplementasikan onBindDescription() untuk mengikat bidang tampilan ke objek data, seperti yang ditunjukkan dalam contoh kode berikut:

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

Mengembangkan fragmen detail

Saat menggunakan class DetailsSupportFragment untuk menampilkan detail item media, perluas class tersebut untuk menyediakan konten tambahan, seperti pratinjau gambar dan tindakan untuk item media. Anda juga dapat menyediakan konten tambahan, seperti daftar item media terkait.

Kode contoh berikut menunjukkan cara menggunakan kelas presenter yang ditunjukkan dalam bagian sebelumnya guna menambahkan gambar pratinjau dan tindakan untuk item media yang sedang dilihat. Contoh ini juga menunjukkan penambahan baris item media terkait, yang muncul di bawah listingan detail.

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

Membuat aktivitas detail

Fragmen seperti DetailsSupportFragment harus berada dalam aktivitas yang akan digunakan untuk tampilan. Membuat aktivitas untuk detail Anda —terpisah dari aktivitas penjelajahan—memungkinkan Anda memanggil tampilan detail menggunakan Intent. Ini menjelaskan cara membangun aktivitas untuk memuat implementasi tampilan detail untuk item media Anda.

Buat aktivitas detail dengan membangun tata letak yang mereferensikan implementasi Anda 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"
/>

Berikutnya, buat kelas aktivitas yang menggunakan layout yang ditampilkan dalam contoh kode sebelumnya:

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

Terakhir, tambahkan aktivitas baru ini ke manifes. Jangan lupa menerapkan tema Leanback untuk memastikan bahwa antarmuka pengguna konsisten dengan aktivitas penjelajahan media.

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

</application>

Menentukan pemroses untuk item yang diklik

Setelah Anda mengimplementasikan DetailsSupportFragment, ubah tampilan penjelajahan media utama Anda untuk berpindah ke tampilan detail ketika pengguna mengklik yang bermanfaat. Untuk mengaktifkan perilaku ini, tambahkan OnItemViewClickedListener ke BrowseSupportFragment yang memicu intent untuk memulai item aktivitas detail.

Contoh berikut menunjukkan cara menerapkan pemroses untuk memulai tampilan detail saat pengguna mengklik item media dalam aktivitas penjelajahan media utama:

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