Tạo chế độ xem chi tiết

Tạo dựng ứng dụng hiệu quả hơn với Compose

Tạo giao diện người dùng đẹp mắt với lượng mã tối thiểu bằng Jetpack Compose cho hệ điều hành Android TV.

Compose cho TV →

Các lớp giao diện duyệt nội dung nghe nhìn do thư viện androidx.leanback cung cấp bao gồm các lớp hiển thị thông tin bổ sung về một mục nội dung đa phương tiện, chẳng hạn như nội dung mô tả hoặc bài đánh giá. Nội dung trong đó cũng bao gồm các lớp về cách thao tác đối với mặt hàng đó, chẳng hạn như mua hoặc phát nội dung.

Hướng dẫn này thảo luận cách tạo lớp trình bày cho mục nội dung đa phương tiện và cách mở rộng lớp DetailsSupportFragment để triển khai khung hiển thị chi tiết cho một mục nội dung đa phương tiện khi người dùng chọn mục đó.

Lưu ý: Ví dụ triển khai hiển thị ở đây sử dụng hoạt động bổ sung để chứa DetailsSupportFragment. Tuy nhiên, bạn vẫn có thể tránh tạo hoạt động thứ hai bằng cách thay thế BrowseSupportFragment bằng DetailsSupportFragment trong cùng một hoạt động sử dụng giao dịch mảnh. Để biết thêm thông tin về cách sử dụng giao dịch mảnh, hãy xem phần Tạo mảnh.

Tạo người trình bày chi tiết

Trong khung duyệt nội dung đa phương tiện do bộ công cụ Leanback UI cung cấp, bạn sẽ sử dụng người trình bày các đối tượng để kiểm soát việc hiển thị dữ liệu trên màn hình, bao gồm cả thông tin chi tiết về mục nội dung đa phương tiện. Vì mục đích này, khung cung cấp AbstractDetailsDescriptionPresenter lớp, đây là phương thức triển khai gần như hoàn chỉnh của trình trình bày cho mục nội dung đa phương tiện chi tiết. Bạn chỉ cần triển khai onBindDescription() để liên kết các trường khung hiển thị với đối tượng dữ liệu, như được minh hoạ trong mã mẫu sau đây:

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

Mở rộng mảnh chi tiết

Khi sử dụng lớp DetailsSupportFragment để hiển thị thông tin chi tiết về mục nội dung đa phương tiện của bạn, hãy mở rộng lớp đó để cung cấp thêm nội dung, chẳng hạn như bản xem trước hình ảnh và thao tác cho mục nội dung đa phương tiện. Bạn cũng có thể cung cấp thêm nội dung, chẳng hạn như danh sách các mục nội dung nghe nhìn liên quan.

Mã ví dụ sau đây minh hoạ cách sử dụng lớp người trình bày trong để thêm hình ảnh xem trước và các thao tác cho mục nội dung đa phương tiện đang được xem. Ví dụ này cũng cho thấy việc thêm một hàng mục nội dung đa phương tiện có liên quan, xuất hiện bên dưới trang thông tin chi tiết.

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

Tạo một hoạt động Chi tiết

Phải chứa các mảnh như DetailsSupportFragment trong một hoạt động dùng để hiển thị. Tạo hoạt động cho thông tin chi tiết của bạn chế độ xem (tách biệt với hoạt động duyệt web) cho phép bạn gọi chế độ xem chi tiết bằng cách sử dụng Intent. Chiến dịch này giải thích cách tạo hoạt động để chứa cách triển khai chế độ xem chi tiết cho các mục nội dung đa phương tiện của bạn.

Tạo hoạt động chi tiết bằng cách xây dựng một bố cục tham chiếu đến cách triển khai của bạn 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"
/>

Tiếp theo, hãy tạo một lớp hoạt động sử dụng bố cục như trong ví dụ về mã trước:

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

Cuối cùng, hãy thêm hoạt động mới này vào tệp kê khai. Nhớ áp dụng giao diện Leanback để đảm bảo giao diện người dùng nhất quán với hoạt động duyệt nội dung nghe nhìn.

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

</application>

Xác định trình nghe cho các mục được nhấp vào

Sau khi bạn triển khai DetailsSupportFragment, sửa đổi chế độ xem duyệt nội dung nghe nhìn chính để chuyển sang chế độ xem chi tiết khi người dùng nhấp vào nội dung nghe nhìn mục. Để cho phép hành vi này, hãy thêm OnItemViewClickedListener đối tượng cho thuộc tính BrowseSupportFragment kích hoạt một ý định khởi động mục Chi tiết.

Ví dụ sau đây cho biết cách triển khai trình nghe để bắt đầu khung hiển thị chi tiết khi người dùng nhấp vào một mục nội dung nghe nhìn trong hoạt động duyệt nội dung nghe nhìn chính:

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