0. ConstraintLayout이란?

0-1. 개요

View의 요소를 배치 할 때 각 요소의 상관 관계에 따라 배치 위치를 결정합니다.
이렇게하면 화면 해상도와 종횡비의 차이로 인해 레이아웃 붕괴가 발생하는 것을 억제 할 수 있습니다.

0-2. 주요 각 요소 설명

①우측 지정

app:layout_constraintRight_toRightOf

→ 요소의 오른쪽 위치를 관련 요소의 오른쪽에 지정

app:layout_constraintRight_toLeftOf

→ 요소의 오른쪽 위치를 관련 요소의 왼쪽에 지정

②왼쪽 지정

app:layout_constraintLeft_toLeftOf

→ 요소의 왼쪽 위치를 관련 요소의 왼쪽에 지정

app:layout_constraintLeft_toRightOf

→ 요소의 왼쪽 위치를 관련 요소의 왼쪽에 지정

③상측 지정

app:layout_constraintTop_toTopOf

→ 요소의 위쪽 위치를 관련 요소의 위쪽에 지정

app:layout_constraintTop_toBottomOf

→ 요소의 위쪽 위치를 관련 요소의 아래쪽에 지정

④아래쪽 지정

app:layout_constraintBottom_toBottomOf

→ 요소의 아래쪽 위치를 관련 요소의 아래쪽에 지정

app:layout_constraintBottom_toTopOf

→ 요소의 아래쪽 위치를 관련 요소의 위쪽에 지정

0-3. 주의점

①상하의 안 1개 이상 또한 좌우의 안 1개 이상의 요소를 지정하지 않으면 에러가 된다.

즉, 다음과 같은 이미지
· constraintTop과 constraintBottom 만 있으면 오류가 발생합니다 (좌우 중 하나가 없기 때문에)
· constraintRight와 constraintLeft 만 있으면 오류가 발생합니다 (상하 중 하나가 없기 때문에)
· constraintTop과 constraintRight 만 있으면 오류가 발생하지 않는다

② 특정 태그로 둘러싸여 있어야 함

<androidx.constraintlayout.widget.ConstraintLayout>

위의 태그로 둘러싸인 요소에 대해 ConstraintLayout 규칙이 적용됩니다.
아래의 내용은 화면 레이아웃의 최상위에서 맨 아래까지이 코드로 둘러싸인 상태입니다.

1. 중앙 배치

【포인트】
양단의 요소를 지정하는 것으로 지정한 요소의 중앙에 View를 배치할 수 있다

1-1. 상하 좌우 중앙

①코드

    <TextView
        android:id="@+id/tx01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_secondary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

②결과

1-2. 상하 중앙

①코드

    <TextView
        android:id="@+id/tx01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_secondary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

②결과

1-3. 좌우 중앙

①코드

    <TextView
        android:id="@+id/tx01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_secondary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

②결과

2. 인접 배치

【포인트】
접하는 면에 옆에 배치하고 싶은 View를 지정하여 그 옆에 View를 배치
여기에서는 textview 「tx01(청색)」에 대해 「tx02(적색)」을 어떻게 지정하면 어떻게 표시되는지를 기재하고 있다

2-1. 오른쪽 이웃

①코드

    <TextView
        android:id="@+id/tx02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_error"
        app:layout_constraintLeft_toRightOf="@+id/tx01"
        app:layout_constraintTop_toTopOf="@+id/tx01" />

②결과

2-2. 왼쪽 이웃

①코드

   <TextView
        android:id="@+id/tx02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_error"
        app:layout_constraintRight_toLeftOf="@+id/tx01"
        app:layout_constraintTop_toTopOf="@+id/tx01" />

②결과

2-3. 위 이웃

①코드

    <TextView
        android:id="@+id/tx02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_error"
        app:layout_constraintRight_toRightOf="@+id/tx01"
        app:layout_constraintBottom_toTopOf="@+id/tx01" />

②결과

2-4. 아래에

    <TextView
        android:id="@+id/tx02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_error"
        app:layout_constraintRight_toRightOf="@+id/tx01"
        app:layout_constraintTop_toBottomOf="@+id/tx01" />

②결과

※ConstraintLayout 관련 다음 기사※
【대각 배치】
【GudeLine을 사용한 배치】