iOS開発者のAndroid開発入門その５（Layout）

はじめに

Android の Layout が色々あってわからないのでまとめました。
ソースはこれ↓
github鋭意作成中

サイズ指定

レイアウトの前に width などのサイズ指定について少し。

サイズ指定は下記3つがある。

match_parent
親 View と同じサイズにする
wrap_content
文字などコンテンツが表示できる十分なサイズにする
数値指定
10dp など指定したサイズにする

数値指定の場合の単位は下記の3つがあります。（基本的には dp でいいと思います）

dp
相対的な値指定。（iOS の pt と思っていいはず？）
sp
フォントサイズ指定用。相対的な値指定。
px
絶対的な値指定で pixel を指定する。あまり使わないと思う。

余白指定

余白には外側に指定する margin と padding がある。

margin

指定できるのは下記。

margin
marginTop
marginBottom
marginLeft
marginRight
marginStart
marginEnd

android:margin="8dp" と指定すると View の外側に上下左右に 8 dp の余白で設定される。左右の余白は多言語対応（アラビア語とか）考慮すると Left/Right ではなく Start/End で指定した方が無難。

padding

指定できるのは下記。

padding
paddingTop
paddingBottom
paddingLeft
paddingRight
paddingStart
paddingEnd

android:padding ="8dp" と指定すると View の内側に上下左右に 8 dp の余白で設定される。左右の余白は多言語対応（アラビア語とか）考慮すると Left/Right ではなく Start/End で指定した方が無難。

LinearLayout

定義

open class LinearLayout : ViewGroup

1	open class LinearLayout : ViewGroup

LinearLayout

こんなふうに縦横に並べたり境界線を付けたりできる。

並べる方向

HORIZONTAL
VERTICAL

境界線表示

SHOW_DIVIDER_BEGINNING
SHOW_DIVIDER_END
SHOW_DIVIDER_MIDDLE
SHOW_DIVIDER_NONE

下記のようにすると横に配置されます。

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:srcCompat="@drawable/botman_red"/>
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:srcCompat="@drawable/botman_blue"/>
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:srcCompat="@drawable/botman_yellow"/>
</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

<ImageView

android:layout_width="50dp"

android:layout_height="50dp"

app:srcCompat="@drawable/botman_red"/>

<ImageView

android:layout_width="50dp"

android:layout_height="50dp"

app:srcCompat="@drawable/botman_blue"/>

<ImageView

android:layout_width="50dp"

android:layout_height="50dp"

app:srcCompat="@drawable/botman_yellow"/>

</LinearLayout>

こんな感じ

等分表示したい場合は weight を利用する。

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/botman_red"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/botman_blue"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="1"
        app:srcCompat="@drawable/botman_yellow"/>
</LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal">

<ImageView

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

app:srcCompat="@drawable/botman_red"/>

<ImageView

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

app:srcCompat="@drawable/botman_blue"/>

<ImageView

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

app:srcCompat="@drawable/botman_yellow"/>

</LinearLayout>

境界線表示がしたい場合 android:divider="@drawable/divider" のように drawable を指定する必要があります。
下記のように drawable に divider.xml を作成してみます。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="1dp"/>
    <solid android:color="#000000"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>

</shape>

これを LinearLayout に指定してやると android:dividerPaddingと android:showDividers が指定できるようになります。

       <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:divider="@drawable/divider"
                android:dividerPadding="8dp"
                android:showDividers="middle"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_red"/>
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_blue"/>
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_yellow"/>
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_green"/>
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_pink"/>
            </LinearLayout>
        </LinearLayout>

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:divider="@drawable/divider"

android:dividerPadding="8dp"

android:showDividers="middle"

android:orientation="horizontal">

<ImageView

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

app:srcCompat="@drawable/botman_red"/>

<ImageView

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

app:srcCompat="@drawable/botman_blue"/>

<ImageView

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

app:srcCompat="@drawable/botman_yellow"/>

<ImageView

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

app:srcCompat="@drawable/botman_green"/>

<ImageView

android:layout_width="0dp"

android:layout_height="100dp"

android:layout_weight="1"

app:srcCompat="@drawable/botman_pink"/>

</LinearLayout>

こんな感じになります。dividerPadding は境界線の上下に余白がつきます。

RelativeLayout

定義

open class RelativeLayout : ViewGroup

1	open class RelativeLayout : ViewGroup

RelativeLayout

他 View との相対位置指定で配置を行うやつ。今はほぼ ConstraintLayout を使うようであまり使わないっぽい。

他 View との相対位置指定 ex. android:layout_alignBottom="@id/image_yellow"

ALIGN_BASELINE
ALIGN_TOP
ALIGN_BOTTOM
ALIGN_LEFT
ALIGN_RIGHT
ALIGN_START
ALIGN_END
ABOVE
BELOW
LEFT_OF
RIGHT_OF
START_OF
END_OF
CENTER_HORIZONTAL
CENTER_VERTICAL

親 Viewとの相対位置指定 ex. android:layout_alignParentBottom="true"

ALIGN_PARENT_TOP
ALIGN_PARENT_BOTTOM
ALIGN_PARENT_LEFT
ALIGN_PARENT_RIGHT
ALIGN_PARENT_START
ALIGN_PARENT_END
CENTER_IN_PARENT

FrameLayout

定義

open class FrameLayout : ViewGroup

1	open class FrameLayout : ViewGroup

FrameLayout

こんな感じで View を重ねて表示したりできる。

TableLayout

定義

open class TableLayout : LinearLayout

1	open class TableLayout : LinearLayout

TableLayout

格子状に配置できるやつ。GridView でもできるけど表示個数固定ならこっちのが楽かも？
行ごとに TableRow を作成して配置する。

実装はこんな感じ

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

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_red"/>
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_blue"/>
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_yellow"/>
            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_green"/>
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_pink"/>
                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    app:srcCompat="@drawable/botman_black"/>
            </TableRow>
        </TableLayout>

<TableLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<TableRow

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_weight="1">

<ImageView

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@drawable/botman_red"/>

<ImageView

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@drawable/botman_blue"/>

<ImageView

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@drawable/botman_yellow"/>

</TableRow>

<TableRow

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_weight="1">

<ImageView

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@drawable/botman_green"/>

<ImageView

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@drawable/botman_pink"/>

<ImageView

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

app:srcCompat="@drawable/botman_black"/>

</TableRow>

</TableLayout>

LinearLayout のサブクラスなので下記のように境界線表示もできる。

<TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@drawable/divider_horizontal"
            android:dividerPadding="8dp"
            android:showDividers="middle">

<TableLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:divider="@drawable/divider_horizontal"

android:dividerPadding="8dp"

android:showDividers="middle">

GridLayout

定義

open class GridLayout : ViewGroup

1	open class GridLayout : ViewGroup

GridLayout

格子状に表示するやつ。TableLayout と違い行またぎの表示ができる。

android:columnCount
列数指定
android:rowCount
行数指定
android:columnOrderPreserved
true/false 設定するみたいだけどちょっとわからない。。。
android:rowOrderPreserved
同上。。。
android:orientation
行数など指定していない場合はこの設定で縦横配置になる
android:useDefaultMargins
デフォルトで要素間にマージンがあるのでこれを false にすると要素間のマージンがなくなる

各要素に下記を設定できる

android:layout_column
android:layout_row
android:layout_columnWeight
android:layout_rowWeight
android:layout_columnSpan
android:layout_rowSpan

columnSpan と rowSpan で列またぎ行またぎ表示ができる。ex. android:layout_rowSpan="2" で2行またぎで表示。

       <GridLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="8dp"
            android:useDefaultMargins="false">

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_column="0"
                android:layout_row="0"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:text="A"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_column="1"
                android:layout_row="0"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:text="B"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_column="2"
                android:layout_row="0"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_rowSpan="2"
                android:text="C"/>
            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_column="0"
                android:layout_row="1"
                android:layout_columnWeight="1"
                android:layout_rowWeight="1"
                android:layout_columnSpan="2"
                android:text="D"/>
        </GridLayout>

<GridLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="8dp"

android:useDefaultMargins="false">

<Button

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_column="0"

android:layout_row="0"

android:layout_columnWeight="1"

android:layout_rowWeight="1"

android:text="A"/>

<Button

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_column="1"

android:layout_row="0"

android:layout_columnWeight="1"

android:layout_rowWeight="1"

android:text="B"/>

<Button

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_column="2"

android:layout_row="0"

android:layout_columnWeight="1"

android:layout_rowWeight="1"

android:layout_rowSpan="2"

android:text="C"/>

<Button

android:layout_width="0dp"

android:layout_height="0dp"

android:layout_column="0"

android:layout_row="1"

android:layout_columnWeight="1"

android:layout_rowWeight="1"

android:layout_columnSpan="2"

android:text="D"/>

</GridLayout>

上記のように設定するとこんな感じ

ConstraintLayout

定義

public class ConstraintLayout extends ViewGroup

1	public class ConstraintLayout extends ViewGroup

ConstraintLayout

RelativeLayout と同じように他の View と相対的な配置ができるやつ。RelativeLayout よりも柔軟な表現が可能！ Guideline を組み合わせると複数の View のラインを合わせるのに便利。

下記で指定の View を基準に上下左右の位置を設定できる ex. app:layout_constraintStart_toStartOf="@id/guideline_start"

位置

app:layout_constraintStart_toStartOf
app:layout_constraintStart_toEndOf
app:layout_constraintEnd_toEndOf
app:layout_constraintEnd_toStartOf
app:layout_constraintLeft_toLeftOf
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBaseline_toBaselineOf

こうやると中央表示になる

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:srcCompat="@drawable/botman_red" />
        </androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:layout_width="100dp"

android:layout_height="100dp"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:srcCompat="@drawable/botman_red" />

</androidx.constraintlayout.widget.ConstraintLayout>

バイアス

0~1の範囲でバイアスを指定できる

app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias

下記のようにすると左側に30％バイアスがかかる。説明がむずかしいので参考 -> XMLで始めるConstraintLayout

<TextView 
    app:layout_constraintHorizontal_bias="0.3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<TextView

app:layout_constraintHorizontal_bias="0.3"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent" />

マージン

制約対象の View が GONE の場合のマージンを設定できる

app:layout_goneMarginLeft
app:layout_goneMarginRight
app:layout_goneMarginStart
app:layout_goneMarginEnd
app:layout_goneMarginTop
app:layout_goneMarginBottom

角度指定

app:llayout_constraintCircle
app:llayout_constraintCircleRadius
app:llayout_constraintCircleAngle

下記のようにするとボタンAとボタンBの中心の距離が 100 dp でボタンAの中心から 45 度の位置にボタンBの中心がくるような配置になる。（詳細はここ）

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />