【Java】Android Studioでレイアウトファイルを編集する｜画面作成

Android Studio でアプリ画面を作成する方法を知りたい

という方に向けた記事になります。

Androidアプリ開発ではアプリ画面をレイアウトファイルで編集します。
※レイアウトファイル（activity_main.xml）はプロジェクトを作成したときに自動生成されます。

本記事では、AndroidStudioでレイアウトファイルを編集（アプリ画面を作成）する方法について解説します。

《Androidアプリ開発を独学で学ぶならこの本》

リンク

Androidアプリ開発で使用するファイル
レイアウトファイルの場所と編集モード
レイアウト（Layout）とは
1. LinearLayoutの使い方
2. ビュー（部品）で使用される属性
まとめ

Androidアプリ開発で使用するファイル

Androidアプリ開発で使用するファイルは主に以下の2つです。

・レイアウトファイル（自動生成される：activity_main.xml）
・javaファイル（自動生成される：MainActivity.java）

レイアウトファイルにはアプリ画面を、javaファイルにはアプリの動き（処理）を記述します。つまり、レイアウトファイルとjavaファイルを合わせて1つの画面として機能することになります。

そのため、レイアウトファイルとjavaファイルは関連した名前を付けるのが一般的です。

レイアウトファイルの場所と編集モード

以下のレイアウトファイルを編集していきます。
アプリ名/app/src/main/res/layout/activity_main.xml

レイアウトファイルを開くと、右上の方に「Code」「Split」「Design」というボタンがあり、ここで編集モードを切り替えることができます。

編集になれるまでは「Split」がおすすめです。「Split」ではソースコードを書き、書いたコードにより実際の画面がどうなるのかプレビュー表示することができます。

Code：レイアウト(画面)をソースコードのみで編集
Split：レイアウト(画面)をソースコードとデザインの両方で編集
Design：レイアウト(画面)をデザインのみで編集

レイアウト（Layout）とは

レイアウト（Layout）とは、ビューグループと呼ばれ、ビュー（部品）を入れる箱となります。
Androidアプリの画面は、ビューグループの中に、ビューを配置して作成していきます。

ビューグループは主に以下の4つです。

・LinearLayout：ビューを横一列、または縦一列に並べる
・FrameLayout：ビューを重ねて並べる
・RelativeLayout：ビューを相対的に並べる
・ConstraintLayout：RelativeLayoutと似ている。制約をによりレイアウトが決まる。

ビューはたくさんあるので使用する都度、調べて覚えるのがよいと思います。
基本的なビューは以下の3つです。

・TextView：文字列を表示する
・EditText：テキストを入力する
・Button：ボタンを表示する

一番扱いやすい「LinearLayout」で、ビューグループとビューの使い方を見ていきます。

LinearLayoutの使い方

LinearLayoutはビューを横一列、または縦一列に並べるかを指定できます。

横一列に並べたい場合は「android:orientation=”horizontal”」を指定します。TextViewを横一列に並べると以下の通りです。

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ビュー１" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ビュー２" />

</LinearLayout>

縦一列に並べたい場合は「android:orientation=”vertical”」を指定します。Buttonを縦一列に並べると以下の通りです。

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ビュー１" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ビュー2" />

</LinearLayout>

まずはコピペでも構いませんので、どのように表示が変わるか、確認してみてください。

ビュー（部品）で使用される属性

TextViewを使用すると、アプリ画面に文字列を表示することができることを確認しました。さらに、どんな文字列を表示するのか、どんなサイズ・色にするのか等の追加情報をつけるために「属性」を使用します。

ビュー固有の属性もありますが、ここではビューに共通で使用される主な属性を見ていきます。

・android:id
・android:text
・android:layout_width
・android:layout_height

android:id

画面部品のIDを設定します。IDを設定することで、ビューを一意に識別することが可能です。
すべてのビューに設定する必要はありませんが、Javaファイル内でビューを使用する場合は設定が必要になります。

<TextView
        android:id="@+id/tv_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ビュー１" />

android:text

画面部品に表示するテキストを設定します。上のコード例では表示したい文字列を直接指定しましたが非推奨です（警告が出力されます）ので、「strings.xml」にテキストを設定し、設定したものをレイアウトファイルから参照します。

アプリ名/app/src/main/res/values/strings.xml

<string name="tv_text1">ビュー１</string>

アプリ名/app/src/main/res/layout/activity_main.xml

<TextView
        android:id="@+id/tv_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tv_text1" />

android:layout_width／height

「android:layout_width」でビュー（部品）の横幅を、「android:layout_height」でビュー（部品）の高さを指定します。

以下のサンプルコードのように、「match_parent」もしくは「wrap_content」を属性値として記述できます。もちろん、「100dp」のように、直接大きさを指定することも可能です。

<?xml version="1.0" encoding="utf-8"?>
<!-- match_parent でオブジェクトを親部品いっぱいに広げる -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- wrap_content でオブジェクトに必要な大きさに広げる -->
    <TextView
        android:id="@+id/tv_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tv_text1" />

</LinearLayout>