diff options
Diffstat (limited to 'docs/html/preview/tv/ui/details.jd')
| -rw-r--r-- | docs/html/preview/tv/ui/details.jd | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/docs/html/preview/tv/ui/details.jd b/docs/html/preview/tv/ui/details.jd new file mode 100644 index 0000000..8b8fa8b5 --- /dev/null +++ b/docs/html/preview/tv/ui/details.jd @@ -0,0 +1,214 @@ +page.title=DetailFragment + +@jd:body + +<div id="qv-wrapper"> +<div id="qv"> + <h2>In this document</h2> + <ol> + <li><a href="#details-presenter">Build a Details Presenter</a></li> + <li><a href="#details-fragment">Extend the Details Fragment</a> + <li><a href="#activity">Creating a Details Activity</a></li> + <li><a href="#item-listener">Listener for Clicked Items</a></li> + </li> + </ol> +</div> +</div> + +<p>The media browsing interface classes provided by the + <a href="{@docRoot}preview/tv/start/index.html#tv-libraries">Leanback support library</a> + include classes for displaying additional information about a media item, such as a description + or reviews, and for taking action on that item, such as purchasing it or playing its content. This + section discusses how to create a presenter class for media item details and extend the + {@code DetailsFragment} class to implement a details view for a media item when it + is selected by a user. +</p> + +<p class="note"> + <strong>Note:</strong> The implementation example shown here uses an additional activity to + contain the {@code DetailsFragment}. However, it is possible to avoid creating a second activity + by replacing the current {@code BrowseFragment} with a {@code DetailsFragment} within the <em>same</em> + activity using fragment transactions. For more information on using fragment transactions, see the + <a href="{@docRoot}training/basics/fragments/fragment-ui.html#Replace">Building a Dynamic + UI with Fragments</a> training. +</p> + + +<h2 id="details-presenter">Build a Details Presenter</h2> + +<p>In the media browsing framework provided for by the leanback support library, you use + presenter objects to control the display of data on screen, including media item details. The + framework provides the {@code AbstractDetailsDescriptionPresenter} class for this purpose, which + is a nearly complete implementation of the presenter for media item details. All you have to do is + implement the {@code onBindDescription()} method to bind the view fields to your data objects, as shown in + the following code sample:</p> + +<pre> +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."); + } +} +</pre> + + +<h2 id="details-fragment">Extend the Details Fragment</h2> + +<p>When you use the {@code DetailsFragment} class for displaying your media item details, you + extend that class to provide additional content such as a preview image and actions for the media + item. You can also provide additional content, such as a list of related media items.</p> + +<p>The following example code demonstrates how to use the presenter class you created in the + previous section, add a preview image and actions for the media item being viewed. This example + also shows the addition of a related media items row, which appears below the details listing.</p> + +<pre> +public class MediaItemDetailsFragment extends DetailsFragment { + private static final String TAG = "MediaItemDetailsFragment"; + private ArrayObjectAdapter mRowsAdapter; + + @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: + DetailsOverviewRowPresenter rowPresenter = + new DetailsOverviewRowPresenter(new DetailsDescriptionPresenter()); + + selector.addClassPresenter(DetailsOverviewRow.class, rowPresenter); + selector.addClassPresenter(ListRow.class, + new ListRowPresenter()); + mRowsAdapter = 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")); + mRowsAdapter.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); + mRowsAdapter.add(new ListRow(header, listRowAdapter)); + + setAdapter(mRowsAdapter); + } +} +</pre> + + +<h3 id="activity">Creating a Details Activity</h3> + +<p>Fragments such as the {@code DetailsFragment} must be contained within an activity in order + to be used for display. Creating an activity for your details view, separate from the browse + activity, enables you to invoke your details view using an Intent. This section explains how to + build an activity to contain your implementation of the detail view for your media items.</p> + +<p>Start creating the details activity by building a layout that references your implementation + of the {@code DetailsFragment}:</p> + +<pre> +<!-- file: res/layout/details.xml --> + +<fragment xmlns:android="http://schemas.android.com/apk/res/android" + <strong>android:name="com.example.android.mediabrowser.MediaItemDetailsFragment"</strong> + android:id="@+id/details_fragment" + android:layout_width="match_parent" + android:layout_height="match_parent" +/> +</pre> + +<p>Next, create an activity class that uses the layout shown in the previous code example:</p> + +<pre> +public class DetailsActivity extends Activity +{ + @Override + public void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + <strong>setContentView(R.layout.details);</strong> + } +} +</pre> + +<p>Finally, add this new activity to the manifest. Remember to apply the Leanback theme to + ensure that the user interface is consistent with the media browse activity:</p> + +<pre> +<application> + ... + + <activity android:name=".DetailsActivity" + android:exported="true" + <strong>android:theme="@style/Theme.Leanback"/></strong> + +</application> +</pre> + + +<h3 id="item-listener">Listener for Clicked Items</h3> + +<p>After you have implemented the {@code DetailsFragment}, you must modify your main media + browsing view to move to your details view when a user clicks on a media item. In order to enable + this behavior, add an {@code OnItemClickedListener} object to the BrowseFragment that fires an + intent to start the item details activity.</p> + +<p>The following example shows how to implement a listener to start the details view when a user + clicks a media item in the main media browsing activity:</p> + +<pre> +public class BrowseMediaActivity extends Activity { + ... + + @Override + protected void onCreate(Bundle savedInstanceState) { + ... + + // create the media item rows + buildRowsAdapter(); + + // add a listener for selected items + mBrowseFragment.setOnItemClickedListener( + new OnItemClickedListener() { + @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); + } + }); + } +} +</pre> |