Class antarmuka penjelajahan media yang disediakan oleh library androidx.Lean menyertakan class untuk menampilkan informasi tambahan tentang 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 class presenter untuk detail item media dan cara memperluas
class DetailsSupportFragment
untuk mengimplementasikan tampilan detail
bagi item media saat pengguna memilihnya.
Catatan: Contoh implementasi yang ditampilkan di sini menggunakan aktivitas tambahan untuk memuat DetailsSupportFragment
. Namun, Anda dapat
menghindari pembuatan 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 framework penjelajahan media yang disediakan oleh toolkit UI Leanback, Anda menggunakan objek
presenter untuk mengontrol tampilan data di layar, termasuk detail item media.
Untuk tujuan ini, framework
menyediakan class AbstractDetailsDescriptionPresenter
, yang merupakan implementasi yang hampir selesai dari presenter detail
item media. Anda hanya perlu mengimplementasikan metode onBindDescription()
untuk mengikat kolom tampilan ke objek data Anda, 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 gambar
pratinjau dan tindakan untuk item media. Anda juga dapat menyediakan konten tambahan, seperti daftar
item media terkait.
Kode contoh berikut menunjukkan cara menggunakan class presenter yang ditampilkan di 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 tampilan
detail—terpisah dari aktivitas penjelajahan—memungkinkan Anda memanggil tampilan detail menggunakan
Intent
. Bagian
ini menjelaskan cara membuat aktivitas untuk memuat implementasi tampilan detail bagi
item media Anda.
Buat aktivitas detail dengan mem-build tata letak yang mereferensikan implementasi
DetailsSupportFragment
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 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 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 DetailsSupportFragment
,
ubah tampilan penjelajahan media utama Anda agar beralih ke tampilan detail ketika pengguna mengklik
item media. Untuk mengaktifkan perilaku ini, tambahkan objek
OnItemViewClickedListener
ke
BrowseSupportFragment
yang mengaktifkan intent untuk memulai aktivitas
detail item.
Contoh berikut menunjukkan cara mengimplementasikan 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); } }); } }