203

ConstraintLayout응용 프로그램에서 응용 프로그램 레이아웃을 만드는 데 사용 하고 있습니다. A는 화면을 만들 wheren 하나에 내가 노력하고 EditText와 Button중심에 있어야하고 Button아래의해야 EditTextmarginTop 만 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>

android android-layout android-constraintlayout

— N 샤르마
소스

144

최신 정보:

체인

이제 Eugene의 답변에 설명 된대로 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>

— 파이 픽
소스

1

감사합니다 @Pycpik 나는 무엇을 사용하는지 이해할 수 없었 <android.support.constraint.Guideline습니까? 사용할 때마다 사용해야 ConstraintLayout합니까?

— N Sharma

사용은 layout_constraintGuide_percent무엇입니까?

— N Sharma

1

Guideline뷰를 고정 할 수있는 보이지 않는 항목입니다. layout_constraintGuide_percent부모의 백분율입니다. 여기 0.5는 50 % 높이입니다

— Pycpik

감사. 알았어 나는 지금 둘 TextInputEditText과 하나가 Button있습니다. 화면 중앙에 배치하고 싶습니다. 그러나 현재로서는 pastebin.com/iXYtuXHg 가 아닙니다. 여기 스크린 샷 dropbox.com/s/k7997q2buvw76cp/q.png?dl=0입니다.

— N Sharma

1

가운데를 가운데에 놓고 위와 아래에 하나를 추가하거나 가운데에 넣을 수 LinearLayout있습니다.

— Pycpik

331

더 간단한 방법이 있습니다. 레이아웃 제약 조건을 다음과 같이 설정하고 EditText의 크기가 고정되어 있으면 제약 조건 레이아웃의 중심에 배치됩니다.

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

왼쪽 / 오른쪽 쌍은 뷰를 가로로 가운데에 맞추고 위쪽 / 아래쪽 쌍을 세로로 가운데에 놓습니다. 왼쪽, 오른쪽 또는 맨 위, 맨 아래 제약 조건을 자체 뷰보다 크게 설정하면 뷰가 두 제약 조건 사이에 집중되므로 바이어스가 50 %로 설정되기 때문입니다. 바이어스를 스스로 설정하여보기를 위 / 아래 또는 오른쪽 / 왼쪽으로 이동할 수도 있습니다. 조금만 연주하면 뷰 위치에 어떤 영향을 미치는지 볼 수 있습니다.

— 빈
소스

5

이것은 지침을 사용하는 것보다 훨씬 더 나은 방법입니다.

— ssand

48

app:layout_constraintCenter_in="parent"훨씬 나아질 것입니다. 그러나 항상 구글은 그것을 제공하지 않았다.

— Gojir4

1

이것은 더 적절하며 또한 많은 대화와 예에서 볼 수 있습니다.

— TapanHP

간단하고 이해하기 쉽습니다.

— Yohanes AI

2

복잡한 레이아웃이 만들어지면 마케팅이 중단되면 단순한 센터링이 더 이상 작동하지 않기 때문에 지침이 더 좋습니다. 더 나은 상단과 하단의 가이드 라인에 대한 가이드 라인과 센터가하기

— 닉 터너

58

지침이있는 솔루션은이 특정 경우에 한 줄 EditText가있는 경우에만 작동합니다. 여러 줄의 EditText에서 작동하게하려면 "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>

그 모습은 다음과 같습니다.

다음 게시물에서 체인 사용에 대한 자세한 내용을 읽을 수 있습니다.

— 유진 브루 소프
소스

이것이 가장 좋은 대답입니다. 다른 답변은 하나 또는 두 개의보기에서만 작동합니다. 하나, 둘, 그리고 원하는만큼 많은 뷰에서 작동하므로 확장 성이 뛰어납니다.

— mdelolmo

20

보기를 화면 크기의 백분율로 가운데에 맞출 수 있습니다.

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

— 살아있는 사랑
소스

12

이 태그를보기에 추가하십시오

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

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

— 베라
소스

8

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 and zero radius를 사용하면 뷰를 부모 중심으로 만들 수 있습니다.

— 에나 키
소스

최고의 솔루션. "app : layout_constraintCenter_in ="parent ""와 같이 (존재하지 않음)

— Bénédicte Lagouge

ConstraintLayout에서 요소를 가운데에 배치하는 방법

최신 정보: