[Android] 簡単な画面を作成する

今回のレッスンでは、前回作成したプロジェクトを変更し、テキストフィールドとボタンを持った簡単な画面をレイアウトXMLで作成する方法を説明します。
広 告
目次
前提条件
動作確認端末
- Google Nexus 5 – 5.0.0 – API21(エミュレータ)
1. LinearLayoutを使ってレイアウトする
画面レイアウトを変更するためには、レイアウトXMLを編集する必要があります。

Projectビューからres/layout/activity_main.xml
を開きます。そして画面下部タブの「Text」をクリックするとレイアウトXMLのコードが表示されます。
前回の手順でプロジェクト作成した場合、ルート要素がRelativeLayout
で、その子要素としてTextView
が記述されているはずです。
今回はLinearLayout
を使って、画面を再レイアウトしていきます。LinearLayout
の説明についてはこちらを参考にしてください。
1
TextView
要素を削除し、RelativeLayout
要素をLinearLayout
要素に置き換えます。
2
LinearLayout
要素にandroid:orientatin
属性を追加し、設定値として”horiontal”
を設定します。
ここまでの結果は以下のようになっています。
res/layout/activity_main.xml
<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="horizontal" tools:context=".MainActivity"> </LinearLayout>
android:layout_width
属性とandroid:layout_height
属性についての説明はこちらを参照して下さい。
2. テキストフィールドを追加する
次にテキストフィールドを画面に追加します。テキストフィールドの表示方法について詳しくはこちらを参照してください。
1.
LiearLayout
要素の配下にEditText
要素を追加します。id
属性は"@+id/edit_message"
とします
2
layout_width
属性とlayout_height
属性には"wrap_content"
を設定します
3
hint
属性に"@string/edit_message"
を設定します。
ここまでの結果は以下のようになっています。
res/layout/activity_main.xml
<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="horizontal" tools:context=".MainActivity"> <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"
部分がエディタ上で赤く表示されているかと思います。これは参照先の値が宣言されていないからです。
3. Stringリソースを追加する
"@string/edit_message"
の参照先をStringリソースに値を追加します。

Projectビューからres/values/strings.xml
を開きます。
1
resources要素配下にstring要素を1行追加します。
name
属性に"edit_message"
を、string
要素の値に"メッセージを入力して下さい"
を設定します。以下のとおりになります。
<string name="edit_message">メッセージを入力してください</string>
これでlayout_main.xml
内の赤い表示が消えたはずです。
2
この後に使用するStringリソースを追加します。
name属性に"button_send"
を、string
要素の値に"送信"
を設定します。以下のとおりになります。
<string name="button_send">送信</string>
3
TextView
要素を削除したため、不要となったStringリソースを削除します。
name
属性が"hello_world"
の要素を削除します。
最終的にstrings.xml
の中身は以下のようになります。
res/values/strings.xml
<resources> <string name="app_name">MyApp</string> <string name="action_settings">Settings</string> <string name="edit_message">メッセージを入力してください</string> <string name="button_send">送信</string> </resources>
4. ボタンを追加する
テキストフィールドの右側にボタンを追加します。
1.
EditText
要素の下にButton
要素を追加します。
2
layout_width
属性とlayout_height
属性には"wrap_content"
を設定します
3
text
属性を追加し、値に先ほど追加したStringリソースである"@string/button_send"
を設定します。
ここまでの結果は以下のようになっています。
res/layout/activity_main.xml
<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="horizontal" tools:context=".MainActivity"> <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>
アプリを実行すると以下のような画面になります。

5. テキストフィールドを画面幅に合わせる
テキストフィールドの幅を画面いっぱいに伸ばしたいと思います。
1
EditText
要素にlayout_weight
属性を追加し"1"
を設定します
2
EditText
要素のlayout_width
属性の値を"0dp"
に修正します。
ここまでの結果は以下のようになっています。
res/layout/activity_main.xml
<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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="horizontal" tools:context=".MainActivity"> <EditText android:id="@+id/edit_message" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="@string/edit_message"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send"/> </LinearLayout>
アプリを実行します。以下のようにテキストフィールドが画面幅いっぱいに表示されています。

以上で完成です。次回のレッスンでは、ボタンクリック時の動作を追加します。