【Android】LinearLayout内でviewを水平垂直方向共に中央寄せ置きたい

このようなUIなのですが、Button(id/janken_button)を画面中央（水平垂直方向共に中央寄せ）に置きたいです。


<?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"
    android:background="@android:color/darker_gray"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_gravity="center"
        tools:ignore="MissingConstraints">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:layout_gravity="center_horizontal"
            android:text="TextView" />


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="50dp"
            tools:ignore="MissingConstraints">

            <ImageView
                android:id="@+id/guu_imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                app:srcCompat="@drawable/guu" />

                <ImageView
                    android:id="@+id/tyoki_imageView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/tyoki"
                    android:adjustViewBounds="true"
                    android:layout_weight="1"/>

                <ImageView
                    android:id="@+id/paa_imageView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/paa"
                    android:adjustViewBounds="true"
                    android:layout_weight="1"/>
        </LinearLayout>

        <Button
            android:id="@+id/janken_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Button" />



</LinearLayout>



</androidx.constraintlayout.widget.ConstraintLayout>

【試した事】

・viewを画面中央に置くのにlayout_centerInParentがありますが、Buttonが動きませんでした。
・layout_gravity="center_horizontal"だと水平方向の中央には動きますが、垂直方向も中央にしたいです。
・layout_gravity="center_vertical"はButtonが動きませんでした。

【質問】

・なぜcenter_horizontalだと動き、center_verticalは動かないのでしょうか？
・Buttonを画面中央に置くにはどうすれば良いでしょうか？

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

xml
1<LinearLayout
2	xmlns:android="http://schemas.android.com/apk/res/android"
3	android:layout_width="match_parent"
4	android:layout_height="match_parent"
5	android:orientation="vertical"
6	>
7	<TextView
8		android:layout_width="match_parent"
9		android:layout_height="wrap_content"
10		android:text="Hello, world!"
11		android:layout_gravity="center_horizontal"
12		android:layout_marginTop="50dp"
13		/>
14
15	<!-- ImageViewは、用意できなかったので省略 -->
16
17	<FrameLayout
18		android:layout_width="match_parent"
19		android:layout_height="wrap_content"
20		android:layout_weight="1.0"
21		>
22		<Button
23			android:layout_width="wrap_content"
24			android:layout_height="wrap_content"
25			android:layout_gravity="center"
26			android:text="Push"
27			/>
28	</FrameLayout>
29</LinearLayout>
30

まず、「layout_centerInParent」は、RelativeLayoutの子ビューに対して指定するものです。
LinearLayoutの子ビューには使えません。

layout_gravityがcenter_horizontalは水平位置を中心にする事。center_verticalは垂直位置を中心にする事です。
水平・垂直位置の両方を中心にするならばcenterを指定します。

しかし、単に「layout_gravity="center"」とするだけではいけません。
「水平・垂直位置」というのは「LinearLayoutの子ビューの配置領域」(注意：「Buttonのサイズ」ではありません。この辺り、理解が難しいかと思いますが)に対して、です。
Buttonのlayout_heightがwrap_contentに指定されているため、「配置領域」が「Buttonのサイズ」に合わせられるようになっているため、「配置領域の垂直位置の中心」が変わらなくなっています。
(この辺りは、上のレイアウトでもFrameLayoutのlayout_weightを削除し、「android:background="#00ff00"」を加えてみると以下のようにわかりやすいかと思います)

「layout_weight="1.0"」に設定すると、「配置領域」が広がりますが、「Buttonのサイズ」もそれに合わせて広がりますので、おそらく意図していない結果になると思います。(意図した結果であればそれでいいのですが)
そこで、間にFrameLayoutをかます事により、配置領域自体は広がるようにして、ボタンのサイズ自体はそのままにします。

ところで、ConstraintLayoutは何か意図があって配置しているのでしょうか。
現状では何も機能していないように思われますが。(今後なにかに使うのであればいいのですが)
また、ConstraintLayoutを有効に使えばもっといい配置方法があるかもしれませんが、自分はConstraintLayoutを使った事がないので、その辺りの助言は差し上げる事はできません。

投稿2020/11/13 22:20