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