XMLファイルで画面レイアウトを定義

続いてXMLファイルに画面にどのようなビューを設置するのかを記述し、作成したXMLファイルをアクティビティに設定する方法を確認します。

まずはXMLファイルを一つ作成します。新規に作成する方法は別のページで確認します。今回は既に作成されている他のXMLファイルをコピーして使います。パッケージ・エクスプローラーでXMLファイルを追加したいプロジェクトの「res」＞「layout」を見て下さい。「main.xml」ファイルが作成されていると思います。

「main.xml」ファイルはプロジェクトを作成した時に自動で作成されたレイアウト用XMLファイルです。このファイルをコピーし、同じ「layout」上で貼り付けて下さい。次のように名前を入力するダイアログが表示されます。

今回は「test6_1.xml」としました。

では「test6_1.xml」をダブルクリックして下さい。ソースエディタと同じ位置にXMLファイルの設定用のウィンドウが表示されます。画面下部のタブで「test6_1.xml」タブをクリックして下さい。

現在は次のように記述されています。

<?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"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

レイアウト用XMLファイルの記述方法は「レイアウトをXMLファイルで定義」で詳しく解説します。上記は最下層のビューグループとしてLinearLayoutを使用し、そのLinearLayoutにTextViewを1つ追加しています。

ではこのXMLファイルを次のように書き換えます。

<?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"
    >
  <Button  
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="保存"
      />
  <Button  
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="キャンセル"
      />
</LinearLayout>

これで画面レイアウト用のXMLファイルが作成されました。

XMLファイルをアクティビティに設定

このXMLファイルを使ってアクティビティに設定するにはActivitiyクラスで定義されているsetContentViewメソッドを使います。

setContentView
public void setContentView(int layoutResID)

Set the activity content from a layout resource. The resource will be inflated, adding 
all top-level views to the activity.

Parameters:
  layoutResID Resource ID to be inflated.

前のページで使用したsetContentViewメソッドと同じですが引数がViewクラスのオブジェクトからint型の値に変更となっています。このint型の値はレイアウトXMLファイルのリソースIDと呼ばれるものです。

リソースIDはレイアウト用XMLファイル名が「ファイル名.xml」だった場合には「R.layout.ファイル名」で参照が可能です。「main.xml」だった場合には「R.layout.main」となります。今回の場合はファイル名が「test6_1.xml」ですので「R.layout.test6_1」となります。

では事前に用意したレイアウト用XMLファイルをアクティビティに設定するには次のように記述します。

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  setContentView(R.layout.test6_1);
}

これで準備は完了です。

サンプルプログラム

では実際に試してみます。「アクティビティの追加」を参考に「Test6_1Activity」をプロジェクトに追加し、起動時にこのアクティビティが呼び出されるように設定します。

作成された「Test6_1Activity.java」ファイルを次のように記述します。

package jp.javadrive.sample;

import android.app.Activity;
import android.os.Bundle;

public class Test6_1Activity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.test6_1);
    }
}

「test6_1.xml」というファイルを作成し、作成したプロジェクトの「res/layout」ディレクトリに配置します。ファイルの中身は次のようにします。

<?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"
    >
  <Button  
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="保存"
      />
  <Button  
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="キャンセル"
      />
</LinearLayout>

では実行してみます。

二つのボタンが追加されたビューグループがアクティビテイに追加されました。

XMLファイルを使って画面のレイアウトを行う場合、プログラムの中にはビューの設定や配置方法などを記述する必要はないためプログラムはすっきりとさせることができます。ただしプログラムの実行前にXMLファイルは作成しておく必要がありますのでプログラムの実行中にビューを追加したりする場合にはこの方式は使用できません。