Kart görünümü ekleyin

Ö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şturup bunları göz atma bölümünde 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ında, medya öğesinin başlığıyla birlikte içerik için bir resim görüntülenir.

Bu derste, Android TV GitHub deposunda Android Leanback örnek uygulamasından alınan kodlar açıklanmaktadır. Kendi uygulamanızı başlatmak için bu örnek kodu kullanın.

Uygulama kartı görünümü

Şekil 1. Seçildiğinde, Leanback örnek uygulama resim kartı görünümü.

Kart sunucusu oluşturma

Presenter, görüntüleme oluşturur ve istendiğinde nesneleri bunlara 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 bunu, içeriği ekrana ekleyen bağdaştırıcıya geçirirsiniz. Aşağıdaki kodda CardPresenter, LoaderManager öğesinin onLoadFinished() geri çağırmasında oluşturulur:

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şturma

Bu adımda kart sunucusunu medya içeriği öğelerinizi açıklayan kart görünümü için bir görüntüleme tutucuyla oluşturursunuz. 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 sunucusuna ihtiyacınız olur.

Presenter içinde, içerik öğesini görüntülemek için kullanılabilecek bir görüntüleme sahibi oluşturan 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ılmıştı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 belirlemek istiyorsanız setSelected() numaralı telefonu arayı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 öğeleriniz için CardView nesnelerini görüntüler. Bunları, aşağıdaki kodda gösterildiği gibi setFocusable(true) ve setFocusableInTouchMode(true) çağrıları yaparak D-pad denetleyiciden odak alacak şekilde 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, öğe genişler ve metin alanı Şekil 1'de gösterildiği gibi, belirttiğiniz arka plan rengiyle görüntülenir.