คลาสอินเทอร์เฟซการเรียกดูสื่อที่ให้บริการโดยไลบรารี androidx.leanback ใส่ชั้นเรียนสำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับรายการสื่อ เช่น คำอธิบาย หรือรีวิว นอกจากนี้ยังรวมถึงชั้นเรียนสำหรับการดำเนินการกับรายการดังกล่าวด้วย เช่น การซื้อหรือการเล่นเนื้อหา
คู่มือนี้กล่าวถึงวิธีสร้างชั้นเรียนผู้นำเสนอสำหรับรายละเอียดต่างๆ เกี่ยวกับรายการสื่อและวิธีต่อยอด
คลาส DetailsSupportFragment
เพื่อใช้มุมมองรายละเอียด
สำหรับรายการสื่อเมื่อผู้ใช้เลือกรายการดังกล่าว
หมายเหตุ: ตัวอย่างการใช้งานที่แสดงที่นี่ใช้กิจกรรมเพิ่มเติมเพื่อ
มี DetailsSupportFragment
อย่างไรก็ตาม มีความเป็นไปได้ที่จะ
หลีกเลี่ยงการสร้างกิจกรรมที่ 2 โดยแทนที่ BrowseSupportFragment
ด้วย DetailsSupportFragment
ภายในกิจกรรมเดียวกันโดยใช้
ธุรกรรมส่วนย่อย ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ธุรกรรม Fragment ได้ที่สร้าง Fragment
สร้างผู้นำเสนอรายละเอียด
ในเฟรมเวิร์กการเรียกดูสื่อจากชุดเครื่องมือ Leanback UI คุณสามารถใช้เครื่องมือนำเสนอ
เพื่อควบคุมการแสดงข้อมูลบนหน้าจอ รวมถึงรายละเอียดรายการสื่อ
สำหรับวัตถุประสงค์นี้ เฟรมเวิร์ก
ให้ AbstractDetailsDescriptionPresenter
ซึ่งเป็นการนำผู้นำเสนอสำหรับรายการสื่อเกือบสมบูรณ์
รายละเอียด เพียงแค่นำ onBindDescription()
ไปใช้
ในการเชื่อมโยงฟิลด์มุมมองกับออบเจ็กต์ข้อมูล ดังที่แสดงใน
ตัวอย่างโค้ดต่อไปนี้
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."); } }
ขยายส่วนย่อยรายละเอียด
เมื่อใช้ชั้นเรียน DetailsSupportFragment
ในการแสดงผล
รายละเอียดรายการสื่อของคุณ ขยายคลาสดังกล่าวเพื่อให้เนื้อหาเพิ่มเติม เช่น ตัวอย่าง
รูปภาพและการดำเนินการสำหรับรายการสื่อนั้น นอกจากนี้ คุณยังให้เนื้อหาเพิ่มเติม เช่น ลิสต์
รายการสื่อที่เกี่ยวข้อง
โค้ดตัวอย่างต่อไปนี้จะแสดงวิธีใช้คลาสผู้นำเสนอที่แสดงใน ก่อนหน้า เพื่อเพิ่มรูปภาพตัวอย่างและการดำเนินการสำหรับรายการสื่อที่กำลังดูอยู่ ตัวอย่างนี้ ยังแสดงแถวรายการสื่อที่เกี่ยวข้องที่เพิ่มเข้ามา ซึ่งอยู่ด้านล่างรายการรายละเอียดด้วย
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); } }
สร้างกิจกรรมแบบละเอียด
ต้องมีส่วนย่อย เช่น DetailsSupportFragment
ภายในกิจกรรมเพื่อใช้แสดง การสร้างกิจกรรมเพื่อรายละเอียดของคุณ
มุมมอง แยกต่างหากจากกิจกรรมการเรียกดู ช่วยให้คุณสามารถเรียกใช้มุมมองรายละเอียดได้โดยใช้
Intent
ช่วงเวลานี้
อธิบายวิธีการสร้างกิจกรรมเพื่อเก็บการใช้งานมุมมองรายละเอียดสำหรับ
รายการสื่อของคุณ
สร้างกิจกรรมรายละเอียดโดยการสร้างเลย์เอาต์ที่อ้างอิงการติดตั้งใช้งาน
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" />
ถัดไป ให้สร้างคลาสกิจกรรมที่ใช้เลย์เอาต์ที่แสดงในตัวอย่างโค้ดก่อนหน้า
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); } }
สุดท้าย ให้เพิ่มกิจกรรมใหม่นี้ลงในไฟล์ Manifest อย่าลืมใช้ธีม Leanback เพื่อให้แน่ใจว่า อินเทอร์เฟซผู้ใช้สอดคล้องกับกิจกรรมการเรียกดูสื่อ
<application> ... <activity android:name=".DetailsActivity" android:exported="true" android:theme="@style/Theme.Leanback"/> </application>
กำหนด Listener สำหรับรายการที่คลิก
หลังจากที่คุณใช้ DetailsSupportFragment
แก้ไขมุมมองการเรียกดูสื่อหลักของคุณ เพื่อย้ายไปยังมุมมองรายละเอียดเมื่อผู้ใช้คลิกสื่อ
รายการ หากต้องการเปิดใช้ลักษณะการทำงานนี้ ให้เพิ่ม
OnItemViewClickedListener
ของออบเจ็กต์
BrowseSupportFragment
ที่ทำให้ Intent เริ่มทำงานรายการดังกล่าว
กิจกรรมโดยละเอียด
ตัวอย่างต่อไปนี้แสดงวิธีใช้งาน Listener เพื่อเริ่มมุมมองรายละเอียดเมื่อผู้ใช้ คลิกรายการสื่อในกิจกรรมการเรียกดูสื่อหลัก ดังนี้
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); } }); } }