تتضمّن فئات واجهة تصفّح الوسائط التي توفّرها مكتبة androidx.leanback المتوقّفة نهائيًا فئات لعرض معلومات إضافية حول عنصر وسائط، مثل وصف أو مراجعات. وتتضمّن أيضًا فئات لاتّخاذ إجراء بشأن هذا العنصر، مثل شرائه أو تشغيل محتواه.
يناقش هذا الدليل كيفية إنشاء فئة مقدِّم لعرض تفاصيل عناصر الوسائط وكيفية توسيع الفئة DetailsSupportFragment
لتنفيذ عرض تفصيلي لعنصر وسائط عندما يحدّده المستخدم.
ملاحظة: يستخدم مثال التنفيذ المعروض هنا نشاطًا إضافيًا لاحتواء DetailsSupportFragment
. ومع ذلك، يمكن تجنُّب إنشاء نشاط ثانٍ من خلال استبدال BrowseSupportFragment
بـ DetailsSupportFragment
ضمن النشاط نفسه باستخدام معاملات الأجزاء. لمزيد من المعلومات عن استخدام معاملات الأجزاء، راجِع إنشاء جزء.
إنشاء أداة عرض التفاصيل
في إطار تصفّح الوسائط الذي توفّره مجموعة أدوات واجهة مستخدم Leanback، يمكنك استخدام عناصر العرض التقديمي للتحكّم في عرض البيانات على الشاشة، بما في ذلك تفاصيل عناصر الوسائط.
لهذا الغرض، يوفّر إطار العمل الفئة AbstractDetailsDescriptionPresenter
، وهي عملية تنفيذ شبه كاملة لعنصر العرض الخاص بتفاصيل عناصر الوسائط. كل ما عليك فعله هو تنفيذ طريقة onBindDescription()
لربط حقول العرض بعناصر البيانات، كما هو موضّح في
نموذج الرمز التالي:
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."); } }
تمديد جزء التفاصيل
عند استخدام فئة DetailsSupportFragment
لعرض تفاصيل عنصر الوسائط، يمكنك توسيع هذه الفئة لتوفير محتوى إضافي، مثل صورة معاينة وإجراءات لعنصر الوسائط. يمكنك أيضًا تقديم محتوى إضافي، مثل قائمة بعناصر الوسائط ذات الصلة.
يوضّح نموذج الرمز البرمجي التالي كيفية استخدام فئة العرض التقديمي الموضّحة في القسم السابق لإضافة صورة معاينة وإجراءات لعنصر الوسائط الذي يتم عرضه. يعرض هذا المثال أيضًا إضافة صف لعناصر الوسائط ذات الصلة، والذي يظهر أسفل قائمة التفاصيل.
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); } }
إنشاء نشاط تفاصيل
يجب أن تكون الأجزاء، مثل DetailsSupportFragment
، مضمّنة في نشاط ليتم استخدامها للعرض. يتيح لك إنشاء نشاط لعرض التفاصيل، بشكل منفصل عن نشاط التصفّح، استدعاء عرض التفاصيل باستخدام Intent
. يوضّح هذا القسم كيفية إنشاء نشاط يتضمّن عملية تنفيذ عرض التفاصيل لعناصر الوسائط.
أنشئ نشاط التفاصيل من خلال إنشاء تخطيط يشير إلى تنفيذك 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" />
بعد ذلك، أنشئ فئة نشاط تستخدم التنسيق الموضّح في مثال الرمز السابق:
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); } }
أخيرًا، أضِف هذا النشاط الجديد إلى البيان. تذكَّر تطبيق سمة Leanback لضمان اتساق واجهة المستخدم مع نشاط تصفُّح الوسائط.
<application> ... <activity android:name=".DetailsActivity" android:exported="true" android:theme="@style/Theme.Leanback"/> </application>
تحديد معالج للأحداث للعناصر التي تم النقر عليها
بعد تنفيذ DetailsSupportFragment
، عدِّل طريقة العرض الرئيسية لتصفّح الوسائط للانتقال إلى طريقة العرض التفصيلية عندما ينقر المستخدم على عنصر وسائط. لتفعيل هذا السلوك، أضِف عنصر OnItemViewClickedListener
إلى BrowseSupportFragment
الذي يرسل غرضًا لبدء نشاط تفاصيل العنصر.
يوضّح المثال التالي كيفية تنفيذ أداة معالجة لبدء عرض التفاصيل عندما ينقر المستخدم على عنصر وسائط في نشاط تصفّح الوسائط الرئيسي:
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); } }); } }