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

Tạo dựng ứng dụng hiệu quả hơn bằng 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 xem nội dung nghe nhìn do thư viện androidx.leanback không dùng nữa 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 một 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 một khung hiển thị 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 hoạt động tương tự bằng các giao dịch đối với 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ột mảnh.

Xây dựng một trình bày chi tiết

Trong khung duyệt xem nội dung nghe nhìn do bộ công cụ Leanback UI 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ì mục đích này, khung cung cấp lớp AbstractDetailsDescriptionPresenter. Đây là một phương thức 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 trong khung hiển thị với các đố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 thao tác cho mục nội dung nghe nhì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 có liên quan.

Đoạn mã ví dụ sau đây minh hoạ cách sử dụng lớp 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 nghe nhìn đang được xem. Ví dụ này cũng cho thấy việc bổ sung một hàng 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 một hoạt động chi tiết

Các mảnh như DetailsSupportFragment phải nằm trong một hoạt động để được 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 xem) cho phép bạn gọi chế độ xem chi tiết bằng cách sử dụng Intent. Phần này giải thích cách tạo một hoạt động để chứa quá trình 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 tạo một bố cục tham chiếu đến quá trình 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 minh hoạ 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. 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 xem 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 bạn triển khai DetailsSupportFragment, hãy sửa đổi khung hiển thị duyệt xem 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 một đối tượng OnItemViewClickedListener vào BrowseSupportFragment sẽ kích hoạt một ý định để bắt đầu hoạt động chi tiết về mặt hàng.

Ví dụ sau đây minh hoạ cách triển khai một trình nghe để bắt đầu chế độ xem 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 xem 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);
                }
            });
    }
}