【Android】Androidアプリ開発のLayoutの種類

#プログラミング勉強日記
2020年12月25日
FrameLayoutとLinearLayoutの2種類について扱ってきたが、Android Studioを使ったレイアウトの種類をまとめる。

#RelativeLayout
　他のコンポーネントと相対的な関係でコンポーネントを配置することができる。各パーツとの相対位置が必要な場合に使う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/78122309-d310-5251-7d61-6ffb265edb45.png)

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <TextView
            android:id="@+id/name_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:text="名前"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:layout_toRightOf="@id/name_label"
            android:text="山田　太郎"
            />
        <TextView
            android:id="@+id/age_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/name_label"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:text="年齢"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/name_label"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="16dp"
            android:layout_toRightOf="@id/age_label"
            android:text="22"
            />
    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
```

#LinearLayout(Vertical)
　レイアウトに配置されたパーツを縦一列に並べたい場合に使う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/30186b7a-7d5a-cb92-bc89-948a1b33ffdc.png)

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="409dp"
        android:layout_height="729dp"
        android:orientation="vertical"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp"
        tools:ignore="MissingConstraints">

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
```

#LinearLayout(Horizontal)
　レイアウトに配置されたコンポーネントを横一列に並べたい場合に使用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/661b3b6d-12f0-5a4b-4cff-6ed56cf97799.png)

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="409dp"
        android:layout_height="729dp"
        android:orientation="horizontal"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp"
        tools:ignore="MissingConstraints">

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
```
#TableLayout
　パーツを格子状に配置したい場合に使用する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/9460761e-96af-2382-65a1-ddceffd2374b.png)

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TableLayout
        android:layout_width="409dp"
        android:layout_height="729dp"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp"
        tools:ignore="MissingConstraints">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <Button
                android:id="@+id/button14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button15"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <Button
                android:id="@+id/button18"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button16"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <Button
                android:id="@+id/button12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button17"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <Button
                android:id="@+id/button13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />
        </TableRow>
    </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
```


#参考文献
[レイアウト](https://developer.android.com/guide/topics/ui/declaring-layout?hl=ja)
[覚えておくと便利！Androidアプリ開発のLayoutの使い方【初心者向け】](https://techacademy.jp/magazine/4457)
[【デザイナー向け】基礎から始めるAndroidレイアウトXML入門](https://bowyer-app.com/2017/01/foundation-of-android-layout-xml-for-designer/)