Android　UI 基本　レイアウト

AndroidのUIを作るうえで基本となる内容をまとめたいと思います。

AndroidアプリのUIはすべて、ViewとViewGroupにより構成されます。
Viewはユーザーが接する画面上のモノです。TexiViewやButtonなどです。
ViewGroupはView(またはViewGroup)を内包しUI配置を決定するためのモノです。LinearLayoutやRelativeLayoutなどです。

AndroidはViewやViewGroupの様々なサブクラスが用意されており、これらを用いてUIを作っていくことになります。

レイアウト

まずレイアウトとは、AndrodiのUIコンポーネントの配置およびその決定を行う仕組みのことです。
レイアウトを指定する方法には二通りあります。

UI要素をxml(*)ファイルで定義する
プログラム上で要素のインスタンスを作成する

XMLで指定したオブジェクトをコード上で操作することも出来ます。
どちらの方法でも指定できますが、XMLで指定したほうが構造が把握しやすい上に挙動と表示を分離できるメリットがあります。
画面の向きの・画面サイズ・多言語等々柔軟に対応できるので基本的にXMLでレイアウトを定義します。

*XML･･･ExtensibleMarkupLanguageのこと。HTMLのようなマークアップ言語でタグを用いて様々な記述ができます。

下はTextViewとButtonを含むLinearLayoutを用いたレイアウトの例です。

main_layout.xml

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

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, world" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"/>

</LinearLayout>

XMLファイルは.xmlの拡張子をつけてAndroidのプロジェクト配下のres/layout/ディレクトリにおきます。

XMLファイルで定義したコンポーネントを画面に表示するにはsetContentView()を用います。
setContentView()の呼び出しはActivity.onCreate()が呼ばれた際に行います。

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

上の例ではmain_layout.xmlを読み込んでいます。

属性

AndroidのViewやViewGroupにはXMLで定義される様々な属性が用意されています。具体的にはidやTextViewのもつtextです。
その中でも共通の属性でありよく使う属性であるidについて述べておきます。

idはタグ内で指定し、idを付与することでそのViewをレイアウトのツリー内で一意に識別するために用います。

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, world" />

idはコードからこのViewを参照するために用いるのがもっともよく使うシーンでしょう。
コード上でXMLレイアウトからViewのインスタンスを取得するにはfindViewById()を用いて以下のようにします。

TextView textView = (TextView)findViewById(R.id.text);

findViewById()の返り値はViewオブジェクトなのでTextViewオブジェクトとして扱うにはキャストする必要があります。

パラメータ

XMLで指定される属性のうちlayout_○○○○○の形で与えられるものは、そのViewを含む親ViewGroupに対して適切な値を指定します。。
その重要なのがlayout_widthとlayout_heightです。
それぞれViewの幅と高さを指定するもので、各Viewは必ずこの二つのパラメータを指定しておく必要があります。