Androidアプリでのタブレット用2ペイン表示

Web APIで楽々Androidアプリ（8）

　Android端末の通信機能と、国内外のさまざまなサイトで提供されているWeb APIを活用すれば、楽しいアプリをかんたんに作ることができます。この連載では、多種多様なWeb APIの紹介と、そのAPIを利用したサンプルアプリの制作を通じて、Androidアプリの実践的な開発を解説します。

はじめに

　前回は、Google Mapsのイベントリスナー処理と、MapFragmentをカスタマイズする方法を解説しました。第8回めの本稿からは、スマートフォン、タブレットの両方に対応できるように変更していきます。今回は、まず最寄り駅の一覧を表示するFragmentを追加して、2ペイン表示する方法を解説しましょう。

対象読者

　Androidアプリケーションの開発を始めたい方で、JavaとEclipseの基本的な知識がある方を対象とします。

2ペイン表示とは

　ペインとは、表示領域のことです。つまり2ペイン表示とは、2つのウインドウを表示することを意味します。スマートフォンよりも画面サイズが大きいタブレットに適した画面構成で、次のように、おなじみの画面表示になります。

東京（東海道新幹線）をタップしたところ

　左側のペインでは、Web APIから取得した最寄り駅情報の一覧を表示しています。一覧のなかの駅をタップをすると、地図の中心がその駅の位置に移動します。

スマートフォン、タブレット両対応のアプリを作成する

　タブレット向けには、地図と一覧の2ペイン表示、スマートフォン向けには地図の1ペイン表示（一覧表示はオーバーラップする）するように変更します。

スマートフォン、タブレット対応までの手順

　次のような手順で、コードを書き換えていくことにします。今回は、1～4までを解説します。

1. 一覧表示のフラグメントを追加する
2. 2つのフラグメントを生成する
3. 駅情報を一覧表示する
4. フラグメントにクリックのコールバックメソッドを追加する
5. 1ペイン表示のレイアウトを追加する（次回以降）
6. レイアウトの自動切り替え設定を追加する（次回以降）

一覧表示のフラグメントを追加する

　一覧表示は、ListFragmentというクラスを利用して作成します。ListFragmentとは、その名のとおり、情報をかんたんにリスト表示できるFragmentクラスです。表示するデータ（データソース）は、配列やデータベースなどが利用できます。

　ListFragmentの表示は、ListViewウィジェットが用いられており、あらかじめデフォルトでレイアウトが用意されています。そのため、別途レイアウトファイルを用意しなくても、かんたんに一覧表示することができます。もちろんカスタマイズも可能です。

　では、まずはListFragmentを継承して、最寄り駅を表示するEkiListFragmentクラスを追加してみましょう。

EkiListFragment.java

package com.rakuraku.android.ekimap;
import android.app.ListFragment;
import android.os.Bundle;

// 最寄り駅情報を一覧表示するFragment
public class EkiListFragment extends ListFragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setRetainInstance(true); // Fragmentを保存する
    }
}

　追加したコードは、setRetainInstanceメソッドで、Fragmentを保存するものです。

　まだ一覧表示するデータは何も設定していませんが、次はこの状態のまま、2ペイン表示するようにしてみます。