Kart görünümü ekleyin

Compose ile daha iyi hizmet verin

Android TV OS için Jetpack Compose'u kullanarak minimum kodla etkileyici kullanıcı arayüzleri oluşturun.

TV için ileti oluştur → 'nı inceleyin.

Önceki derste bir göz atma parçasına uygulanmış, medya öğelerinin listesini görüntüler. Bu derste, medya öğeleriniz için kart görünümleri oluşturup bunları göz atma parçasında sunmalısınız.

BaseCardView sınıfı ve alt sınıflar, bir medya öğesiyle ilişkili meta verileri görüntüler. İlgili içeriği oluşturmak için kullanılan ImageCardView. sınıfı, medya öğesinin başlığıyla birlikte içeriğe ilişkin bir resmi görüntüler.

Ayrıca, Leanback örnek uygulaması ,

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

Kart sunucusu oluşturma

Presenter, görünümler oluşturur ve nesneleri bunlara bağlar isteğe bağlı. Uygulamanızın içeriğini kullanıcıya sunduğu göz atma parçasında, İçerik kartları için Presenter ve bunu adaptöre iletin. içerik ekrana ekler. Aşağıdaki kodda CardPresenter öğesi oluşturulmuştur onLoadFinished() içinde LoaderManager geri çağırması:

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, kart görünümünü açıklayan bir görünüm tutucuyla kart sunucusunu medya içeriği öğelerinizi kontrol edin. 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ündeyse iki kart sunucusu gerekir.

Presenter içinde, onCreateViewHolder() geri çağırma işlevini içerir:

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şturabilirsiniz. Aşağıdaki örnekte ImageCardView

Bir kart seçildiğinde, varsayılan davranış kartı daha büyük bir boyuta genişletir. Bir bütçe belirlemek istiyorsanız seçilen kart için farklı bir renk varsa setSelected() işlevini çağırın burada gösterildiği gibi:

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 nesneleri gösterir. Şunları almak için bunları ayarlamanız gerekir: setFocusable(true) çağırarak d-pad kumandasından odaklan ve setFocusableInTouchMode(true), aşağıdaki kodda gösterildiği gibidir:

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 genişler ifadesini kullanın.