Android UI 基本 レイアウト

この記事は2016年1月12日に書かれたものです。内容が古い可能性がありますのでご注意ください。


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

AndroidアプリのUIはすべて、ViewViewGroupにより構成されます。
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_widthlayout_heightです。
それぞれViewの幅と高さを指定するもので、各Viewは必ずこの二つのパラメータを指定しておく必要があります。

  • wrap_contentはその中身が求める領域にあわせてViewサイズを決定します。
  • match_parentはそのViewの親ViewGroupが許す範囲でViewサイズを決定します。

様々なディスプレイサイズの端末に対応するために、layout_widthlayout_height
dp単位やwrap_contentmatch_parentを用いて相対的なレイアウトを行うことが推奨されます。

補足:ネストについて

ViewGroupのサブクラスはひとつのレイアウトの中にレイアウトをネストする(入れ子にする)ことができます。
これにより複雑な構造のUIを設計することが出来ますが、ネストの階層の深いレイアウトは描画処理が重くなります。
快適なUIにするためにも出来るだけ階層の浅いレイアウトを心がけましょう。

 

Androidのレイアウトの基本となる内容について説明しました。
よく使うViewGroupサブクラスや特徴的なViewについては別途記事にしたいと思います。

  • このエントリーをはてなブックマークに追加

PAGE TOP