توفير طريقة عرض البطاقة

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

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

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

في الدرس السابق، أنشأت متصفحًا للكتالوج، تم تنفيذه في جزء تصفح، قائمة بعناصر الوسائط. في هذا الدرس، يمكنك إنشاء طرق عرض البطاقات لعناصر الوسائط وعرضها في جزء التصفح.

BaseCardView تعرض الفئة والفئات الفرعية البيانات الوصفية المرتبطة بعنصر وسائط. تشير رسالة الأشكال البيانية ImageCardView يعرض الفصل المستخدم في هذا الدرس صورة للمحتوى مع عنوان عنصر الوسائط.

يمكنك الاطّلاع أيضًا على نموذج التنفيذ في نموذج تطبيق Leanback .

الشكل 1. نموذج عرض بطاقة صورة التطبيق في Leanback عند تحديده.

إنشاء مقدِّم بطاقات

ينشئ Presenter طرق العرض ويربط العناصر بها. عند الطلب. في جزء التصفّح حيث يعرض تطبيقك للمستخدم، يمكنك إنشاء Presenter لبطاقات المحتوى وتمريرها إلى المحوّل يضيف المحتوى إلى الشاشة. في الرمز التالي، يتم إنشاء CardPresenter في onLoadFinished() استدعاء LoaderManager:

Kotlin

override fun onLoadFinished(loader: Loader<HashMap<String, List<Movie>>>, data: HashMap<String, List<Movie>>) {
    rowsAdapter = ArrayObjectAdapter(ListRowPresenter())
    val cardPresenter = CardPresenter()

    var i = 0L

    data.entries.forEach { entry ->
        val listRowAdapter = ArrayObjectAdapter(cardPresenter).apply {
            entry.value.forEach { movie ->
                add(movie)
            }
        }

        val header = HeaderItem(i, entry.key)
        i++
        rowsAdapter.add(ListRow(header, listRowAdapter))
    }

    val gridHeader = HeaderItem(i, getString(R.string.more_samples))

    val gridRowAdapter = ArrayObjectAdapter(GridItemPresenter()).apply {
        add(getString(R.string.grid_view))
        add(getString(R.string.error_fragment))
        add(getString(R.string.personal_settings))
    }
    rowsAdapter.add(ListRow(gridHeader, gridRowAdapter))

    adapter = rowsAdapter

    updateRecommendations()
}

Java

@Override
public void onLoadFinished(Loader<HashMap<String, List<Movie>>> arg0,
                           HashMap<String, List<Movie>> data) {

    rowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());
    CardPresenter cardPresenter = new CardPresenter();

    int i = 0;

    for (Map.Entry<String, List<Movie>> entry : data.entrySet()) {
        ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(cardPresenter);
        List<Movie> list = entry.getValue();

        for (int j = 0; j < list.size(); j++) {
            listRowAdapter.add(list.get(j));
        }
        HeaderItem header = new HeaderItem(i, entry.getKey());
        i++;
        rowsAdapter.add(new ListRow(header, listRowAdapter));
    }

    HeaderItem gridHeader = new HeaderItem(i, getString(R.string.more_samples));

    GridItemPresenter gridPresenter = new GridItemPresenter();
    ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(gridPresenter);
    gridRowAdapter.add(getString(R.string.grid_view));
    gridRowAdapter.add(getString(R.string.error_fragment));
    gridRowAdapter.add(getString(R.string.personal_settings));
    rowsAdapter.add(new ListRow(gridHeader, gridRowAdapter));

    setAdapter(rowsAdapter);

    updateRecommendations();
}

إنشاء طريقة عرض بطاقة

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

في Presenter، نفِّذ onCreateViewHolder() رد اتصال ينشئ هيكل ملف شخصي يمكن استخدامه لعرض أحد عناصر المحتوى:

Kotlin

private const val CARD_WIDTH = 313
private const val CARD_HEIGHT = 176

class CardPresenter : Presenter() {

    private lateinit var mContext: Context
    private lateinit var defaultCardImage: Drawable

    override fun onCreateViewHolder(parent: ViewGroup): Presenter.ViewHolder {
        mContext = parent.context
        defaultCardImage = mContext.resources.getDrawable(R.drawable.movie)
        ...

Java

@Override
public class CardPresenter extends Presenter {

    private Context context;
    private static int CARD_WIDTH = 313;
    private static int CARD_HEIGHT = 176;
    private Drawable defaultCardImage;

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent) {
        context = parent.getContext();
        defaultCardImage = context.getResources().getDrawable(R.drawable.movie);
...

في طريقة onCreateViewHolder()، إنشاء طريقة عرض بطاقة لعناصر المحتوى. يستخدم النموذج التالي دالة ImageCardView

عند اختيار بطاقة، يعمل السلوك التلقائي على توسيعها إلى حجم أكبر. إذا كنت تريد تحديد لون مختلف للبطاقة المحددة، اتصل بالرقم setSelected() كما هو موضح هنا:

Kotlin

    ...
    val cardView = object : ImageCardView(context) {
        override fun setSelected(selected: Boolean) {
            val selected_background = context.resources.getColor(R.color.detail_background)
            val default_background = context.resources.getColor(R.color.default_background)
            val color = if (selected) selected_background else default_background
            findViewById<View>(R.id.info_field).setBackgroundColor(color)
            super.setSelected(selected)
        }
    }
    ...

Java

...
    ImageCardView cardView = new ImageCardView(context) {
        @Override
        public void setSelected(boolean selected) {
            int selected_background = context.getResources().getColor(R.color.detail_background);
            int default_background = context.getResources().getColor(R.color.default_background);
            int color = selected ? selected_background : default_background;
            findViewById(R.id.info_field).setBackgroundColor(color);
            super.setSelected(selected);
        }
    };
...

عندما يفتح المستخدم تطبيقك، تظهر رسالة Presenter.ViewHolder عرض الكائنات CardView لعناصر المحتوى الخاصة بك. يجب ضبطها لتلقّي يمكنك التركيز على التركيز من وحدة التحكّم في لوحة التحكّم من خلال طلب الرقم setFocusable(true). وsetFocusableInTouchMode(true)، كما هو موضح في التعليمة البرمجية التالية:

Kotlin

    ...
    cardView.isFocusable = true
    cardView.isFocusableInTouchMode = true
    return ViewHolder(cardView)
}

Java

...
    cardView.setFocusable(true);
    cardView.setFocusableInTouchMode(true);
    return new ViewHolder(cardView);
}

عندما ينقر المستخدم على ImageCardView، سيتم توسيعه. للكشف عن منطقة النص الخاصة بها بلون الخلفية الذي تحدده، كما هو موضح في الشكل 1.