page.title=詳細ビューをビルドする page.tags=tv, detailsfragment trainingnavtop=true @jd:body
v17 leanback サポート ライブラリ が提供するメディア ブラウジング インターフェース クラスには、説明やレビューなどのメディア アイテムに関する追加情報を表示したり、アイテムの購入やコンテンツの再生など、アイテムに対するアクションを取ったりするためのクラスが含まれます。
このレッスンでは、メディア アイテムの詳細に関するプレゼンター クラスを作成したり、{@link android.support.v17.leanback.app.DetailsFragment} クラスを拡張して、ユーザーがメディア アイテムを選択した場合に表示する詳細ビューを実装したりする方法を説明します。
注意:次の実装例では、追加的なアクティビティを使用して {@link android.support.v17.leanback.app.DetailsFragment} を含めています。ただし、フラグメント トランザクションを使用すると、現在の {@link android.support.v17.leanback.app.BrowseFragment} を同じアクティビティにある {@link android.support.v17.leanback.app.DetailsFragment} で置き換えることにより、2 つ目のアクティビティの作成を回避できます。フラグメント トランザクションの使用については、フラグメントを使用したダイナミックな UI のビルドを参照してください。
Leanback ライブラリが提供するメディア ブラウジングのフレームワークでは、プレゼンター オブジェクトを使用して、メディア アイテムの詳細を含むスクリーン上のデータ表示を制御します。このメディア アイテムの詳細に関するプレゼンターのほぼ完全な実装を目的に、フレームワークでは{@link android.support.v17.leanback.widget.AbstractDetailsDescriptionPresenter} クラスを提供しています。これにより、次のコード サンプルのように、{@link android.support.v17.leanback.widget.AbstractDetailsDescriptionPresenter#onBindDescription onBindDescription()} メソッドを実装して、ビュー フィールドをデータ オブジェクトにバインドするだけでよくなります。
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."); } }
メディア アイテムの詳細を表示するために {@link android.support.v17.leanback.app.DetailsFragment} クラスを使用する場合、そのクラスを拡張すると、メディア アイテムのプレビュー画像やアクションなどの追加コンテンツを提供できます。関連するメディア アイテムのリストといった追加コンテンツも提供できます。
次のコード例では、前のセクションで説明したプレゼンター クラスを使用して、表示中のメディア アイテムのプレビュー画像やアクションを追加する方法を示しています。この例では、詳細リストの下に表示される関連するメディア アイテムの行も追加しています。
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); } }
{@link android.support.v17.leanback.app.DetailsFragment} のようなフラグメントを表示に使用するには、これをアクティビティ内に含める必要があります。ブラウズ アクティビティとは別に、詳細ビューのアクティビティを作成すると、{@link android.content.Intent} を使用して詳細ビューを呼び出すことができます。このセクションでは、メディア アイテムの詳細ビューの実装を含んだアクティビティのビルド方法を説明します。
次のように {@link android.support.v17.leanback.app.DetailsFragment} の実装を参照するレイアウトをビルドして、詳細アクティビティの作成を開始します。
<!-- 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" />
次に、前述のコード例のレイアウトを使用して、アクティビティ クラスを作成します。
public class DetailsActivity extends Activity { @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>
{@link android.support.v17.leanback.app.DetailsFragment} の実装後、メインのメディア ブラウジング ビューを編集して、ユーザーがメディア アイテムをクリックしたときに詳細ビューに移動するようにします。この動作を有効にするには、 {@link android.support.v17.leanback.widget.OnItemViewClickedListener} オブジェクトを、アイテム詳細アクティビティを起動するインテントの起動元の {@link android.support.v17.leanback.app.BrowseFragment} に追加します。
次の例では、ユーザーがメインのメディア ブラウジング アクティビティのメディア アイテムをクリックしたときに、詳細ビューを起動するリスナの実装方法を示しています。
public class BrowseMediaActivity extends Activity { ... @Override protected void onCreate(Bundle savedInstanceState) { ... // create the media item rows buildRowsAdapter(); // add a listener for selected items mBrowseFragment.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); } }); } }