बंद की जा चुकी androidx.leanback लाइब्रेरी से मिली मीडिया ब्राउज़िंग इंटरफ़ेस क्लास में, मीडिया आइटम के बारे में ज़्यादा जानकारी दिखाने के लिए क्लास शामिल होती हैं. जैसे, ब्यौरा या समीक्षाएं. इनमें उस आइटम पर कार्रवाई करने के लिए क्लास भी शामिल होती हैं. जैसे, उसे खरीदना या उसका कॉन्टेंट चलाना.
इस गाइड में, मीडिया आइटम की जानकारी के लिए प्रेजेंटर क्लास बनाने का तरीका बताया गया है. साथ ही, यह भी बताया गया है कि जब उपयोगकर्ता किसी मीडिया आइटम को चुनता है, तब उसकी जानकारी दिखाने के लिए DetailsSupportFragment
क्लास को कैसे बढ़ाया जा सकता है.
ध्यान दें: यहां दिखाए गए लागू करने के उदाहरण में, DetailsSupportFragment
को शामिल करने के लिए एक अतिरिक्त गतिविधि का इस्तेमाल किया गया है. हालांकि, फ़्रैगमेंट ट्रांज़ैक्शन का इस्तेमाल करके, एक ही गतिविधि में BrowseSupportFragment
को DetailsSupportFragment
से बदलकर, दूसरी गतिविधि बनाने से बचा जा सकता है. फ़्रैगमेंट ट्रांज़ैक्शन इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, फ़्रैगमेंट बनाना लेख पढ़ें.
ज़्यादा जानकारी दिखाने वाला कॉम्पोनेंट बनाना
Leanback यूज़र इंटरफ़ेस (यूआई) टूलकिट की ओर से उपलब्ध कराए गए मीडिया ब्राउज़िंग फ़्रेमवर्क में, स्क्रीन पर डेटा दिखाने के लिए प्रेजेंटर ऑब्जेक्ट का इस्तेमाल किया जाता है. इसमें मीडिया आइटम की जानकारी भी शामिल है.
इसके लिए, फ़्रेमवर्क AbstractDetailsDescriptionPresenter
क्लास उपलब्ध कराता है. यह मीडिया आइटम की जानकारी के लिए, प्रेजेंटर का लगभग पूरा वर्शन होता है. आपको सिर्फ़ onBindDescription()
तरीके को लागू करना है, ताकि व्यू फ़ील्ड को अपने डेटा ऑब्जेक्ट से बाइंड किया जा सके. जैसा कि यहां दिए गए कोड सैंपल में दिखाया गया है:
Kotlin
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.") } } }
Java
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
क्लास का इस्तेमाल करते समय, उस क्लास को बढ़ाएं, ताकि अतिरिक्त कॉन्टेंट दिया जा सके. जैसे, मीडिया आइटम के लिए झलक दिखाने वाली इमेज और कार्रवाइयां. इसके अलावा, अन्य कॉन्टेंट भी दिया जा सकता है. जैसे, मिलते-जुलते मीडिया आइटम की सूची.
यहां दिए गए उदाहरण कोड में, यह दिखाया गया है कि पिछले सेक्शन में दिखाई गई प्रेजेंटर क्लास का इस्तेमाल करके, देखी जा रही मीडिया आइटम के लिए झलक वाली इमेज और कार्रवाइयां कैसे जोड़ी जाती हैं. इस उदाहरण में, मीडिया आइटम की मिलती-जुलती लाइन को भी जोड़ा गया है. यह लाइन, जानकारी वाली सूची के नीचे दिखती है.
Kotlin
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 } }
Java
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" />
इसके बाद, एक ऐसी गतिविधि क्लास बनाएं जो पिछले कोड के उदाहरण में दिखाए गए लेआउट का इस्तेमाल करती हो:
Kotlin
class DetailsActivity : FragmentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.details) } }
Java
public class DetailsActivity extends FragmentActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.details); } }
आखिर में, इस नई गतिविधि को मेनिफ़ेस्ट में जोड़ें. Leanback थीम लागू करना न भूलें, ताकि यह पक्का किया जा सके कि यूज़र इंटरफ़ेस, मीडिया ब्राउज़ करने की गतिविधि के मुताबिक हो.
<application> ... <activity android:name=".DetailsActivity" android:exported="true" android:theme="@style/Theme.Leanback"/> </application>
क्लिक किए गए आइटम के लिए लिसनर तय करना
DetailsSupportFragment
लागू करने के बाद, मीडिया ब्राउज़ करने के मुख्य व्यू में बदलाव करें, ताकि जब कोई उपयोगकर्ता किसी मीडिया आइटम पर क्लिक करे, तो वह ज़्यादा जानकारी वाले व्यू पर चला जाए. इस सुविधा को चालू करने के लिए, OnItemViewClickedListener
में एक OnItemViewClickedListener
ऑब्जेक्ट जोड़ें. यह ऑब्जेक्ट, आइटम की जानकारी दिखाने वाली ऐक्टिविटी को शुरू करने के लिए इंटेंट ट्रिगर करता है.BrowseSupportFragment
यहां दिए गए उदाहरण में, लिसनर को लागू करने का तरीका बताया गया है. इससे, जब कोई उपयोगकर्ता मीडिया ब्राउज़ करने की मुख्य गतिविधि में किसी मीडिया आइटम पर क्लिक करता है, तो जानकारी वाला व्यू शुरू हो जाता है:
Kotlin
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) } } }
Java
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); } }); } }