簡単なユーザー インターフェースを作成する

このレッスンでは、テキスト フィールドとボタンを含むレイアウトを XML で作成します。 次のレッスンでは、ボタンが押されたときにテキスト フィールドから別のアクティビティにコンテンツを送り、アプリが応答するようにします。

Android アプリのグラフィカル ユーザー インターフェースは、View オブジェクトと ViewGroup オブジェクトの階層構造を使って作られています。View オブジェクトは通常、ボタンやテキスト フィールドなどの UI ウィジェットです。ViewGroup オブジェクトは見えないビュー コンテナで、グリッドや縦方向のリストなど、子ビューのレイアウト方法を定義します。

Android は View と ViewGroup のサブクラスに対応する XML ボキャブラリを提供しているため、UI 要素の階層構造を使って UI を XML で定義できます。

レイアウトは ViewGroup のサブクラスです。このレッスンでは、LinearLayout を使用します。

図 1 レイアウト内での ViewGroup オブジェクトの分岐や View オブジェクトとの親子関係を表す階層図

線形レイアウトを作成する

1. Android Studio の [Project] ウィンドウで app > res > layout > activity_main.xml を開きます。

   この XML ファイルでアクティビティのレイアウトを定義します。このファイルにはデフォルトのテキスト ビュー「Hello World」が含まれています。

2. レイアウト ファイルを開くと、まず [Layout Editor] にデザイン エディタが表示されます。 このレッスンでは、XML を直接編集します。ウィンドウの下部にある [Text] タブをクリックすると、テキスト エディタに切り替えることができます。
3. ファイルの内容をすべて削除し、次の XML を挿入します。

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="horizontal">
   </LinearLayout>
   

LinearLayout はビュー グループ（ViewGroup のサブクラス）で、子ビューを縦向きか横向きで配置します。向きは android:orientation 属性で指定します。 LinearLayout のそれぞれの子は、XML での表示順で画面上にも表示されます。

その他の 2 つの属性、android:layout_width と android:layout_height は、サイズを指定するためにすべてのビューで必要です。

LinearLayout はレイアウトのルートビューであるため、幅と高さを "match_parent" に設定してアプリで使用できる画面領域の全体に表示する必要があります。 この値は、ビューの幅と高さが親ビューの幅と高さに合致するという宣言です。

レイアウト プロパティの詳細については、レイアウトをご覧ください。

テキスト フィールドを追加する

activity_main.xml ファイルで、<LinearLayout> 要素内に次の <EditText> 要素を追加します。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
</LinearLayout>

@string/edit_message にエラーが表示されても、すぐに修正できるので問題ありません。

追加した <EditText> の属性については以下をご覧ください。

android:id

これにより、アプリのコードからオブジェクトを参照できる、ビューの一意の識別子を提供し、オブジェクトを読み込んだり操作したりできます（次のレッスンで説明します）。

XML からリソース オブジェクトを参照しているときは、アットマーク（@）が必要です。 その後にリソースの種類（この場合は id）、スラッシュ、リソース名（edit_message）と続きます。

リソース オブジェクト

リソース オブジェクトは、ビットマップ、レイアウト ファイル、文字列など、アプリのリソースに関連した一意の整数名です。

すべてのリソースは対応するリソース オブジェクトを持ち、それらはプロジェクトの R.java ファイルで定義されています。 android:hint 属性の文字列の値を指定する必要があるときなど、リソースの参照には R クラスのオブジェクト名を使用できます。 また、android:id 属性を使用してビューに関連付けた任意のリソース ID を作ることもできます。これにより別のコードからビューを参照できるようになります。

SDK ツールでは、アプリをコンパイルするたびに R.java ファイルを生成します。このファイルには手動で変更を加えないでください。

詳細については、リソースの提供をご覧ください。

リソースの種類の前のプラス記号（+）は、初めてリソース ID を定義するときにのみ必要です。 アプリをコンパイルするとき、SDK ツールは ID 名を使用して、EditText 要素を参照するプロジェクトの R.java ファイルに、新しいリソース ID を作成します。 一度この方法でリソース ID が宣言されると、この ID への他の参照にプラス記号を付ける必要はありません。 プラス記号の使用は、新しいリソース ID を指定するときにのみ必要です。文字列やレイアウトなど具体的なリソースには必要ありません。 リソース オブジェクトについての詳細は、右のボックスをご覧ください。

android:layout_width および android:layout_height

幅と高さの値を具体的に設定する代わりに "wrap_content" 値を使用すると、コンテンツに合うサイズにビューの大きさが指定されます。 "match_parent" を使うと、親の LinearLayout に合うサイズに指定されるため、EditText 要素が全画面に表示されます。 詳細については、レイアウトをご覧ください。

android:hint

テキスト フィールドに何も入力されていないときに表示されるデフォルトの文字列です。値としてハードコードされた文字列を使用する代わりに、"@string/edit_message" 値は別のファイルで定義された文字列リソースを参照します。 具体的なリソースが参照されるため（識別子だけでなく）、プラス記号は必要ありません。 ただし、文字列リソースをまだ定義していない場合は、最初にコンパイル エラーが表示されます。 次のセクションで文字列を定義することでこの事態は避けられます。

注: この文字列リソースは、edit_message 要素 ID と同じ名前になります。 ただし、リソースの参照は常にリソースの種類（たとえば id や string）によってその範囲が決まるため、名前が同じでも競合が発生することはありません。

文字列リソースを追加する

デフォルトでは、Android プロジェクトの res > values > strings.xml に文字列リソースが含まれます。 ここに 2 行の文字列を新たに追加します。

1. [Project] ウィンドウで res > values > strings.xml を開きます。
2. 2 行の文字列を追加したファイルは次のようになります。

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <string name="app_name">My First App</string>
       <string name="edit_message">Enter a message</string>
       <string name="button_send">Send</string>
   </resources>
   

ユーザー インターフェースの文字に対しては、常にそれぞれの文字列をリソースとして指定します。 文字列リソースを使うと UI の文字を 1 か所で管理できるため、簡単に文字を検索したり更新したりできます。 また、文字列を外部に置くことで、それぞれの文字列リソースに別の定義を提供してアプリを別の言語にローカライズできます。

文字列リソースを使用してアプリを別の言語にローカライズする方法の詳細については、異なる端末のサポートをご覧ください。

ボタンを追加する

activity_main.xml ファイルに戻り、<EditText> の後にボタンを追加します。 ファイルは次のようになります。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <EditText android:id="@+id/edit_message"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:hint="@string/edit_message" />
        <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/button_send" />
</LinearLayout>

注: このボタンがアクティビティ コードから参照されることはないため、android:id 属性は必要ありません。

レイアウトは現在、図 2 のように、EditText と Button ウィジェットの両方がそのコンテンツに合う大きさになるよう設計されています。

図 2 幅を "wrap_content" に設定した EditText と Button ウィジェット

ボタンの場合はこれで問題ありませんが、ユーザーが長い文字列を入力する可能性のあるテキスト フィールドの場合は、 使われていない画面の幅を使用してもよいでしょう。 その設定には、LinearLayout 内で weight プロパティを使用します。このプロパティは android:layout_weight 属性を使って指定できます。

weight 値は、兄弟ビューが使うスペースと比較して、それぞれのビューが使う必要がある残りのスペースの分量を指定する数値です。 これは、飲料のレシピで材料の分量を示す方法と同様です。 「ソーダを 2、シロップを 1」は、全体の 2/3 がソーダであることを表しています。 たとえば、一方のビューで weight 値が 2、もう一方のビューで weight 値が 1 だとすると、合計は 3 になります。つまり最初のビューが残りのスペースの 2/3 を占め、次のビューが残りを占めることになります。 第 3 のビューを加えて weight 値を 1 にした場合は、weight 値 2 の最初のビューが全体の 1/2 を占めることになり、残り 2 つのビューがそれぞれ 1/4 になります。

すべてのビューでデフォルトの weight 値は 0 に設定されています。したがって 1 つのビューのみに 0 より大きな値を指定すると、他のビューに値が設定されるまで、そのビューがスペース全体に表示されることになります。

入力ボックスを画面幅に表示する

activity_main.xml の <EditText> を修正して、属性を次のようにします 。

<EditText android:id="@+id/edit_message"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

幅をゼロ（0 dp）に設定することでレイアウトのパフォーマンスが向上する理由は、幅に"wrap_content" を使うと、システム側で幅値の計算をするよう要求されるためです。この計算は最終的には無関係で、残りのスペースを埋めるように表示される幅値は、別の計算で求められます。

図 3LinearLayout の残りのスペース全体に表示されるよう、レイアウト全体の weight が割り当てられた EditText ウィジェット

activity_main.xml レイアウト ファイルは、最終的には次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

アプリを実行する

端末またはエミュレータでアプリがどのように見えるかを確認するには、ツールバーの [Run] をクリックします。

ボタンへの応答や別のアクティビティの開始など、アプリの動作を追加するには、次のレッスンに進んでください。