[Android/UI] 9. Constraint Layout(컨스트레인트 레이아웃)

 

---

Constraint Layout

• 부모가 될 수 있는 뷰 (컨테이너 뷰)

• 자식 뷰들을 제약을 통해 배치하는 레이아웃

• Relative Layout의 기능 + 다른 기능

     -> Relative Layout의 상위호환이다!

• center 속성이 없다.

     - 반대 방향으로 작용하는 두 개의 제약을 동시에 적용하면 두 제약의 가운데에 배치된다.

     ex) A뷰의 왼쪽에 있어라 + A뷰의 오른쪽에 있어라 = A뷰의 가운데에 배치

• layout_constraint + 제약 이름

 

1. 상대적 위치 배치 (Relative Layout의 기능)

• layout_constraintLeft_toLeftOf="@id/아이디"

     - constraint -> 제약

     - Left -> 속성이 적용되는 뷰의 왼쪽 변

     - toLeftOf -> Of 뒤에 오는 뷰의 왼쪽 변

     - 즉, 속성이 적용되는 뷰의 왼쪽 변을 Of 뒤에 오는 뷰의 왼쪽 변에 맞춘다는 뜻.

• 아이디 또는 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#000000"
        app:layout_constraintLeft_toRightOf="@+id/text1"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

TextView2(검정 박스)의 왼쪽 변을 TextView1(빨간 박스)의 오른쪽 변에 맞췄다.

 

2. 여백

• margin 설정을 위해서는 설정하려는 방향에 대한 제약이 반드시 있어야 한다.

     - 왼쪽 변에 margin을 넣으려면, 왼쪽 변이 어디에 제약되어 있는 지가 필요하다.

     ex) layout_marginLeft="100dp"

            layout_constraintLeft_toRightOf="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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="50dp"
        android:background="#000000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

TextView(검정 박스)의 왼쪽 변에 margin 50dp를 주었다.

 

3. 치우침 (Bias)

• 반대 방향인 두 제약을 걸어 가운데에 배치하였을 때, 어느 한 쪽으로 치우치게 할 수 있는 기능.

• 치우침 정도를 0 ~ 1 값으로 설정하여 0인 경우 왼쪽 또는 위, 1인 경우 오른쪽 또는 아래로 완전히 치우친다.

• 즉, 0.5는 중간 = 치우침 없음.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.7" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.3" />

</androidx.constraintlayout.widget.ConstraintLayout>

TextView1(검정 박스)은 수평으로 가운데 정렬이지만 치우침 0.7을 하여 오른쪽으로 약간 치우쳐 있다. TextView2(빨간 박스)는 수직으로 가운데 정렬이지만 치우침 0.3을 하여 위쪽으로 약간 치우쳐 있다.

 

4. 비율 (= Linear Layout의 weight)

• 수평 또는 수직 방향으로 길이의 가중치 설정

• 가중치를 설정하는 길이는 0dp로 설정하여야 한다.

     ex) layout_width="0dp"

            layout_constraintHorizontal_weight="1"

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/text1"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="1"
        android:background="#FF0000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/text2" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="2"
        android:background="#00FF00"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/text1"
        app:layout_constraintEnd_toStartOf="@id/text3" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="3"
        android:background="#0000FF"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/text2"
        app:layout_constraintEnd_toEndOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

TextView1(빨간 박스), TextView2(초록 박스), TextView3(파란 박스)가 1:2:3 비율로 배치되어 있다.

 

5. 원형 위치 설정 (Circular Positioning)

• 한 뷰를 기준으로 뷰를 원형으로 위치를 배치한다.

• layout_constraintCircle="@id/아이디" : 해당 아이디의 뷰를 원의 기준으로 삼는다.

• layout_constraintCircleRadius="값" : 원의 중심인 뷰와 해당 뷰, 두 뷰의 중심간의 거리를 설정한다.

• layout_constraintCircleAngle="값" : 위쪽 방향을 0도로 하여 각도를 설정한다.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/center"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="#000000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="#FF0000"
        app:layout_constraintCircle="@id/center"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="30" />

</androidx.constraintlayout.widget.ConstraintLayout>

TextView1(검정 박스)를 중심으로 100dp 만큼 떨어진 곳에 30도 만큼 시계 방향으로 회전하여 TextView2(빨간 박스)가 있다.

 

6. Chain

• 뷰 간의 상호 연결

     ex) A뷰를 B뷰의 오른쪽에 배치, B뷰를 A뷰 왼쪽에 배치

• Chain Style

     - 뷰 간의 배치를 어떤 모양으로 할 것인지

     - Chain의 맨 왼쪽 또는 맨 위의 뷰가 Chain Head가 되어 Chain의 Style을 적용할 수 있다.

     - 속성

          - spread : 모든 뷰가 빈 공간에 균일하게 퍼짐. 속성을 명시하지 않으면 spread가 기본 값이다.

          - spread_inside : 제일 외곽 뷰들은 바깥으로 붙고, 남은 뷰들이 빈 공간에 균일하게 퍼짐.

          - packed : 모든 뷰가 모여서 하나로 붙고, 공간의 중간에 배치.

     ex) layout_constraintHorizontal_chainStyle="packed"

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/text2"
        app:layout_constraintHorizontal_chainStyle="packed" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0000"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/text1"
        app:layout_constraintRight_toRightOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

TextView1(검정 박스)의 오른쪽 변은 TextView2(빨간 박스)의 왼쪽 변에 배치, TextView2(빨간 박스)의 왼쪽 변은 TextView1(검정 박스)의 오른쪽 변에 배치하여 Chaining 하였고, Chain Style을 packed로 하여 뷰끼리 붙여서 배치하였다.

 

* Start와 End

• 나라마다 글자를 읽는 방향이 LTR(Left To Right)과 RTL(Right To Left)로 다를 수 있다.

• 만들 애플리케이션이 글로벌 지원을 한다면 UI를 만들 때 나라마다 다른 방향의 배치를 고려해야 할 수 있다.

• 대부분의 국가의 방식인 LTR은 Start = Left, End = Right이고, 주로 아랍권 문화 국가의 방식인 RTL인 Start = Right, End = Left 이다. 

 

 

 

 

 

 

이 글은

패스트 캠퍼스 Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online

강의를 듣고 공부한 내용을 바탕으로 작성되었습니다.

 

---