สร้างมุมมองรายละเอียด

สร้างได้ดียิ่งขึ้นด้วย Compose

สร้าง UI ที่สวยงามด้วยโค้ดแบบเรียบง่ายโดยใช้ Jetpack Compose สำหรับระบบปฏิบัติการ Android TV

Compose สำหรับรายการทีวี →

คลาสอินเทอร์เฟซการเรียกดูสื่อที่ให้บริการโดยไลบรารี androidx.leanback ใส่ชั้นเรียนสำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับรายการสื่อ เช่น คำอธิบาย หรือรีวิว นอกจากนี้ยังรวมถึงชั้นเรียนสำหรับการดำเนินการกับรายการดังกล่าวด้วย เช่น การซื้อหรือการเล่นเนื้อหา

คู่มือนี้กล่าวถึงวิธีสร้างชั้นเรียนผู้นำเสนอสำหรับรายละเอียดต่างๆ เกี่ยวกับรายการสื่อและวิธีต่อยอด คลาส DetailsSupportFragment เพื่อใช้มุมมองรายละเอียด สำหรับรายการสื่อเมื่อผู้ใช้เลือกรายการดังกล่าว

หมายเหตุ: ตัวอย่างการใช้งานที่แสดงที่นี่ใช้กิจกรรมเพิ่มเติมเพื่อ มี DetailsSupportFragment อย่างไรก็ตาม มีความเป็นไปได้ที่จะ หลีกเลี่ยงการสร้างกิจกรรมที่ 2 โดยแทนที่ BrowseSupportFragment ด้วย DetailsSupportFragment ภายในกิจกรรมเดียวกันโดยใช้ ธุรกรรมส่วนย่อย ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ธุรกรรม Fragment ได้ที่สร้าง Fragment

สร้างผู้นำเสนอรายละเอียด

ในเฟรมเวิร์กการเรียกดูสื่อจากชุดเครื่องมือ Leanback UI คุณสามารถใช้เครื่องมือนำเสนอ เพื่อควบคุมการแสดงข้อมูลบนหน้าจอ รวมถึงรายละเอียดรายการสื่อ สำหรับวัตถุประสงค์นี้ เฟรมเวิร์ก ให้ AbstractDetailsDescriptionPresenter ซึ่งเป็นการนำผู้นำเสนอสำหรับรายการสื่อเกือบสมบูรณ์ รายละเอียด เพียงแค่นำ onBindDescription() ไปใช้ ในการเชื่อมโยงฟิลด์มุมมองกับออบเจ็กต์ข้อมูล ดังที่แสดงใน ตัวอย่างโค้ดต่อไปนี้

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

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 ในการแสดงผล รายละเอียดรายการสื่อของคุณ ขยายคลาสดังกล่าวเพื่อให้เนื้อหาเพิ่มเติม เช่น ตัวอย่าง รูปภาพและการดำเนินการสำหรับรายการสื่อนั้น นอกจากนี้ คุณยังให้เนื้อหาเพิ่มเติม เช่น ลิสต์ รายการสื่อที่เกี่ยวข้อง

โค้ดตัวอย่างต่อไปนี้จะแสดงวิธีใช้คลาสผู้นำเสนอที่แสดงใน ก่อนหน้า เพื่อเพิ่มรูปภาพตัวอย่างและการดำเนินการสำหรับรายการสื่อที่กำลังดูอยู่ ตัวอย่างนี้ ยังแสดงแถวรายการสื่อที่เกี่ยวข้องที่เพิ่มเข้ามา ซึ่งอยู่ด้านล่างรายการรายละเอียดด้วย

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

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"
/>

ถัดไป ให้สร้างคลาสกิจกรรมที่ใช้เลย์เอาต์ที่แสดงในตัวอย่างโค้ดก่อนหน้า

class DetailsActivity : FragmentActivity() {

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

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 เพื่อเริ่มมุมมองรายละเอียดเมื่อผู้ใช้ คลิกรายการสื่อในกิจกรรมการเรียกดูสื่อหลัก ดังนี้

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

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