בשיעור הקודם יצרתם דפדפן של קטלוג, שהוטמע במקטע דפדוף. מציג רשימה של פריטי מדיה. בשיעור הזה, תיצרו את תצוגות הכרטיסים לפריטי המדיה שלכם להציג אותם בקטע העיון.
BaseCardView
ב-class ובמחלקות המשנה מוצגים המטא-נתונים שמשויכים לפריט מדיה.
ImageCardView
בכיתה שנעשה בה שימוש בשיעור הזה מוצגת תמונה של התוכן יחד עם השם של פריט המדיה.
בנוסף, אפשר לעיין בהטמעה לדוגמה אפליקציה לדוגמה של Leanback הקצר הזה. התשובות שלך יעזרו לנו להשתפר.
![תצוגת כרטיסי אפליקציה](https://developer.android.com/static/images/tv/card-view.png?hl=he)
איור 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.