Skip to content

Most visited

Recently visited

navigation

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

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

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

Android は ViewViewGroup のサブクラスに対応する 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_widthandroid: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)と続きます。

リソースの種類の前のプラス記号(+)は、初めてリソース 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 と同じ名前になります。 ただし、リソースの参照は常にリソースの種類(たとえば idstring)によってその範囲が決まるため、名前が同じでも競合が発生することはありません。

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

デフォルトでは、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 のように、EditTextButton ウィジェットの両方がそのコンテンツに合う大きさになるよう設計されています。

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

ボタンの場合はこれで問題ありませんが、ユーザーが長い文字列を入力する可能性のあるテキスト フィールドの場合は、 使われていない画面の幅を使用してもよいでしょう。 その設定には、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] をクリックします。

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

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a one-minute survey?
Help us improve Android tools and documentation.