画面をXMLで設計する

画面のデザインをコードで行うのは煩雑な場合があるので、Androidでは画面のデザインを行うためのXML構文をサポートしています。それぞれのAndroid Viewクラスに対応した多くのカスタム要素が定義されています。そのため、HTMLファイルを作成するのと同じように構造化されたタグによって画面をデザインすることが出来ます(これらは、アプリケーションのres/layout/ディレクトリに保存します)。利用可能なエレメントとXMLフォーマットについてはLayout Resources[※1] をご覧下さい。各ファイルは一つのandroid.view.Viewエレメントに対応付いており、それぞれが単純なビジュアル要素あるいは子オブジェクトを持つレイアウト要素(画面や、画面上の要素)となっています。[※2] Androidがアプリケーションをコンパイルする際に、これらのファイルはActivity.onCreate()においてsetContentView(R.layout.layout_file_name)としてコード上で読み込めるandroid.view.View のリソースにコンパイルされます。

各XMLファイルはAndroid GUIクラスに対応したタグによって構成されます。これらは概ね、それぞれのクラスメソッドに対応した属性情報を持ちます(例えば、EditTextにはEditText.setText()メソッドに対応したtext属性があります)。

これらクラス・メソッド名と要素・属性名の対応付けが絶対のものではないことに注意してください。大体は問題無いのですが、常に1対1対応しているわけではありません。

また、AndroidがXMLにおいて先に記述された要素から順に描画を行おうとすることにも注意が必要です。また、要素定義が被った場合、XML内で最後に記述された要素が他の要素よりも上に被さって表示されることにも注意してください。

各XMLファイルは単一のViewあるいはViewGroupオブジェクトがrootとなる構造にコンパイルされるため、単一のルートタグを含む必要があります。以下のサンプルでは最も外側のLinearLayout[※3] オブジェクトがこれにあたります。

layout_somethingと名付けられた属性は、オブジェクトのLayoutParamsメンバに対応します。Layout Resourcesでは、LayoutParamsプロパティの設定方法についても解説しています。

以下の値で寸法指定を行うことが出来ます(TypedValueで解説されています):

例： android:layout_width="25px"

これらの寸法についての詳細は、Dimension Valuesをご覧下さい。

以下のXMLファイルにより、右側の画面が表示されます。なお、画面最上部のテキストはActivity.setTitleを呼ぶことで設定されています。相対要素の属性(すなわち、layout_toLeftなど)は相対リソース指定IDで表現されていることに注意してください。[※4]

Screen shot showing how this layout XML file is rendered. 
<?xml version="1.0" encoding="utf-8"?>
<!-- Demonstrates using a relative layout to create a form -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:background="@drawable/blue"
                android:padding="10px">

    <TextView id="@+id/label" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:text="Type here:"/>

    <EditText id="@+id/entry" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content"
              android:background="@android:drawable/editbox_background"
              android:layout_below="@id/label"/>
  
    <Button id="@+id/ok" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_below="@id/entry"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10px"
            android:text="OK" />

    <Button android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:layout_toLeft="@id/ok"
            android:layout_alignTop="@id/ok"
            android:text="Cancel" />
</RelativeLayout>

XMLリソースを読み込む

コンパイルされたレイアウトリソースを読み込むのは非常に簡単で、以下の例のようにアプリケーションのonCreate()メソッド内に呼び出しを1つ追加するだけです。

protected void onCreate(Bundle savedValues)
{
   // Be sure to call the super class.
   super.onCreate(savedValues);

   // Load the compiled layout resource into the window's
   // default ViewGroup.
   // The source file is res/layout/hello_activity.xml
    setContentView(R.layout.hello_activity);
  
   // Retrieve any important stored values.
   restoreValues(savedValues);
}