בחירה של תצוגת כרטיס

פיתוח טוב יותר באמצעות Compose
אפשר ליצור ממשקי משתמש יפים עם מינימום קוד באמצעות Jetpack Compose ל-Android TV OS.

המדריך הזה מתמקד ביצירת תצוגות של כרטיסים לפריטי המדיה שלכם ובהצגתם בקטע של הדפדפן באמצעות ערכת הכלים Leanback UI שהוצאה משימוש. פרטי ההטמעה של דפדפן הקטלוג בקטע של דפדוף מפורטים במדריך בנושא קטע של דפדוף.

בקטע 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, מטמיעים קריאה חוזרת (callback) של 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 של פריטי התוכן. כדי שהלחצנים האלה יקבלו את המיקוד מהבקר של כפתורי החיצים (D-pad), צריך להפעיל את הפונקציות 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.