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

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

Các lớp giao diện duyệt nội dung nghe nhìn do thư viện androidx.leanback đã ngừng hoạt động 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 nghe nhìn, chẳng hạn như nội dung mô tả hoặc bài đánh giá. Các lớp này cũng bao gồm các lớp để thực hiện hành động đối với mục đó, chẳng hạn như mua hoặc phát nội dung của mục đó.

Hướng dẫn này thảo luận về 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 chế độ xem chi tiết cho một mục nội dung nghe nhìn khi người dùng chọn mục đó.

Lưu ý: Ví dụ triển khai được trình bày ở đâ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 một hoạt động bằng cách 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 bài viết Tạo mảnh.

Tạo trình bày chi tiết

Trong khung duyệt nội dung nghe nhìn do bộ công cụ giao diện người dùng Leanback cung cấp, bạn sử dụng các đối tượng 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ới mục đích này, khung này cung cấp lớp AbstractDetailsDescriptionPresenter đây là một cách triển khai gần như hoàn chỉnh của 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 khung hiển thị với đối tượng dữ liệu của bạn, như trong đoạn 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 nghe nhì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 hành động cho mục nội dung nghe nhì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 nghe nhìn có liên quan.

Đoạn mã ví dụ sau đây minh hoạ cách sử dụng lớp trình bày được trình bày trong phần trước để thêm hình ảnh xem trước và các hành động cho mục nội dung nghe nhìn đang được xem. Ví dụ này cũng cho thấy cách thêm một hàng các mục nội dung nghe nhìn có liên quan, xuất hiện bên dưới danh sách 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 hoạt động chi tiết

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

<!-- 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 được trình bày trong ví dụ 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. Hãy 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 xử lý cho các mục đã nhấp

Sau khi triển khai DetailsSupportFragment, hãy sửa đổi khung hiển thị duyệt nội dung nghe nhìn chính để chuyển sang 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. Để bật hành vi này, hãy thêm đối tượng OnItemViewClickedListener vào BrowseSupportFragment để kích hoạt ý định bắt đầu hoạt động chi tiết về mục.

Ví dụ sau đây cho thấy cách triển khai trình xử lý để 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);
                }
            });
    }
}