[Android] ConstraintLayout

ConstraintLayout은 RelativeLayout과 비슷하게 레이아웃 사이의 관계에 따라 모든 보기의 레이아웃이 결정되지만, RelativeLayout보다 유연하고 Android 스튜디오의 Layout Editor와 함께 사용하기 수월합니다.

ConstraintLayout을 사용해야 하는 이유🚀

ConstraintLayout를 사용해야 하는 이유를 알기 이전에 먼저 뷰가 그려지는 과정을 이해할 필요가 있습니다.

뷰가 그려지는 과정은 3가지 단계를 거쳐 view가 화면에 나타납니다.

1. Measure 단계 : view의 크기를 결정하는 단계입니다. 이 단계는 root 노드에서 시작해 반복적으로 호출되며, 각각의 호출은 부모로부터 전달된 인자들과 함께 발생합니다. 이 인자들은 widthMeasureSpec, heightMeasureSpec이라는 이름으로 전달됩니다.
2. Layout 단계 : 각각의 view 크기를 기준으로 view의 위치를 결정합니다. root 노드에서 시작해 leaf노드까지 반복적으로 호출됩니다.
3. Draw 단계 : 최종적으로 뷰를 캔버스 위에 실제 그리는 과정입니다. root 노드가 자신을 화면에 그리라는 요청을 받으면 자식 노드들에게 자신들을 측정하라는 메시지가 전달되며 모든 view가 측정될 때까지 이러한 과정이 반복됩니다.

따라서, 중첩된 레이아웃이 많을수록 측정하는 데 걸리는 시간이 늘어나게 됩니다.🙅🏻‍♂️

 

ConstraintLayout을 사용하면?🔥

안드로이드 성능 개선하는 방법 관련 포스팅을 참고하시면 Layout을 좁고 깊게 만들기보다는, 얇고 넓게 만들어 레이아웃의 중첩을 줄이면 성능을 향상할 수 있습니다.

 

ConstraintLayout의 장점👍🏻

1. 여러 다른 레이아웃의 다양한 기능을 하나의 레이아웃에서 처리할 수 있는 유연성을 제공합니다.
2. 다른 종류의 레이아웃을 중첩할 필요가 없으므로 레이아웃이 복잡해지지 않으며, 런타임 시에 사용자 인터페이스를 화면에 보여주는 성능도 향상됩니다.
3. 각 뷰와 화면 크기에 대한 제약사항을 통해 다양한 안드로이드 Device의 화면 크기에 알맞게 처리해주는 뷰로 구현이 되어있기 때문에, 어떤 장치에서 앱이 실행되더라도 응답성과 적응성이 좋은 인터페이스를 만들 수 있습니다.

 

ConstraintLayout의 제약 조건들🤔

다른 레이아웃과 마찬가지로 ConstraintLayout도 자신이 포함하는 시각적인 컴포넌트의 위치와 크기를 관리합니다. 그리고 이때 각 자식 위젯에 설정되는 제약을 기반으로 처리합니다.

 

1. Relative Positioning

상대 위치 지정은 ConstraintLayout에서 레이아웃을 만드는 기본 빌딩 블록 중 하나입니다.

이러한 제약 조건을 사용하면 주어진 위젯을 다른 위젯에 상대적으로 배치할 수 있습니다. 가로 및 세로축에서 위젯을 제한할 수 있습니다.

• 수평 축 : Left, Right, Start, End
• 수직 축 : Top, Bottom , Text BaseLine

View B의 왼쪽을 View A의 오른쪽에 배치

<Button android:id="@+id/buttonA" 
		... 
		/>

<Button android:id="@+id/buttonB" 
		...
		app:layout_constraintLeft_toRightOf="@+id/buttonA" />

 

2. Margins

측면 여백이 설정되면 해당 제약 조건(존재하는 경우)에 적용되어 대상과 측면 사이의 공간으로 여백을 적용합니다. 일반적인 레이아웃 여백 속성은 이 효과에 사용할 수 있습니다.

View A와 View B 사이의 여백

 

 

3. Bias

기본적으로 ConstraintLayout에서는 동일한 상태 제약을 지정합니다. 따라서 위젯이 수평과 수직방향 모두 중앙에 위치하게 됩니다.

따라서 상대 제약을 사용하면서 위젯의 위치를 추가로 조정할 수 있게 하기 위하여 ConstraintLayout에서는 Bias 기능을 구현했습니다.

Bias를 사용하면 하나의 제약에 지정된 비율을 기준으로 상대 제약을 갖도록 위젯을 위치시킬 수 있습니다.

중앙 배치된 View를 지정된 비율을 기준으로 위치하도록 설정

<androidx.constraintlayout.widget.ConstraintLayout ...>

             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

4. Circular Positioning

각도와 거리에서 다른 위젯 중심을 기준으로 위젯 중심을 제한할 수 있습니다. 이를 통해 위젯을 원에 배치할 수 있습니다.

• layout_constraintCircle : 다른 위젯 ID를 참조
• layout_constraintCircleRaius : 다른 위젯 중심까지의 거리
• layout_constraintCircleAngle : 위젯이 있어야 하는 각도(0.. 360)

<Button android:id="@+id/buttonA" 
		... 
		/>

<Button android:id="@+id/buttonB" 
		...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />

 

5. Ratio

위젯의 한 차원을 다른 차원의 비율로 정의할 수 있습니다. 그렇게 하려면 최소한 하나의 제한된 차원을 0dp로 설정하고 속성 layout_constraintDemensionRatio를 주어진 비율로 설정해야 합니다.

<Button 
	android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1:1" 
    />

버튼의 높이를 너비와 동일하게 설정합니다.

비율은 다음과 같이 표현할 수 있습니다.

• 너비와 높이 사이의 비율을 나타내는 부동 소수점 값
• "너비 : 높이" 형식의 비율

두 차원 모두 0dp로 설정된 경우 비율을 사용할 수도 있습니다. 이 경우 모든 제약 조건을 충족하고 지정된 종횡비를 유지하는 가장 큰 치수를 설정합니다. 다른 치수를 기반으로 한 특정 면을 제한하려면 w와 H를 추가하여 너비 또는 높이를 제한할 수 있습니다.

<Button android:layout_width="0dp"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="H,16:9"
                   app:layout_constraintBottom_toBottomOf="parent"
                   app:layout_constraintTop_toTopOf="parent"/>

 

6. Chain

체인은 단일 축(수평과 수직)에서 그룹과 같은 동작을 제공합니다. 다른 축은 독립적으로 구속될 수 있습니다.

체인은 첫 번째 요소(체인의 Head)에 설정된 속성에 의해 제어됩니다. Head는 수평 체인인 경우 맨 왼쪽 위젯이고 수직 체인은 맨 위 위젯입니다.

 

ChainStyle

• CHAIN_SPREAD : 요소가 펼쳐집니다. (default)
• WEIGHTED_CHAIN : CHAIN_SPREAD 모드에서 일부 위젯이 MATCH_CONSTRAINT 되면 사용 가능한 공간이 분할됩니다.
• CHAIN_SPREAD_INSIDE : 비슷하지만 체인의 끝점은 분산되지 않습니다.
• CHAIN_PACKED : 체인의 요소가 함께 포장됩니다. 그러면 자식의 수평 또는 수직 편향 속성이 패킹된 요소의 위치에 영향을 줍니다.

출처
ConstraintLayout
ConstraintLayout으로 반응형 UI 빌드

ConstraintLayout  |  Android Developers

반응형