Önceki derste, bir göz atma parçasına uygulanmış ve medya öğelerinin listesini gösteren bir katalog tarayıcısı oluşturdunuz. Bu derste, medya öğeleriniz için kart görünümleri oluşturacak ve bunları göz atma parçasında sunacaksınız.
BaseCardView sınıfı ve alt sınıfları, medya öğesiyle ilişkili meta verileri görüntüler. Bu derste kullanılan ImageCardView sınıfı, medya öğesinin başlığıyla birlikte içerik için bir resim görüntüler.
Leanback örnek uygulamasında örnek uygulamaya da bakın.
Şekil 1. Seçildiğinde, Leanback örnek uygulama resim kartının görünümü.
Kart sunucusu oluşturun
Presenter, görünümler oluşturur ve istendiğinde nesnelere bağlar. Uygulamanızın içeriğini kullanıcıya sunduğu göz atma parçasında, içerik kartları için bir Presenter oluşturup içeriği ekrana ekleyen bağdaştırıcıya iletiyorsunuz. Aşağıdaki kodda CardPresenter, LoaderManager öğesinin onLoadFinished() geri çağırmasında oluşturulur:
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();
}
Kart görünümü oluşturma
Bu adımda kart sunucusunu, kart görünümü için medya içeriği öğelerinizi açıklayan bir görüntüleme tutucu ile oluşturursunuz. Her sunucunun yalnızca bir görünüm türü oluşturması gerektiğini unutmayın. İki kart görüntüleme türünüz varsa iki kart sunucusuna ihtiyacınız olur.
Presenter içinde, içerik öğesini görüntülemek için kullanılabilecek bir görünüm sahibi oluşturan onCreateViewHolder() geri çağırması uygulayın:
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() yönteminde içerik öğeleri için bir kart görünümü oluşturun. Aşağıdaki örnekte ImageCardView kullanılmıştır.
Bir kart seçildiğinde, varsayılan davranış tarafından daha büyük bir boyuta genişletilir. Seçilen kart için farklı bir renk belirlemek istiyorsanız burada gösterildiği gibi setSelected() numaralı telefonu arayın:
...
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);
}
};
...
Kullanıcı uygulamanızı açtığında Presenter.ViewHolder, içerik öğeleriniz için CardView nesnelerini görüntüler. Aşağıdaki kodda gösterildiği gibi, bunları setFocusable(true) ve setFocusableInTouchMode(true) çağrılarıyla D-pad denetleyiciden odağı alacak şekilde ayarlamanız gerekir:
...
cardView.isFocusable = true
cardView.isFocusableInTouchMode = true
return ViewHolder(cardView)
}
...
cardView.setFocusable(true);
cardView.setFocusableInTouchMode(true);
return new ViewHolder(cardView);
}
Kullanıcı ImageCardView öğesini seçtiğinde, öğe Şekil 1'de gösterildiği gibi, belirttiğiniz arka plan rengiyle metin alanını gösterecek şekilde genişler.