একটি বিশদ দৃশ্য তৈরি করুন

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

অপ্রচলিত androidx.leanback লাইব্রেরি দ্বারা প্রদত্ত মিডিয়া ব্রাউজিং ইন্টারফেস ক্লাসগুলোর মধ্যে একটি মিডিয়া আইটেম সম্পর্কে অতিরিক্ত তথ্য, যেমন বিবরণ বা পর্যালোচনা, প্রদর্শনের জন্য ক্লাস অন্তর্ভুক্ত রয়েছে। এছাড়াও, সেই আইটেমটির উপর পদক্ষেপ নেওয়ার জন্য, যেমন সেটি ক্রয় করা বা এর বিষয়বস্তু চালানো, ক্লাসগুলোও এতে অন্তর্ভুক্ত আছে।

এই নির্দেশিকায় আলোচনা করা হয়েছে কীভাবে মিডিয়া আইটেমের বিবরণের জন্য একটি প্রেজেন্টার ক্লাস তৈরি করতে হয় এবং ব্যবহারকারী কোনো মিডিয়া আইটেম নির্বাচন করলে তার বিস্তারিত ভিউ বাস্তবায়নের জন্য কীভাবে DetailsSupportFragment ক্লাসকে এক্সটেন্ড করতে হয়।

দ্রষ্টব্য: এখানে দেখানো বাস্তবায়ন উদাহরণটিতে DetailsSupportFragment কে ধারণ করার জন্য একটি অতিরিক্ত অ্যাক্টিভিটি ব্যবহার করা হয়েছে। তবে, ফ্র্যাগমেন্ট ট্রানজ্যাকশন ব্যবহার করে একই অ্যাক্টিভিটির মধ্যে BrowseSupportFragment DetailsSupportFragment দ্বারা প্রতিস্থাপন করে দ্বিতীয় অ্যাক্টিভিটি তৈরি করা এড়ানো সম্ভব। ফ্র্যাগমেন্ট ট্রানজ্যাকশন ব্যবহার সম্পর্কে আরও তথ্যের জন্য, "একটি ফ্র্যাগমেন্ট তৈরি করুন" দেখুন।

একটি বিশদ উপস্থাপক তৈরি করুন

Leanback UI টুলকিট দ্বারা প্রদত্ত মিডিয়া ব্রাউজিং ফ্রেমওয়ার্কে, আপনি স্ক্রিনে ডেটার প্রদর্শন নিয়ন্ত্রণ করতে প্রেজেন্টার অবজেক্ট ব্যবহার করেন, যার মধ্যে মিডিয়া আইটেমের বিবরণও অন্তর্ভুক্ত। এই উদ্দেশ্যে, ফ্রেমওয়ার্কটি AbstractDetailsDescriptionPresenter ক্লাসটি প্রদান করে, যা মিডিয়া আইটেমের বিবরণের জন্য প্রেজেন্টারের একটি প্রায় সম্পূর্ণ বাস্তবায়ন। আপনাকে যা করতে হবে তা হলো, ভিউ ফিল্ডগুলিকে আপনার ডেটা অবজেক্টের সাথে বাইন্ড করার জন্য onBindDescription() মেথডটি ইমপ্লিমেন্ট করা, যেমনটি নিম্নলিখিত কোড স্যাম্পলে দেখানো হয়েছে:

কোটলিন

class DetailsDescriptionPresenter : AbstractDetailsDescriptionPresenter() {

    override fun onBindDescription(viewHolder: AbstractDetailsDescriptionPresenter.ViewHolder, itemData: Any) {
        val details = itemData as MyMediaItemDetails
        // In a production app, the itemData object contains the information
        // needed to display details for the media item:
        // viewHolder.title.text = details.shortTitle

        // Here we provide static data for testing purposes:
        viewHolder.apply {
            title.text = itemData.toString()
            subtitle.text = "2014   Drama   TV-14"
            body.text = ("Lorem ipsum dolor sit amet, consectetur "
                    + "adipisicing elit, sed do eiusmod tempor incididunt ut labore "
                    + " et dolore magna aliqua. Ut enim ad minim veniam, quis "
                    + "nostrud exercitation ullamco laboris nisi ut aliquip ex ea "
                    + "commodo consequat.")
        }
    }
}

জাভা

public class DetailsDescriptionPresenter
        extends AbstractDetailsDescriptionPresenter {

    @Override
    protected void onBindDescription(ViewHolder viewHolder, Object itemData) {
        MyMediaItemDetails details = (MyMediaItemDetails) itemData;
        // In a production app, the itemData object contains the information
        // needed to display details for the media item:
        // viewHolder.getTitle().setText(details.getShortTitle());

        // Here we provide static data for testing purposes:
        viewHolder.getTitle().setText(itemData.toString());
        viewHolder.getSubtitle().setText("2014   Drama   TV-14");
        viewHolder.getBody().setText("Lorem ipsum dolor sit amet, consectetur "
                + "adipisicing elit, sed do eiusmod tempor incididunt ut labore "
                + " et dolore magna aliqua. Ut enim ad minim veniam, quis "
                + "nostrud exercitation ullamco laboris nisi ut aliquip ex ea "
                + "commodo consequat.");
    }
}

বিশদ খণ্ডাংশ প্রসারিত করুন

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

নিম্নলিখিত উদাহরণ কোডটি দেখায় যে, পূর্ববর্তী বিভাগে দেখানো প্রেজেন্টার ক্লাসটি ব্যবহার করে কীভাবে প্রদর্শিত মিডিয়া আইটেমের জন্য একটি প্রিভিউ ইমেজ এবং অ্যাকশন যোগ করা যায়। এই উদাহরণটি একটি সম্পর্কিত মিডিয়া আইটেম সারি যোগ করাও দেখায়, যা বিস্তারিত তালিকার নিচে প্রদর্শিত হয়।

কোটলিন

private const val TAG = "MediaItemDetailsFragment"

class MediaItemDetailsFragment : DetailsSupportFragment() {
    private lateinit var rowsAdapter: ArrayObjectAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        Log.i(TAG, "onCreate")
        super.onCreate(savedInstanceState)

        buildDetails()
    }

    private fun buildDetails() {
        val selector = ClassPresenterSelector().apply {
            // Attach your media item details presenter to the row presenter:
            FullWidthDetailsOverviewRowPresenter(DetailsDescriptionPresenter()).also {
                addClassPresenter(DetailsOverviewRow::class.java, it)
            }
            addClassPresenter(ListRow::class.java, ListRowPresenter())
        }
        rowsAdapter = ArrayObjectAdapter(selector)

        val res = activity.resources
        val detailsOverview = DetailsOverviewRow("Media Item Details").apply {

            // Add images and action buttons to the details view
            imageDrawable = res.getDrawable(R.drawable.jelly_beans)
            addAction(Action(1, "Buy $9.99"))
            addAction(Action(2, "Rent $2.99"))
        }
        rowsAdapter.add(detailsOverview)

        // Add a related items row
        val listRowAdapter = ArrayObjectAdapter(StringPresenter()).apply {
            add("Media Item 1")
            add("Media Item 2")
            add("Media Item 3")
        }
        val header = HeaderItem(0, "Related Items")
        rowsAdapter.add(ListRow(header, listRowAdapter))

        adapter = rowsAdapter
    }
}

জাভা

public class MediaItemDetailsFragment extends DetailsSupportFragment {
    private static final String TAG = "MediaItemDetailsFragment";
    private ArrayObjectAdapter rowsAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        Log.i(TAG, "onCreate");
        super.onCreate(savedInstanceState);

        buildDetails();
    }

    private void buildDetails() {
        ClassPresenterSelector selector = new ClassPresenterSelector();
        // Attach your media item details presenter to the row presenter:
        FullWidthDetailsOverviewRowPresenter rowPresenter =
            new FullWidthDetailsOverviewRowPresenter(
                new DetailsDescriptionPresenter());

        selector.addClassPresenter(DetailsOverviewRow.class, rowPresenter);
        selector.addClassPresenter(ListRow.class,
                new ListRowPresenter());
        rowsAdapter = new ArrayObjectAdapter(selector);

        Resources res = getActivity().getResources();
        DetailsOverviewRow detailsOverview = new DetailsOverviewRow(
                "Media Item Details");

        // Add images and action buttons to the details view
        detailsOverview.setImageDrawable(res.getDrawable(R.drawable.jelly_beans));
        detailsOverview.addAction(new Action(1, "Buy $9.99"));
        detailsOverview.addAction(new Action(2, "Rent $2.99"));
        rowsAdapter.add(detailsOverview);

        // Add a related items row
        ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(
                new StringPresenter());
        listRowAdapter.add("Media Item 1");
        listRowAdapter.add("Media Item 2");
        listRowAdapter.add("Media Item 3");
        HeaderItem header = new HeaderItem(0, "Related Items", null);
        rowsAdapter.add(new ListRow(header, listRowAdapter));

        setAdapter(rowsAdapter);
    }
}

একটি বিস্তারিত কার্যকলাপ তৈরি করুন

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

DetailsSupportFragment এর আপনার ইমপ্লিমেন্টেশনকে রেফারেন্স করে একটি লেআউট তৈরি করে ডিটেইলস অ্যাক্টিভিটিটি তৈরি করুন:

<!-- file: res/layout/details.xml -->

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="com.example.android.mediabrowser.MediaItemDetailsFragment"
    android:id="@+id/details_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

এরপরে, পূর্ববর্তী কোড উদাহরণে দেখানো লেআউটটি ব্যবহার করে একটি অ্যাক্টিভিটি ক্লাস তৈরি করুন:

কোটলিন

class DetailsActivity : FragmentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.details)
    }
}

জাভা

public class DetailsActivity extends FragmentActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.details);
    }
}

অবশেষে, এই নতুন অ্যাক্টিভিটিটি ম্যানিফেস্টে যোগ করুন। মনে রাখবেন, ইউজার ইন্টারফেসটি যেন মিডিয়া ব্রাউজ অ্যাক্টিভিটির সাথে সামঞ্জস্যপূর্ণ থাকে, তা নিশ্চিত করতে লিনব্যাক থিমটি প্রয়োগ করতে হবে।

<application>
  ...
  <activity android:name=".DetailsActivity"
    android:exported="true"
    android:theme="@style/Theme.Leanback"/>

</application>

ক্লিক করা আইটেমগুলির জন্য একটি লিসেনার সংজ্ঞায়িত করুন

DetailsSupportFragment ইমপ্লিমেন্ট করার পর, আপনার মূল মিডিয়া ব্রাউজিং ভিউটি এমনভাবে পরিবর্তন করুন যাতে কোনো ব্যবহারকারী একটি মিডিয়া আইটেমে ক্লিক করলে তা ডিটেইলস ভিউতে চলে যায়। এই আচরণটি সক্রিয় করতে, BrowseSupportFragment এ একটি OnItemViewClickedListener অবজেক্ট যোগ করুন যা আইটেমের ডিটেইলস অ্যাক্টিভিটি শুরু করার জন্য একটি ইন্টেন্ট ফায়ার করবে।

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি লিসেনার প্রয়োগ করতে হয়, যা ব্যবহারকারী প্রধান মিডিয়া ব্রাউজিং অ্যাক্টিভিটিতে কোনো মিডিয়া আইটেমে ক্লিক করলে বিস্তারিত ভিউ চালু করবে:

কোটলিন

class BrowseMediaActivity : FragmentActivity() {
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        // Create the media item rows
        buildRowsAdapter()

        // Add a listener for selected items
        browseFragment.onItemViewClickedListener = OnItemViewClickedListener { _, item, _, _ ->
            println("Media Item clicked: ${item}")
            val intent = Intent(this@BrowseMediaActivity, DetailsActivity::class.java).apply {
                // Pass the item information
                extras.putLong("id", item.getId())
            }
            startActivity(intent)
        }
    }
}

জাভা

public class BrowseMediaActivity extends FragmentActivity {
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        // Create the media item rows
        buildRowsAdapter();

        // Add a listener for selected items
        browseFragment.OnItemViewClickedListener(
            new OnItemViewClickedListener() {
                @Override
                public void onItemClicked(Object item, Row row) {
                    System.out.println("Media Item clicked: " + item.toString());
                    Intent intent = new Intent(BrowseMediaActivity.this,
                            DetailsActivity.class);
                    // Pass the item information
                    intent.getExtras().putLong("id", item.getId());
                    startActivity(intent);
                }
            });
    }
}