レイアウトの修正
1ペインのレイアウトは、次の図のように、地図画面の上に最寄り駅一覧のfragmentが重なるようにFrameLayoutを利用して定義しておきます。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<fragment
android:id="@+id/map"
android:name="com.rakuraku.android.ekimap.MyMapFragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<fragment
android:id="@+id/eki_list"
android:name="com.rakuraku.android.ekimap.EkiListFragment"
android:layout_height="fill_parent"
android:layout_width="200dp"
android:orientation="horizontal" />
</FrameLayout >
Activityの修正
最後に、MainActivityとEkiListFragmentの修正です。主にMainActivityへの追加、変更です。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
}
// ListFragmentの表示・非表示、ナビゲーションアイコンの表示を切り替える（1）
public void toggleList(boolean hide) {
FragmentManager fm = getFragmentManager();
FragmentTransaction transaction = fm.beginTransaction(); //（2）
ListFragment listFragment =
(ListFragment)fm.findFragmentById(R.id.eki_list); //（3）
// 引数のhideがtrueまたはListFragmentが表示されているとき
if (hide==true || listFragment.isVisible()) {
// ListFragmentを非表示にする
transaction.hide(listFragment);
// ナビゲーションアイコンを表示する（4）
getActionBar().setDisplayHomeAsUpEnabled(true);
}
else {
// ListFragmentを表示する
transaction.show(listFragment);
// ナビゲーションアイコンを非表示にする
getActionBar().setDisplayHomeAsUpEnabled(false);
}
// Fragmentへの操作を確定する
transaction.commit(); //（5）
}
@Override
public boolean onMenuItemSelected(int featureId, MenuItem item) {
// 1ペインなら
if (getResources().getBoolean(R.bool.is_one_pane)) {
// アクションバーのアイコンがクリックされたとき（6）
if (android.R.id.home == item.getItemId()) {
toggleList(false);
}
}
return super.onMenuItemSelected(featureId, item);
}
@Override
protected void onResume() { //（7）
super.onResume();
// 1ペインならListFragmentを非表示、2ペインなら表示する
toggleList(getResources().getBoolean(R.bool.is_one_pane));
}
toggleListというメソッド（1）では、1ペインの場合に、地図にオーバーラップしてListFragmentを表示したり、ナビゲーションアイコンの表示を切り替える処理を定義しています。
ListFragmentの表示／非表示や、追加／削除などの操作は、FragmentTransactionというクラスを利用して行います（2）。Fragmentは、findFragmentByIdメソッドなどでインスタンスを取得し、それを通じて操作します。なお、Fragmentに行った変更は、最後にcommitメソッドを呼び出して確定させる必要があります（5）。
（4）のナビゲーションアイコンとは、アプリケーションバーに表示されるアプリアイコンの左横に表示されるアイコンのことです。これは、メニューなどを呼び出すためのアイコンで、Gmailアプリなどでおなじみでしょう。
このアイコンの表示は、ActionBarクラスのsetDisplayHomeAsUpEnabledメソッドで行います（4）。また、このアイコンをタッチすると、onOptionsItemSelectedメソッドがコールバックされます。その際、MenuItemパラメーターのIdが、android.R.id.homeという値になります（6）。
Activityが実行中になる直前にコールバックされるonResumeメソッドでも、toggleListメソッドを実行していますが（7）、これは1ペインでの初期表示ではListFragmentを非表示、2ペインの初期表示なら表示するようにするためです。
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
ListView list = getListView();
// 背景を白にする（8）
list.setBackgroundColor(Color.WHITE);
}
EkiListFragmentの変更は、リストの背景を白にするものです（8）。この設定がないと、透明の背景になり、単に文字だけの表示になってしまいます。
最後に
今回は、Web APIからは離れてしまいましたが、1ペインと2ペインの自動レイアウト切り替えと、地図表示の上に最寄り駅の一覧をオーバーラップさせるスマートフォン用の画面を解説しました。
次回は、Twitterと連携するためのAPIを紹介する予定です。
