UI を XML レイアウトにアップグレードする


Android developers」のチュートリアルをみながら「Hello, World」アプリを作成しています。前回は「アプリケーションンを実行する」についてみました。
「Hello, World」アプリ作成のステップは次のようになります。

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

今回はSTEP5の「UI を XML レイアウトにアップグレードする」についてみていきます。

Step 5.UI を XML レイアウトにアップグレードする

前回のSTEP4で実行した「Hello, World」のサンプルは、アクティビティに直接UIのソースコードを記述する「プログラマティック」と呼ばれるUI レイアウトを使用しました。しかしこの記述方法には次のような欠点があります。

  • レイアウトの軽微な変更のたびに、ソース コード全体に関わる大きな問題が発生する可能性があるからです。
  • 複数のビューを適切に結びつけることも忘れられがちであるため、これによりレイアウトにエラーが発生し、コードのデバッグで時間が無駄になる場合がある

Android では、XML ベースのレイアウト ファイルを使用する別の UI 構築モデルが用意されているので、XMLレイアウトについて詳しくみていきます。

XML レイアウト

新規プロジェクト作成直後のUI状態について「UIの構築」の記事で詳しくみました。

新規プロジェクトを作成した時点で「Hello World, HelloAndroid!」を表示するソースができています。さらにXMLベースのレイアウトファイルを使用するUI構築モデルになっています。
XMLベースのレイアウトファイルは

res/layout/main.xml

になります。この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で記述します。Android XML レイアウト ファイルの全般的な構造はシンプルです。XML 要素がツリー構造になっており、含まれた各ノードが View クラスの名前を表しています。この構造により、プログラマティックなレイアウトよりもシンプルな構造と構文を使用して、迅速な UI 構築を非常に簡単に行うことができます。


自分はxmlのツリー構造や属性がわかりやすいように「アウトライン」と「プロパティ」のビューも表示しています。
アウトラインは

ウィンドウ  > ビューの表示 > 一般 > アウトライン

で、プロパティーは

ウィンドウ  > ビューの表示 > 一般 > プロパティ

でビューを追加できます。
<?xml version="1.0" encoding="utf-8"?>

xml形式でエンコードがutf-8であることを宣言しています。AndroidはxmlをJavaコードに変換して動作させるので特にここの記述はなくても動作するようです。

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
>

XML の各ノードが View クラスの名前を表していました。
LinearLayoutクラスは縦又は横方向にビューを配置していくレイアウトです。


サンプルの属性をみてみると

android:orientation="vertical"

となっています。今回はvertical(縦)方向にビューを配置していきます。アウトラインからの設定をみても「垂直方向」が選択されています。

   android:layout_width="fill_parent"
   android:layout_height="fill_parent"

該当の View が親要素の利用可能な幅または高さのうちどれくらいを占めるかを定義します。LinearLayoutは一番外の要素なので画面に対してになります。今回は幅も高さも「fill_parent」なので画面全体を占めます。API レベル8以上では fill_parentとせず match_parentとするようです。

   xmlns:android="http://schemas.android.com/apk/res/android"

Android ネームスペースで定義された共通の属性を参照することを Android ツールに伝える XML ネームスペース宣言です。すべての Android レイアウト ファイル内の最初と最後のタグはこの属性を持つ必要があります。階層構造になっているので一番外側のタグにだけ記述するのでしょうか。複数タグでの宣言はしてはいけないようです。

   <TextView
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:text="@string/hello"
   />

アウトラインをみてもTextViewがLinearLayoutの子階層になっていることがわかります。アウトラインのTextViewをクリックするとTextVeiwのプロパティーをみることができます。画像のプロパティは少し加工しています。
TextViewはテキストを表示する為のコンポーネントです。

       android:layout_width="fill_parent"
       android:layout_height="wrap_content"

該当の View が親要素の利用可能な幅または高さのうちどれくらいを占めるかを定義します。今回の親要素はLinearLayoutです。幅は「fill_parent」なのでLinearLayout要素の幅いっぱいまで占めます。高さは「wrap_content」なので内容に必要な部分(可変)だけ占めます。

       android:text="@string/hello"

@string/hello は文字列リソースを指定しています。res/values/strings.xml ファイル内で定義したhelloの値を表します。

チュートリアルでは他にも重要なことが書かれていますので一回読んでおくことをお勧めします。XMLベースのレイアウトファイルを使用した各ファイルとの関係については「UIの構築」でも記事にしたのでよかったら参考にしてください。


コメントを残す

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