Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

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

レッスン コメント
android_android-create-simple-ui_04

今回のレッスンでは、前回作成したプロジェクトを変更し、テキストフィールドとボタンを持った簡単な画面をレイアウトXMLで作成する方法を説明します。

 

広 告

 

目次

前提条件

動作確認端末

  • Google Nexus 5 – 5.0.0 – API21（エミュレータ）

1. LinearLayoutを使ってレイアウトする

画面レイアウトを変更するためには、レイアウトXMLを編集する必要があります。

 

android_android-create-simple-ui_01

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リソースに値を追加します。

 

android_android-create-simple-ui_02

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>

アプリを実行すると以下のような画面になります。

 

android_android-create-simple-ui_03

 

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>

 

アプリを実行します。以下のようにテキストフィールドが画面幅いっぱいに表示されています。

 

android_android-create-simple-ui_04

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

 

広 告