Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

Membuat tampilan detail

Class antarmuka penjelajahan media yang disediakan oleh v17 leanback support library menyertakan class untuk menampilkan informasi tambahan tentang item media, seperti deskripsi atau ulasan, dan untuk mengambil tindakan pada item tersebut, seperti membelinya atau memutar kontennya.

Tutorial ini membahas cara membuat kelas presenter untuk detail item media, serta cara memperluas class DetailsFragment untuk mengimplementasikan tampilan detail bagi item media saat dipilih oleh pengguna.

Catatan: Contoh implementasi yang ditunjukkan di sini menggunakan aktivitas tambahan untuk memuat DetailsFragment. Namun, Anda boleh tidak membuat aktivitas kedua dengan mengganti BrowseFragment saat ini dengan DetailsFragment dalam aktivitas yang sama menggunakan transaksi fragmen. Untuk informasi selengkapnya tentang menggunakan transaksi fragmen, lihat pelatihan Membuat UI yang dinamis dengan fragmen.

Membuat presenter detail

Dalam framework penjelajahan media yang disediakan oleh leanback library, objek presenter digunakan untuk mengontrol tampilan data di layar, termasuk detail item media. Untuk tujuan ini, framework menyediakan kelas AbstractDetailsDescriptionPresenter yang merupakan implementasi yang hampir selesai dari presenter detail item media. Anda hanya perlu mengimplementasikan metode onBindDescription() untuk mengikat bidang tampilan ke objek data, seperti yang ditunjukkan dalam sampel 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

Ketika menggunakan kelas DetailsFragment untuk menampilkan detail item media, kembangkan kelas tersebut untuk menyediakan konten tambahan seperti gambar pratinjau dan tindakan untuk item media. Anda juga bisa menyediakan konten tambahan seperti daftar item media terkait.

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

Kotlin

    private const val TAG = "MediaItemDetailsFragment"

    class MediaItemDetailsFragment : DetailsFragment() {
        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 DetailsFragment {
        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 DetailsFragment harus berada dalam sebuah aktivitas agar bisa digunakan untuk tampilan. Dengan membuat aktivitas yang terpisah dari aktivitas penjelajahan untuk tampilan detail, Anda bisa memanggil tampilan detail menggunakan Intent. Bagian ini menjelaskan cara membuat aktivitas untuk memuat implementasi tampilan detail bagi item media Anda.{}

Mulai buat aktivitas detail dengan membuat tata letak yang mereferensikan implementasi DetailsFragment Anda:

    <!-- 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 tata letak seperti dalam contoh kode sebelumnya:

Kotlin

    class DetailsActivity : Activity() {

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.details)
        }
    }
    

Java

    public class DetailsActivity extends Activity
    {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.details);
        }
    }
    

Terakhir, tambahkan aktivitas baru ini ke manifes. Ingat untuk menerapkan tema Leanback guna 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 mengimplementasikan DetailsFragment, ubah tampilan penjelajahan media utama Anda agar beralih ke tampilan detail ketika pengguna mengklik item media. Untuk mengaktifkan perilaku ini, tambahkan objek OnItemViewClickedListener ke BrowseFragment yang berfungsi memicu intent untuk memulai aktivitas detail item.

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

Kotlin

    class BrowseMediaActivity : AppCompatActivity() {
        ...

        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 Activity {
        ...

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