Önceki derste, medya öğelerinin listesini görüntüleyen, göz atma parçasına uygulanmış bir katalog tarayıcısı oluşturdunuz. Bu derste, medya öğeleriniz için kart görünümlerini oluşturacak ve bunları göz atma parçasında sunacaksınız.
BaseCardView sınıfı ve alt sınıflar, bir medya öğesiyle ilişkili meta verileri gösterir. Bu derste kullanılan ImageCardView sınıfı, medya öğesinin başlığıyla birlikte içeriğe yönelik bir resim gösterir.
Ayrıca, Leanback örnek uygulamasındaki örnek uygulamaya da bakın.
Şekil 1. Seçildiğinde, Leanback örnek uygulaması resim kartı görünümü.
Kart sunucusu oluşturma
Presenter, talep üzerine görünümler oluşturur ve nesneleri bunlara bağlar. Uygulamanızın içeriğini kullanıcıya sunduğu göz atma bölümünde, içerik kartları için bir Presenter oluşturur ve bunu, içeriği ekrana ekleyen bağdaştırıcıya iletirsiniz. Aşağıdaki kodda CardPresenter, LoaderManager öğesinin onLoadFinished() geri çağırma işlevinde oluşturulmuştur:
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();
}
Kart görünümü oluştur
Bu adımda, medya içeriği öğelerinizi açıklayan kart görünümü için bir görünüm tutucuyla kart sunucusunu oluşturacaksınız. Her sunucunun yalnızca bir görünüm türü oluşturması gerektiğini unutmayın. İki kart görünümü türünüz varsa iki kart sunucusu gerekir.
Presenter özelliğinde, bir içerik öğesini görüntülemek için kullanılabilecek bir görüntüleme tutucu oluşturan bir onCreateViewHolder() geri çağırması uygulayın:
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() yönteminde, içerik öğeleri için kart görünümü oluşturun. Aşağıdaki örnekte ImageCardView kullanılmaktadır.
Bir kart seçildiğinde, varsayılan davranış kartı daha büyük bir boyuta genişletir. Seçilen kart için farklı bir renk atamak isterseniz aşağıda gösterildiği gibi setSelected() çağrısı yapın:
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);
}
};
...
Kullanıcı uygulamanızı açtığında Presenter.ViewHolder, içerik öğelerinize ilişkin CardView nesnelerini görüntüler. Aşağıdaki kodda gösterildiği gibi setFocusable(true) ve setFocusableInTouchMode(true) çağrılarını yaparak D-pad kumandasından odağı almak için bunları ayarlamanız gerekir:
Kotlin
...
cardView.isFocusable = true
cardView.isFocusableInTouchMode = true
return ViewHolder(cardView)
}
Java
...
cardView.setFocusable(true);
cardView.setFocusableInTouchMode(true);
return new ViewHolder(cardView);
}
Kullanıcı ImageCardView öğesini seçtiğinde, metin genişler ve Şekil 1'de gösterildiği gibi, belirttiğiniz arka plan rengiyle gösterilir.