Hello, Android! (4)

以下の文章はこちらを参考に翻訳したものです。

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

XMLレイアウトへのUIのアップグレード

完成した“Hello World”の例では、”programmatic”と呼ばれるUIレイアウトを使用しており、ソースコード上で直接アプリケーションのUIを作成しビルドしています。多くのUIプログラミングを経験している方であれば、このやり方がいかに脆弱かをご理解いただけることでしょう。レイアウトを少し変更するだけで、やっかいな問題を引き起こす可能性があります。また、View同士の関連を忘れていまい、レイアウトエラーを引き起こしがちです。その結果、コードをデバッグするのに無駄な時間を浪費することになります。

このため、Androidは代わりとなるUI構築のモデルを提供しています。XMLベースのレイアウトファイルです。例とともに、このコンセプトを説明します。以下は、さきほど完成したプログラムと全く同じ振る舞いをするXMLレイアウトです。

AndroidのXMLファイルはシンプルな構造になっていることがほとんどです。ツリー構造のタグがあり、各タグ名はViewクラスになっています。この例では、TextViewを使ったエレメントが1つだけというとてもシンプルなツリー構造となっています。XMLレイアウトのタグ名には、自作のViewクラスのようにViewクラスを継承したクラスであればなんでも使用することができます。ソースコード上でやるよりずっと簡単に構造や構文を定義できるので、UIを速く簡単に組み立てることができます。このモデルは、アプリケーションのプレゼンテーション(UI)とデータの登録・検索を行うアプリケーションロジックを分離するというWeb開発モデルからヒントを得ています。

上記の例では、4つの属性を定義しています。以下にそれぞれの概要を記述します。

属性	意味
xmlns:android	XML名前空間の定義です。Android名前空間で定義された共通属性を参照するということをAndroidツールに対して通知します。レイアウトファイルの一番外側には、この属性を含めなければなりません。
android:layout_width	Viewが使用する画面の幅を定義します。今回のケースではViewは1つなので、”fill_parent”を設定して画面最大幅を使用しています。
android:layout_height	“android:layout_width”と同様ですが、使用する画面の高さを定義します。
android:text	TextViewが保持しているテキストを設定します。今回の例では、いつもの”Hello, Android”です。

以上が、XMLレイアウトがどのようなものかの説明でした。では、XMLレイアウトはいったいどこに置けばいいのでしょうか？それは、プロジェクトの/res/layout/の下です。”res”は”resources”の短縮形で、アプリケーションが必要とするソースコード以外の全てのリソース（画像、ローカライズ文字列、XMLファイルなど）を保持します。

EclipseプラグインはXMLファイルを1つ生成してくれています。以前の例ではこのファイルを使いませんでしたが、パッケージエクスプローラー上で/res/layout/フォルダを開きmain.xmlファイルを編集することもできます。main.xmlファイルの内容を上記のXMLに置き換えて、変更を保存してください。

パッケージエクスプローラーのソースコードフォルダからR.javaを開いてみてください。以下のようなものが表示されるはずです。

public final class R {
    public static final class attr {
    };
    public static final class drawable {
        public static final int icon=0x7f020000;
    };
    public static final class layout {
        public static final int main=0x7f030000;
    };
    public static final class string {
        public static final int app_name=0x7f040000;
    };
};

プロジェクト上のR.javaには、ファイル上で定義された全リソースへのインデックスが記述されています。ソースコードからこのクラスを使用すれば、簡単にプロジェクトに含まれるリソースを参照することができます。この機能は特にEclipseのようなIDEのコード補完機能と組み合わせると強力です。探している参照を素早く、インタラクティブに配置することができます。

注意すべき重要なこととして、”layout”内部クラスとそのメンバ変数”main”が挙げられます。新しいXMLレイアウトファイルが追加された場合、Eclipseプラグインは変更を検知しR.javaファイルを再生成します。プロジェクトに他のリソースを追加した場合でも、R.javaは変更されます。

最後にHelloAndroidのソースコードを修正し、UIをハードコードしている状態からXMLを使うようにします。以下は、変更後のクラスです。ソースコードがよりシンプルになっているのがわかるでしょう。

package com.android.hello;

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

public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

ソースコードを修正する際には単にコピーアンドペーストせず、Rクラスのコード補完機能を試してみてください。かなり役に立つ機能だということがわかるでしょう。

修正が完了したら、アプリケーションを再起動してみましょう。緑の実行(Run)矢印アイコンをクリックするだけです。もしくは、メニューの 実行(Run) > ヒストリーの実行(Run History) > Hello, Android からでも実行できます。以前と全く同じものが表示されるはずです。異なる2つのやり方でレイアウトを適用しましたが、最終的には同じ結果になりました。

XMLレイアウトに関して、他に実装しなければならないことは多々あるのですが、今回はここまでにしておきましょう。このアプローチの詳細情報は「ユーザインターフェースの実装」を参照してください。

• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -

Android翻訳目次へ