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

משפרים את הפיתוח באמצעות 'כתיבה'

בעזרת 'Jetpack פיתוח נייטיב' ל-Android TV תוכלו ליצור ממשקי משתמש יפהפיים עם כמה שפחות קוד.

כתיבת הודעה לטלוויזיה ←

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

BaseCardView ב-class ובמחלקות המשנה מוצגים המטא-נתונים שמשויכים לפריט מדיה. ImageCardView בכיתה שנעשה בה שימוש בשיעור הזה מוצגת תמונה של התוכן יחד עם השם של פריט המדיה.

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

איור 1. תצוגת כרטיס תמונה של אפליקציה לדוגמה של Leanback כאשר נבחרה.

יצירת מציג כרטיסים

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

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

ב-method 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.