إنشاء عرض التفاصيل

تتضمن فئات واجهة تصفُّح الوسائط التي تقدمها مكتبة Leanback androidx صفوفًا لعرض معلومات إضافية حول عنصر وسائط، مثل الوصف أو المراجعات. كما أنها تتضمن فصولاً دراسية لاتخاذ إجراء بشأن هذا العنصر، مثل شرائه أو تشغيل محتواه.

يناقش هذا الدليل طريقة إنشاء فئة مقدِّم عرض لتفاصيل عناصر الوسائط وكيفية توسيع الفئة 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);
                }
            });
    }
}