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

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

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

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

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

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

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

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

@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() التي تنشئ مالك ملف شخصي يمكن استخدامه لعرض عنصر محتوى:

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)
        ...

@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() كما هو موضح هنا:

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

...
    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)، كما هو موضّح في الرمز التالي:

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

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

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