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