একটি কার্ড ভিউ প্রদান

কম্পোজ দিয়ে আরও ভালোভাবে তৈরি করুন
জেটপ্যাক কম্পোজ ব্যবহার করে অ্যান্ড্রয়েড টিভি ওএস-এর জন্য ন্যূনতম কোডে সুন্দর ইউআই তৈরি করুন।

এই নির্দেশিকাটি আপনার মিডিয়া আইটেমগুলির জন্য কার্ড ভিউ তৈরি করা এবং অপ্রচলিত Leanback UI টুলকিট ব্যবহার করে সেগুলিকে ব্রাউজ ফ্র্যাগমেন্টে উপস্থাপন করার উপর আলোকপাত করে। ব্রাউজ ফ্র্যাগমেন্টে ক্যাটালগ ব্রাউজারের বাস্তবায়ন ব্রাউজ ফ্র্যাগমেন্ট নির্দেশিকাতে বিস্তারিতভাবে বর্ণনা করা হয়েছে।

BaseCardView ক্লাস এবং এর সাবক্লাসগুলো একটি মিডিয়া আইটেমের সাথে সম্পর্কিত মেটাডেটা প্রদর্শন করে। এই পাঠে ব্যবহৃত ImageCardView ক্লাসটি মিডিয়া আইটেমটির শিরোনামের সাথে কন্টেন্ট হিসেবে একটি ছবি প্রদর্শন করে।

এছাড়াও অপ্রচলিত Leanback স্যাম্পল অ্যাপে থাকা নমুনা বাস্তবায়নটি দেখুন।

অ্যাপ কার্ড ভিউ

চিত্র ১. নির্বাচিত অবস্থায় লিনব্যাক স্যাম্পল অ্যাপের ইমেজ কার্ড ভিউ।

একটি কার্ড উপস্থাপক তৈরি করুন

একটি Presenter প্রয়োজন অনুযায়ী ভিউ তৈরি করে এবং সেগুলোর সাথে অবজেক্ট যুক্ত করে। ব্রাউজ ফ্র্যাগমেন্টে, যেখানে আপনার অ্যাপ ব্যবহারকারীর কাছে তার কন্টেন্ট উপস্থাপন করে, সেখানে আপনি কন্টেন্ট কার্ডগুলোর জন্য একটি Presenter তৈরি করেন এবং স্ক্রিনে কন্টেন্ট যোগকারী অ্যাডাপ্টারের কাছে তা পাঠিয়ে দেন। নিম্নলিখিত কোডে, LoaderManager এর onLoadFinished() কলব্যাকে CardPresenter টি তৈরি করা হয়েছে:

কোটলিন

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();
}

একটি কার্ড ভিউ তৈরি করুন

এই ধাপে, আপনি আপনার মিডিয়া কন্টেন্ট আইটেমগুলো বর্ণনা করে এমন কার্ড ভিউ-এর জন্য একটি ভিউ হোল্ডারসহ কার্ড প্রেজেন্টারটি তৈরি করবেন। মনে রাখবেন যে, প্রতিটি প্রেজেন্টারকে অবশ্যই শুধুমাত্র একটি ভিউ টাইপ তৈরি করতে হবে। যদি আপনার দুটি কার্ড ভিউ টাইপ থাকে, তাহলে আপনার দুটি কার্ড প্রেজেন্টারের প্রয়োজন হবে।

Presenter একটি onCreateViewHolder() কলব্যাক ইমপ্লিমেন্ট করুন, যা একটি ভিউ হোল্ডার তৈরি করবে এবং সেই ভিউ হোল্ডারটি একটি কন্টেন্ট আইটেম প্রদর্শনের জন্য ব্যবহার করা যাবে।

কোটলিন

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() মেথডে, কন্টেন্ট আইটেমগুলোর জন্য একটি কার্ড ভিউ তৈরি করুন। নিচের নমুনাটিতে একটি ImageCardView ব্যবহার করা হয়েছে।

যখন কোনো কার্ড নির্বাচন করা হয়, তখন ডিফল্ট আচরণ অনুযায়ী এটি বড় আকারে প্রসারিত হয়। যদি আপনি নির্বাচিত কার্ডটির জন্য একটি ভিন্ন রঙ নির্ধারণ করতে চান, তাহলে এখানে দেখানো অনুযায়ী setSelected() কল করুন:

কোটলিন

    ...
    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);
        }
    };
...

যখন ব্যবহারকারী আপনার অ্যাপটি খোলে, তখন Presenter.ViewHolder আপনার কন্টেন্ট আইটেমগুলোর জন্য CardView অবজেক্টগুলো প্রদর্শন করে। D-pad কন্ট্রোলার থেকে ফোকাস পাওয়ার জন্য আপনাকে setFocusable(true) এবং setFocusableInTouchMode(true) কল করে এগুলোকে সেট করতে হবে, যেমনটা নিচের কোডে দেখানো হয়েছে:

কোটলিন

    ...
    cardView.isFocusable = true
    cardView.isFocusableInTouchMode = true
    return ViewHolder(cardView)
}

জাভা

...
    cardView.setFocusable(true);
    cardView.setFocusableInTouchMode(true);
    return new ViewHolder(cardView);
}

যখন ব্যবহারকারী ImageCardView নির্বাচন করেন, তখন এটি প্রসারিত হয়ে আপনার নির্দিষ্ট করা ব্যাকগ্রাউন্ড রঙসহ এর টেক্সট এরিয়াটি প্রকাশ করে, যেমনটি চিত্র ১-এ দেখানো হয়েছে।