UIの構築


Android developers」のチュートリアルをみながら「Hello, World」アプリを作成しています。前回は「新規Androidプロジェクトを作成」についてみました。
「Hello, World」アプリ作成のステップは次のようになります。

  1. AVD の作成
  2. 新規 Android プロジェクトを作成する
  3. UI を構築する
  4. アプリケーションを実行する
  5. UI を XML レイアウトにアップグレードする
  6. プロジェクトをデバッグする

今回はSTEP3の「UI を構築する」についてみていきます。

Step 3. UI (User Interface) を構築する

前回に新規プロジェクトの作成についてみましたが、実はADTプラグインを使って新規プロジェクトを作成した時点で「Hello World, HelloAndroid!」を表示するソースができあがっています。このままAndroid 仮想デバイス(AVD)で実行させれば「Hello World, HelloAndroid!」が表示されます。
では新規プロジェクト作成直後のUI状態についてみてみます。

上記画像は新規プロジェクト作成直後のディレクトリ、ファイル構造です。
今回は大きく5つに分けました。

  1. アクティビティー
    通常はアクティビティー1つは1画面に相当します。画面ごとに処理を記述します。
  2. リソース管理
    Androidが自動的に生成しリソースを管理します。勝手に書き換えてしまうと正常に動作しなくなる恐れがあるので基本触りません。
  3. 画像保存
    端末により解像度が異なります。もし全ての端末で同じ画像を使うとすると、低解像度用に画像を合わせた場合、高解像度では画像が小さくなったり画質が悪くなったりします。Androidは解像度ごとに画像保存ディレクトリを準備しており、同じファイル名で各解像度にあった画像を準備しておくと自動的に選択して適正な画像を表示してくれます。
  4. レイアウト
    画面のデザインを作成してXML形式で保存します。GUIツールでデザインが作成できる機能もあります。
  5. 値を管理
    一般的に言われるストリングテーブルの機能が標準であります。画面上に表示される文字列を定数で管理します。こうすることにより定数の値を変更するだけで日本語アプリから英語アプリに簡単に変更できたりします。またストリングテーブルのxmlファイルを複数準備して切り替える処理をすれば、マルチ言語対応のアプリができます。

リソース管理やレイアウトの詳しい内容についてはSTEP5「UI を XML レイアウトにアップグレードする」で詳しくみていきたいと思います。
今回は各ファイルの関連付けだけ軽くみていきます。

アクティビティー(HelloAndroid.java)
package com.example.helloandroid;

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);
   }
}

処理は単純でビューを指定してセットするだけの処理が記述されています。11行目で

R(リソース)のlayout(res>layout)のmain(main.xml)

をアクティビティのビューとしてセットしています。

レイアウト(main.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で記述します。

  • 8~12行目でレイアウト内にTextViewというテキストを表示する部品をつくりました。
  • 11行目でTextViewのandroid:textに表示したい文字列を指定しています。文字列リソースでの指定もできます。
  • @string/hello は文字列リソースを指定しています。res/values/strings.xml ファイル内で定義したhelloの値を表します。

詳しい内容についてはSTEP5「UI を XML レイアウトにアップグレードする」でみます。今回は文字列リソースの値を表示するだけのレイアウトになっているんだと確認できればいいです。

ストリングテーブル(strings.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="hello">Hello World, HelloAndroid!</string>
 <string name="app_name">Hello, Android</string>
</resources>

3行目で

<string name="hello">Hello World, HelloAndroid!</string>

helloという定数に「Hello World, HelloAndroid!」という文字列を定義しています。

各ファイルの関連のまとめ


文字列リソースとしてstrings.xmlでは「hello」に「Hello World,HellpAndroid」という文字列を定義します。

今回はレイアウトでは直接デザインに文字列を書き込まないで文字列リソースを指定してレイアウトに表示します。文字列リソース「@strings/hello」なのでレイアウトstrings.xmlで定義したhelloをレイアウトに表示する指定です。結果、レイアウトには「Hello World,HellpAndroid」が表示されます。

アクティビティHelloAndroid.javaではレイアウト(ビュー)をセットするだけの処理が書かれていました。レイアウトの指定は「R.layout.main」なのでlayout > main.xmlのレイアウトをセットしています。結果、アクティビティ(画面)を表示するとレイアウトの「Hello World,HellpAndroid」が表示されます。

xmlレイアウトを使用しない記述

チュートリアルでは先にxmlレイアウトを使用しない記述が書かれています。アクティビティHelloAndroid.java内にレイアウト関連のクラスのインスタンスを生成して画面を作成します。

package com.example.helloandroid;

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

public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TextView tv = new TextView(this);
        tv.setText("Hello, Android");
        setContentView(tv);
    }
}
  • 12行目でテキストを表示するためのレイアウトクラスのインスタンスを生成しています。
  • 13行目で生成したレイアウトインスタンスに表示する文字列をセットしています。
  • 14行目は画面に表示する為にアクティビティにレイアウトをセットしています。

xmlレイアウトを使うことが強制でないということだけわかればいいと思います。実はxmlレイアウトもビルドのときに対応するJavaのレイアウトクラスに変換しているようです。なのでコードとして直接書くかxmlレイアウトとして書いて後で変換するかの違いです。ただxmlレイアウトではGUIツールも準備されているのでプログラムの全くわからない人でもレイアウトを作成することができます。つまり共同プロジェクトではプログラム担当とデザイン担当に分担することもできます。

xmlレイアウトを使用しない記述はレイアウトクラスを覚えなくてはいけません。Androidクラスにどのようなものがあるかは後々 調べてまとめたいと思います。実際アプリ開発するときはxmlレイアウトを使うのがほとんどだと思うので、xmlレイアウトを使わない記述はこの程度で終わりたいと思います。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です