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

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êm thông tin về một mục nội dung nghe nhìn, chẳng hạn như nội dung mô tả hoặc bài đánh giá. Các bảng này cũng bao gồm các lớp để thao tác với mặt hàng đó, chẳng hạn như mua hoặc phát nội dung trên mặt hàng.

Hướng dẫn này thảo luận cách tạo lớp trình bày cho thông tin chi tiết về mục nội dung nghe nhìn và cách mở rộng lớp DetailsSupportFragment để triển khai thành phần 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 một hoạt động bổ sung để chứa DetailsSupportFragment. Tuy nhiên, bạ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 hoạt động bằng cách sử dụng các 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.

Xây dựng một người trình bày thông tin chi tiết

Trong khung duyệt qua nội dung nghe nhìn do thư viện Leanback cung cấp, bạn sử dụng các đối tượng của người trình bày để 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 nghe nhìn. Vì mục đích này, khung cung cấp lớp AbstractDetailsDescriptionPresenter. Đây là lớp triển khai gần như hoàn chỉnh của trình trình bày cho thông tin chi tiết về mục nội dung nghe nhìn. Bạn chỉ cần triển khai phương thức onBindDescription() để liên kết các trường chế độ xem với đối tượng dữ liệu, như trong mã mẫu sau:

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, hãy mở rộng lớp đó để cung cấp nội dung bổ sung, chẳng hạn như hình ảnh xem trước và các thao tác cho mục nội dung đa phương tiện đó. Bạn cũng có thể cung cấp nội dung bổ sung, chẳng hạn như danh sách các mục nội dung đa phương tiện có liên quan.

Mã ví dụ sau đây minh hoạ cách sử dụng lớp người trình bày xuất hiện trong phần trước để 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

Các mảnh như DetailsSupportFragment phải nằm trong một hoạt động dùng để hiển thị. Việc tạo một hoạt động cho khung hiển thị chi tiết (tách biệt với hoạt động duyệt web) cho phép bạn gọi khung hiển thị chi tiết bằng Intent. Phần này giải thích cách tạo hoạt động để chứa phương thức triển khai khung hiển thị 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 DetailsSupportFragment của bạn:

<!-- 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 hiển thị trong mã ví dụ 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. Hãy nhớ áp dụng giao diện Leanback để đảm bảo rằng giao diện người dùng nhất quán với hoạt động duyệt qua 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

Sau khi triển khai DetailsSupportFragment, hãy sửa đổi thành phần hiển thị duyệt nội dung đa phương tiện chính để chuyển sang thành phần hiển thị chi tiết khi người dùng nhấp vào một mục nội dung đa phương tiện. Để kích hoạt hành vi này, hãy thêm đối tượng OnItemViewClickedListener vào BrowseSupportFragment. Đối tượng này sẽ kích hoạt ý định để bắt đầu hoạt động liên quan đến thông tin chi tiết về mặt hàng.

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 đa phương tiện trong hoạt động duyệt web nội dung đa phương tiệ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);
                }
            });
    }
}