ממשק הדפדוף במדיה כולל מחלקות שסופקו על ידי הספרייה androidx.leanback שהוצאה משימוש. המחלקות האלה משמשות להצגת מידע נוסף על פריט מדיה, כמו תיאור או ביקורות. הם כוללים גם שיעורים לביצוע פעולה על הפריט, כמו רכישה או הפעלת התוכן שלו.
במדריך הזה נסביר איך ליצור מחלקה של presenter לפרטים של פריט מדיה ואיך להרחיב את המחלקה DetailsSupportFragment
כדי להטמיע תצוגת פרטים של פריט מדיה כשהמשתמש בוחר אותו.
הערה: בדוגמה להטמעה שמוצגת כאן נעשה שימוש בפעילות נוספת כדי להכיל את DetailsSupportFragment
. עם זאת, אפשר להימנע מיצירת פעילות שנייה על ידי החלפת BrowseSupportFragment
ב-DetailsSupportFragment
בתוך אותה פעילות באמצעות טרנזקציות של מקטעי קוד. מידע נוסף על שימוש בעסקאות של מקטעים זמין במאמר יצירת מקטע.
יצירת כלי להצגת פרטים
במסגרת של דפדפן המדיה שמופיעה בערכת הכלים של Leanback UI, משתמשים באובייקטים של presenter כדי לשלוט בתצוגה של הנתונים במסך, כולל פרטים של פריטי מדיה.
לשם כך, המסגרת מספקת את המחלקה AbstractDetailsDescriptionPresenter
, שהיא הטמעה כמעט מלאה של שכבת ה-Presenter לפרטי פריט מדיה. כל מה שצריך לעשות הוא להטמיע את השיטה 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
כדי להציג את פרטי פריט המדיה, צריך להרחיב את המחלקה הזו כדי לספק תוכן נוסף, כמו תמונה לתצוגה מקדימה ופעולות לפריט המדיה. אפשר גם לספק תוכן נוסף, כמו רשימה של פריטי מדיה קשורים.
דוגמת הקוד הבאה מראה איך להשתמש במחלקה presenter שמוצגת בקטע הקודם כדי להוסיף תמונה לתצוגה מקדימה ופעולות לפריט המדיה שמוצג. בדוגמה הזו מוצגת גם שורה של פריטי מדיה שקשורים למוצר, שמופיעה מתחת לרשימת הפרטים.
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
ל-BrowseSupportFragment
שמפעיל intent כדי להתחיל את פעילות הפרטים של הפריט.
בדוגמה הבאה מוצג אופן ההטמעה של מאזין להפעלת תצוגת הפרטים כשמשתמש לוחץ על פריט מדיה בפעילות הראשית של עיון במדיה:
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); } }); } }