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

الإنشاء بشكل أفضل باستخدام Compose

يمكنك إنشاء واجهات مستخدم رائعة باستخدام أقل عدد ممكن من الرموز باستخدام Jetpack Compose لنظام التشغيل Android TV.

إنشاء رسالة للتلفزيون →

فئات واجهة تصفح الوسائط التي توفرها مكتبة 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);
                }
            });
    }
}