구속조건 레이아웃에서 요소 중심화 방법

구속조건 레이아웃에서 요소 중심화 방법

사용 중ConstraintLayout응용프로그램 레이아웃을 만드는 응용프로그램에 있습니다.화면을 만들려는 중입니다. 화면이 있는 경우EditText그리고.Button중앙에 있어야 하고,Button다음보다 작아야 합니다.EditText마진 있음상위 16dp만.

여기 제 레이아웃과 스크린샷이 있습니다.

activity_content.xml_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>

더 간단한 방법이 있습니다.레이아웃 제약 조건을 다음과 같이 설정한 경우 및EditText크기가 고정되어 있습니다. 중심이 중앙에 위치합니다.ConstraintLayout:

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

왼쪽/오른쪽 쌍은 보기의 중심을 수평으로 하고 위쪽/아래쪽 쌍은 보기의 중심을 수직으로 맞춥니다.왼쪽, 오른쪽 또는 위쪽 아래쪽 구속조건을 뷰 자체보다 크게 설정하면 뷰가 두 구속조건 사이에 중심이 잡히기 때문입니다. 즉, 치우침이 50%로 설정됩니다.사용자가 직접 바이어스를 설정하여 보기를 위/아래 또는 오른쪽/왼쪽으로 이동할 수도 있습니다.조금만 가지고 놀면 뷰 위치에 어떤 영향을 미치는지 알 수 있습니다.

업데이트:

체인

이제 사용할 수 있습니다.chain에 등장하는.packed모드는 유진의 답변에 설명된 대로입니다.

---

가이드라인

50% 위치에서 수평 가이드라인을 사용하고 아래쪽 및 위쪽(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>

가이드라인이 있는 솔루션은 단일 라인이 있는 이 특정 사례에만 작동합니다.EditText다중 회선에 대해 작동하도록 하려면EditText사용해야 합니다.layout_constraintVertical_chainStyle="packed".

<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>

다음과 같이 표시됩니다.

체인 사용에 대한 자세한 내용은 다음 게시물을 참조하십시오.

• 구속조건 레이아웃을 사용하여 인터페이스 구축
• 제약 조건 레이아웃을 사용하여 대응형 UI 구축

화면 크기의 백분율로 중앙에 보기를 배치할 수 있습니다.

이 예에서는 너비와 높이의 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'
}

이 태그를 보기에 추가합니다.

    app:layout_constraintCircleRadius="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"

디자인 모드에서 마우스 오른쪽 버튼을 클릭하고 가운데를 선택할 수 있습니다.

사용할 수 있습니다.layout_constraintCircle안의 중앙을 보기 위해.ConstraintLayout.

<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 및 0 반지름을 사용하여 뷰를 부모 중심으로 만들 수 있습니다.

그냥 추가android:gravity="center"당신의 레이아웃과 완성 :)

사용하다

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"

예

<ImageView
    android:id="@+id/ivIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background"
    android:contentDescription="@string/app_name"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

아래는 이미지를 화면 중앙에 배치합니다.

<?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">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:src="@drawable/logo" />
</androidx.constraintlayout.widget.ConstraintLayout>

언급URL : https://stackoverflow.com/questions/43143468/how-to-center-the-elements-in-constraintlayout