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

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

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

今回はユーザインターフェースの使い方の続編として,レイアウトシステムについて解説します。

前回のおさらい

前回は,Android OSのユーザインターフェースのパーツの使い方を学びました。

具体的には,

  • アプリタイトルの変更方法
  • 文字列リソースの管理方法
  • アプリアイコンの設定方法
  • メニューの追加とハンドリング方法

と言った説明をしました。

今回は,Androidのレイアウトシステムとアプリで最も多用するであろう,リストビューについてご説明します。レイアウトシステムは,上手く使いこなせば,画面の向きや様々な解像度に対応することができます。

レイアウトシステムとは

レイアウトシステムは,機能として珍しくありませんが,OSレベルで採用しているケースは少なく,Android特有の機能とも言えると思います。レイアウトは5種類存在し,画面に配置されるラベルやボタンなどのコントロールは,それぞれの特性に従って配置されます。

LinerLayout

LinerLayoutは,画面上のコントロールを縦又は横向きに一直線にレイアウトします。

これだけの説明では,使い道が想像できませんが,Androidのレイアウトは,入れ子にして使えるので,LinerLayoutの上にLinerLayoutを配置することで,画面1のようなログイン画面は簡単に作成できます。

画面1 ログイン画面

画面1 ログイン画面

画面1のレイアウトは,画面2のように入れ子構造でレイアウトされています。

画面2 入れ子構造のレイアウト

画面2 入れ子構造のレイアウト

このレイアウトでポイントとなりそうなプロパティをご説明します。

orientation:
verticalを設定すると,上から下へコントロールがレイアウトされ,未設定かhorizontalを設定にすると,左から右にレイアウトされる。
Layout height, Layout width:
fill_parentを設定すると画面一杯に表示される。wrap_conentを設定すると,表示に必要な幅と高さを自動で調整します。

RelativeLayout

筆者が開発に関係しているNetaShareで,多用するレイアウトです。

作成しようとする画面が,AとBの二つのコントロールを持つ場合,BをAの右や下に配置するといった相対的な位置指定が行えます。また,上端や下端にレイアウトするといった指定を行うことも可能です。

RelativeLayoutは,基準位置を決めてコントロールを配置することで,画面が回転したりサイズが変更になっても上手くレイアウトしてくれるので,NetaShareで多用しているわけですが,一方,慣れないとそれぞれのコントロールが,どう関係して配置されるのか把握しづらくなるデメリットもあります。

たとえば,画面3はNetaShareのフィード一覧画面です。

画面3 NetaShareのフィード一覧画面

画面3 NetaShareのフィード一覧画面

※リストビューをヘッダーの下に配置したいので,関係しあってレイアウトを保つような指定を行っている。

画面上部の黒い部分がギャラリーコントロール,その下がリストビューコントロールを使って画面を構成しています。この場合,画面上のギャラリーコントロールは,常に画面上に配置したいので「Layout align parent top」「true」に設定します。リストビューは,ギャラリーの下に常に配置したいので「Layout below」に,ギャラリーのIDを指定してレイアウトしています。

TableLayout

TableLayoutは,画面4のようにTableRowを入れ子にして使用します。

画面4 TableLayout

画面4 TableLayout

HTMLの<table>タグと<tr>タグに似ていて,カラムの幅も広いものに合わすところまで動きが同じです。このレイアウトは,画面5のようなログイン画面やデータを入力する画面を作成した時に使うと便利なレイアウトです。

画面5 ログイン画面でTableLayoutを使用

画面5 ログイン画面でTableLayoutを使用

TableLayoutは,格子状にコントロールが配置されるので,RelativeLayoutと比較すると動きが理解しやすく,追加・変換・削除が容易です。上手く使えばメンテしやすい画面を作ることができます。

AbsoluteLayout

AbsoluteLayoutは,コントロールの表示位置を絶対座標で指定できるレイアウトです。

画面6のように,コントロールの表示位置を画面左上を基点して絶対座標で指定します。

画面6

画面6

Androidの場合,さまざまな画面サイズの端末が存在するので,絶対座標やサイズで指定すると,画面にコントロールが表示されない等の問題が発生します。アプリが動作する端末が限定されてない限り,実際のアプリでは使用することはお勧めできません。

FrameLayout

FrameLayoutは,1つのコントロールを配置する為にあるレイアウトで,最もシンプルです。このレイアウトは,コントロールを常に左上に配置し,後から追加配置したコントロールは,上に重ねるように配置され表示されます。これもAbsoluteLayout同様に,実際のアプリで使用することはお勧めできません。

著者プロフィール

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

5月30日生まれ。

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

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

コメント

  • Re:

    綴りに誤りがあるので訂正してください。

    LinerLayout→LinearLayout

    参照:
    http://developer.android.com/reference/android/widget/LinearLayout.html

    Commented : #2  Android初心者 (2011/10/13, 18:43)

  • 動かない!

    サンプルアプリをDLしたでは動作しません。
    修正しなければNGです。

    サンプルアプリは正常に動作するものをアップすべきです。

    それから蛇足ですが、
    exsample ではなくて example です!

    Commented : #1  Android初心者 (2011/07/25, 18:12)

コメントの記入