web-dev-qa-db-ja.com

ConstraintLayoutの要素を中央に配置する方法

私は自分のアプリケーションでConstraintLayoutを使ってアプリケーションのレイアウトを作成しています。 1つのEditTextとButtonが中央に配置され、ButtonがEditTextの下に配置され、marginTopが16dpになるような画面を作成しようとしています。

これが私のレイアウトとスクリーンショットです。

activity_authenticate_content.xml

<Android.support.constraint.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:paddingLeft="16dp"
    Android:paddingRight="16dp"
    tools:context="com.icici.iciciappathon.login.AuthenticationActivity">

    <Android.support.design.widget.TextInputLayout
        Android:id="@+id/client_id_input_layout"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Android.support.design.widget.TextInputEditText
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:hint="@string/login_client_id"
            Android:inputType="textEmailAddress" />

    </Android.support.design.widget.TextInputLayout>

    <Android.support.v7.widget.AppCompatButton
        Android:id="@+id/authenticate"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="16dp"
        Android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toTopOf="@id/client_id_input_layout" />

</Android.support.constraint.ConstraintLayout>

enter image description here

androidandroid-layoutandroid-constraintlayout
140
N Sharma

更新：

チェーン

Eugeneの答えで説明されているように、chainモードでpacked機能を使うことができます。

ガイドライン

水平ガイドラインを50％の位置で使用し、edittextとbuttonにbottomとtop（8dp）の制約を追加することができます。

<Android.support.constraint.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:paddingLeft="16dp"
    Android:paddingRight="16dp">

    <Android.support.design.widget.TextInputLayout
        Android:id="@+id/client_id_input_layout"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        Android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        Android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <Android.support.design.widget.TextInputEditText
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:hint="@string/login_client_id"
            Android:inputType="textEmailAddress"/>

    </Android.support.design.widget.TextInputLayout>

    <Android.support.v7.widget.AppCompatButton
        Android:id="@+id/authenticate"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:text="@string/login_auth"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        Android:layout_marginTop="8dp"
        Android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        Android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Android.support.constraint.Guideline
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:id="@+id/guideline"
        Android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

</Android.support.constraint.ConstraintLayout>

Layout Editor

106
Pycpik

もっと簡単な方法があります。次のようにレイアウト制約を設定し、EditTextが固定サイズの場合は、制約レイアウトの中央に配置されます。

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

左右のペアはビューを水平方向にセンタリングし、上下のペアはビューを垂直方向にセンタリングします。これは、左、右、または上、下の拘束をビュー自体よりも大きく設定すると、ビューが2つの拘束の間の中央にくるため、バイアスが50％に設定されるためです。自分のバイアスを設定して、ビューを上下または左右に移動することもできます。少し遊んでみると、ビューの位置にどのように影響するかがわかります。

237
binW

ガイドライン付きの解決策は、この特定の場合にのみ1行のEditTextを使用して機能します。それを複数行のEditTextで動かすためには、 "pack"チェーンを使うべきです。

<Android.support.constraint.ConstraintLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:paddingLeft="16dp"
    Android:paddingRight="16dp">

    <Android.support.design.widget.TextInputLayout
        Android:id="@+id/client_id_input_layout"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/authenticate"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <Android.support.design.widget.TextInputEditText
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:hint="@string/login_client_id"
            Android:inputType="textEmailAddress" />

    </Android.support.design.widget.TextInputLayout>

    <Android.support.v7.widget.AppCompatButton
        Android:id="@+id/authenticate"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginTop="16dp"
        Android:text="@string/login_auth"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
        app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
        app:layout_constraintTop_toBottomOf="@id/client_id_input_layout" />

</Android.support.constraint.ConstraintLayout>

外観は次のとおりです。

View on Nexus 5

以下の記事でチェーンの使い方についてもっと読むことができます。

45
Eugene Brusov

画面サイズの割合としてビューを中央に配置できます。

この例では幅と高さの50％を使用しています。

<Android.support.constraint.ConstraintLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:background="#FF0000"
        Android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</Android.support.constraint.ConstraintLayout>

これはConstraintLayoutバージョン1.1.3を使用して行われました。それをgradleのあなたの依存関係に追加することを忘れないでください、そしてそこに新しいバージョンがあるならばバージョンを上げてください：

dependencies {
...
    implementation 'com.Android.support.constraint:constraint-layout:1.1.3'
}

enter image description here

6
live-love

constraintLayout内の中央ビューにはlayout_constraintCircleを使用できます。

<Android.support.constraint.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:id="@+id/mparent"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">
        <ImageButton
            Android:id="@+id/btn_settings"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_home_black_24dp"
            app:layout_constraintCircle="@id/mparent"
            app:layout_constraintCircleRadius="0dp"
            />
    </Android.support.constraint.ConstraintLayout>

constraintCircle to parentとradiusを0にすると、ビューを親の中心にすることができます。

2
Enakhi