ConstraintLayout(1)

ConstraintLayout는 layout에 배치되는 뷰들에 여러 제약(Constraint)을 적용하여 각 뷰의 위치와 크기를 결정한다. 여기서 말하는 "제약(Constraint)"이란, 각 요소들의 최종 위치와 크기를 결정하게 될 조건, 예를 들어, 특정 뷰 왼쪽 사이드를 지정된 뷰의 오른쪽 사이드에 맞추거나, 뷰의 왼쪽, 오른쪽 사이드를 각각 부모 레이아웃의 왼쪽, 오른쪽 사이드에 맞추는 것 등을 말하며, 이러한 각각의 제약(Constraint)은 컨스트레인트레이아웃이 가지는 하나의 레이아웃 속성으로 매핑된다.

ConstraintLayout을 프로젝트에 추가

build.gradle 파일에 다음 dependencies를 추가

dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.0.4"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha06"
}

ConstraintLayout 속성 기본 사용법

ConstraintLayout이 제공하는 constraint(제약조건)들은 기본적으로 'layout_constraint'로 시작하며, 뒤에 구체적인 제약 조건이 명시된다.

 

 layout_constraintXXX ( XXX = 구체적인 제약 조건) 

constraint(제약조건)

가로축 상의 배치는 left, right, start 그리고 end 속성으로 할 수 있으며, 세로축 상의 배치는 top, bottom 그리고 text에 한해서 baseline을 지정할 수 있다

이미지 출저 : 찰스의 안드로이드

여백을 주고 싶다면 margin을 이용하면 된다. 여백에 들어가는 값은 오직 0 또는 양수값만 적용할 수 있다.

이미지 출저 : 찰스의 안드로이드

GuideLine은 View의 위치를 잡는데 도움을 주는 유틸리티 클래스로 기본적인 동작은 visibility의 상태는 View.GONE, 기본적인 사이즈는 0dp이다. 

app:layout_constraintGuide_begin  : 시작 지점으로 부터의 거리

app:layout_constraintGuide_end  :  끝 지점으로 부터의 거리

app:layout_constraintGuide_percent : 시작 지점으로 부터의 % 위치

Example

출처 (https://github.com/android/views-widgets-samples)

1. Basic Centering

Centered Button의 코드를 확인해보자.

    <Button
        android:id="@+id/button3"
        android:layout_width="201dp"
        android:layout_height="wrap_content"
        android:text="@string/centered_button"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="31dp"
        app:layout_constraintTop_toBottomOf="@+id/textView2"/>

app:layout_constraintRight_toRightOf="parent"

Centered Button의 오른쪽 사이드(right)를 parent의(Of) 오른쪽(ToRight)에 맞추라는 의미이다.

app:layout_constraintTop_toBottomOf="@+id/textView2"

Centered Button의 위쪽 사이드(top)를 속성 값으로 지정된 ID 뷰의(Of) 아래쪽 사이드(ToBottom)에 맞추라는 의미이다.

만약 View를 중앙정렬하고 싶다면 다음과 같이 배치하면 된다. 

    <Button		
        ...
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        ...
	/>

Button33의 코드를 확인해보자.

    <Button
        android:id="@+id/button33"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button33"
        app:layout_constraintRight_toRightOf="@+id/button3"
        app:layout_constraintLeft_toRightOf="@+id/button3"
        app:layout_constraintBottom_toTopOf="@+id/button32"
        app:layout_constraintTop_toTopOf="@+id/button32"
        app:layout_constraintHorizontal_bias="0.5" />

app:layout_constraintHorizontal_bias="0.5"

수평 방향(Left/Right 또는 Start/End) 사이드 제약 시, 양 사이드 간 위치 비율을 0.5(50%)로 맞추라는 의미이다.

default값은 0.5이다. 0.5보다 작으면 왼쪽으로 크면 오른쪽으로 배치된다.

2. GuideLine

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.85" />

android:orientation="vertical"

app:layout_constraintGuide_percent="0.85"

수직으로 배치되었고 가로 전체길이 기준으로 85%위치되는 지점에 배치되었다는 의미이다.

 

Button4 코드를 확인해보자

    ....
    
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="Button4"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        android:layout_marginLeft="8dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button5"
        app:layout_constraintRight_toLeftOf="@+id/guideline3"
        android:layout_marginRight="8dp"
        app:layout_constraintHorizontal_bias="0.9" />    
        
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.15" />
        
    <androidx.constraintlayout.widget.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline3"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />
        
        ....
        

 

※ tools:layout_constraintXXX_creator

namespace가 암시하듯이 Android Studio에서만 사용된다. 이러한 속성은 xml 파일이 기기에 푸시될 때 실제로 제거된다. 

References

• https://github.com/android/views-widgets-samples
• https://www.charlezz.com/?p=669
• https://www.charlezz.com/?p=691