世界を目指せ!Androidアプリ開発入門

第7回 ユーザインターフェースの使い方:その2

この記事を読むのに必要な時間:およそ 3 分

画面レイアウトで注意する点

WindowsなどのデスクトップPCで動作するアプリとは異なり,タッチパネルを備えた掌サイズの端末向けの画面レイアウトを検討する場合,画面を手で覆い隠さないように,下から上に操作するようデザインにした方が使いやすくなります(Android OSのメニューが,画面下から表示されるのが,分かりやすい例です⁠⁠。

また,指で操作するので,画面パーツの大きさにも注意をはらう必要があります(作ると実感しますが,思っているよりも大きなサイズで作らないと,操作してストレスの溜まるアプリになります⁠⁠。

もちろん,例外はありますが,これからアプリを開発しようとしている方は,この二点に注意するようにしてください。

リストビュー入門

リストビューはAndroidのユーザインターフェースの中で,最も利用頻度が高いコントロールで,ホーム画面から遷移できる設定や内蔵のGmailクライアントのメール一覧など,多くのアプリで利用されています。

そのリストビューは,表示ロジックとデータを分離してプログラムするようになっており,データはAdapterクラスで管理し,それをリストビューに紐付けることで画面にデータを表示します。

リストビューは,以下の流れでプログラミングを行います。

  1. レイアウトの作成
  2. 表示データの準備とAdapterクラスの作成
  3. リストビューとAdapterクラスの紐付け

それでは,リストビューに文字列を表示するアプリを作成してみます。

今回は,作業の範囲が広いので,例として使っているサンプルプログラムをダウンロードできるように準備しています。以降は,これをベースに説明を進めていきます。

レイアウトの作成

まずは,メイン画面のレイアウトを作成します。

Eclipseのリソースエディタで,メイン画面にリストビューを配置します。リストビューを配置した後のXMLは以下になります。全画面でリストを表示するので,レイアウトはLinearLayoutを使用します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	>
	<ListView
		android:id="@+id/ListView01"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content">
	</ListView>
</LinearLayout>

サンプルでは「main.xml」としてプロジェクトの「res/layout」以下に保存されています。

次に,リストビューの行に相当するレイアウトを作成します。

作成するレイアウトのXMLは,以下の内容になります。

<?xml version="1.0" encoding="utf-8"?>
<TextView
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content" 
/>

これも,プロジェクトの「res/layout」以下に「rowitem.xml」として保存されています。

表示データの準備とAdapterクラスの作成

今回は,リストビューに文字列を表示するので,Stringクラスの配列を用意します。

ソースコードは,以下になります。

String[] data = {"HT-03A", "Xperia", "NexusOne", "Droid"};

この配列を使ってArrayAdapterをクラスを作成します。ソースコードは,以下になります。

ArrayAdapter<String> arrayAdapter
	= new ArrayAdapter<String>( this, R.layout.rowdata, data );

ArrayAdapterクラスの第一引数に,先で作成したリスト行のレイアウトリソース,第二引数に,表示用のStringクラスの配列を指定して,クラスの作成を行います。

リストビューとAdapterクラスの紐付け

メインアクティビティのonCreateで,リストビューのAdapterクラスの紐付けを行います。ソースコードは,以下になります。

public class Main extends Activity
{
	private String[] data = {"HT-03A", "Xperia", "NexusOne", "Droid"};

	@Override protected void onCreate( Bundle icicle ) {
		super.onCreate( icicle );

		setContentView( R.layout.main );

		ArrayAdapter arrayAdapter
			= new ArrayAdapter( this, R.layout.rowitem, data );

		ListView list = (ListView)findViewById( R.id.ListView01 );
		list.setAdapter( arrayAdapter );
	}
}

list.setAdapterの第一引数に指定で,作成しAdapterクラスであるarrayAdapterを指定しているところがポイントになります。これらのソースコードは,プロジェクトの「src/」以下に「Main.java」で保存されています。

動作確認

それでは,ビルドを実行してエミュレーターで動作確認を行ってみます。

画面7 サンプルの実行

画面7 サンプルの実行

いかがでしょうか? 画面7のように,リストビューに文字列が一覧表示されていれば,上手く動作していることになります。

まとめ

今回は,

  • Androidのレイアウトシステム
  • リストビューの使い方

をご説明しました。

リストビューは,基本的な使い方をご紹介しましたが,より凝ったレイアウトを持つリストビューを作る場合も考え方は変わらないので,今回のサンプルをベースにして,手を加えてみることをお勧めします。

著者プロフィール

傍島康雄(そばじまやすお)

5月30日生まれ。

モバイルデバイスが大好物。それで動くアプリの開発に喜びを感じている。スマートフォン前夜のWindows Mobile,PalmOSのアプリに情熱を傾けていたが,最近は停滞気味でコードを書くよりも文章を書く機会が多くなっており,文章を書くのも,プログラミングと同じくらい奥深い作業だと感じている。

ブログ:http://yasuos.com/blog/