[안드로이드] ConstraintLayout 제약유형별 속성 및 사용방법

 

안드로이드 - ConstraintLayout 제약유형별 속성 및 사용방법

 

 

   목차

1. ConstraintLayout 이란?
2. ConstraintLayout 제약 유형
3. ConstraintLayout 제약 유형별 속성과 사용방법
   
   1. Relative positioning과 관련된 속성 (상대적 위치지정)
   2. Margins와 관련된 속성 (여백)
   3. Centering positioning과 관련된 속성 (중앙 위치지정)
   4. Circular positioning과 관련된 속성 (원형 위치지정)
   5. Visibility behavior와 관련된 속성 (가시성 동작)
   6. Dimension constraints와 관련된 속성 (크기 제약)
   7. Chains와 관련된 속성 (연결)
   8. Virtual Helpers objects 종류 (가상의 도움 객체들)
   9. Optimizer와 관련된 속성 (최적화)

 

 

 

1. ConstraintLayout 이란?

 

ConstraintLayout은 부모 뷰그룹 안의 다른 요소들과의 상대적인 제약조건을 설정함으로써 화면에 배치되도록 하는 레이아웃을 말합니다. 현재 안드로이드 프로젝트를 생성했을 때 기본 레이아웃으로 사용되고 있으므로 알아둘 필요가 있습니다. 

 

 

 

2. ConstraintLayout 제약 유형

 

ConstraintLayout에서 사용될 수 있는 제약조건의 유형은 크게 9가지로 구분할 수 있습니다. 

1. Relative positioning (상대적 위치지정) : 다른 요소와 수평, 수직방향의 상대적 배치를 위한 속성
2. Margins (여백) : 여백 설정을 위한 속성
3. Centering positioning (중앙 위치지정) :  중앙 배치를 위한 속성
4. Circular positioning (원형 위치지정) : 다른 요소와 원 형태의 상대적 배치를 위한 속성
5. Visibility behavior (가시성 동작) : visibility 속성에 따른 동작 속성
6. Dimension constraints (크기 제약) : 뷰의 크기를 위한 속성
7. Chains (연결) : 수평 또는 수직방향으로 연결된 뷰를 위한 속성
8. Virtual Helpers objects (가상의 도움 객체들) : 뷰의 배치에 도움을 줄 수 있는 객체 속성
9. Optimizer (최적화) : 제약조건 최적화 속성

 

 

 

3. ConstraintLayout 제약 유형별 속성과 사용방법

 

1) Relative positioning과 관련된 속성 (상대적 위치지정)

 

ConstraintLayout에서 Relative positioning(상대적 위치지정)은 뷰를 배치하기 위해 기본적으로 사용되는 개념으로 다른 요소들과의 수평, 수직방향으로 일치시키기 위해 사용되는 속성입니다.

1. layout_constraintLeft_toLeftOf : 해당 뷰의 왼쪽을 지정된 요소의 왼쪽과 맞춥니다.
2. layout_constraintLeft_toRightOf : 해당 뷰의 왼쪽을 지정된 요소의 오른쪽과 맞춥니다.
3. layout_constraintRight_toLeftOf : 해당 뷰의 오른쪽을 지정된 요소의 왼쪽과 맞춥니다.
4. layout_constraintRight_toRightOf : 해당 뷰의 오른쪽을 지정된 요소의 오른쪽과 맞춥니다.
5. layout_constraintTop_toTopOf : 해당 뷰의 위쪽을 지정된 요소의 위쪽과 맞춥니다.
6. layout_constraintTop_toBottomOf : 해당 뷰의 위쪽을 지정된 요소의 아래쪽과 맞춥니다.
7. layout_constraintBottom_toTopOf : 해당 뷰의 아래쪽을 지정된 요소의 위쪽과 맞춥니다.
8. layout_constraintBottom_toBottomOf : 해당 뷰의 아랫쪽을 지정된 요소의 아래쪽과 맞춥니다.
9. layout_constraintStart_toStartOf : 해당 뷰의 시작 위치를 지정된 요소의 시작위치와 맞춥니다.
10. layout_constraintStart_toEndOf : 해당 뷰의 시작위치를 지정된 요소의 끝 위치와 맞춥니다.
11. layout_constraintEnd_toStartOf : 해당 뷰의 끝 위치를 지정된 요소의 시작위치와 맞춥니다.
12. layout_constraintEnd_toEndOf : 해당 뷰의 끝위치를 지정된 요소의 끝 위치와 맞춥니다.
13. layout_constraintBaseline_toBaselineOf : 해당 뷰와 지정된 요소의 문자열 기준선(Baseline)을 맞춥니다. 

 

ConstraintLayout - Relative Positioning (상대적 위치지정) - layout_constraintXXX_XXX 사용예시

 

 

2) Margins와 관련된 속성 (여백)

 

ConstraintLayout에서는 기본적인 margin 이외에 화면 배치를 위해 참조하던 요소가 화면에서 사라졌을 때(View.GONE)의 상황을 고려한 margin을 지정해 줄 수 있습니다. 

1. layout_goneMarginLeft : 해당 뷰의 왼쪽에 지정된 요소의 visibility가 gone상태일 때의 여백을 지정합니다. 
2. layout_goneMarginRight : 해당 뷰의 오른쪽에 지정된 요소의 visibility가 gone상태일때의 여백을 지정합니다. 
3. layout_goneMarginTop : 해당 뷰의 위쪽에 지정된 요소의 visibility가 gone상태일때의 여백을 지정합니다. 
4. layout_goneMarginBottom : 해당 뷰의 아래쪽에 지정된 요소의 visibility가 gone상태일 때의 여백을 지정합니다. 
5. layout_goneMarginStart : 해당 뷰의 시작 위치에 지정된 요소의 visibility가 gone상태일 때의 여백을 지정합니다. 
6. layout_goneMarginEnd : 해당 뷰의 끝 위치에 지정된 요소의 visibility가 gone상태일 때의 여백을 지정합니다. 

 

ConstraintLayout - Margins(여백) - layout_goneMarginXXX 사용예시

 

 

3) Centering positioning과 관련된 속성 (중앙 위치지정)

 

중앙 정렬이 되도록 하기 위해서는 양쪽 방향으로 제약을 동시에 걸어주면 됩니다.

예를들어 수평방향으로의 가운데 정렬을 위해서는 아래 그림과 같이 왼쪽과 오른쪽에 제약을 동시에 걸어주면 됩니다. 마찬가지로 수직방향으로의 가운데 정렬을 위해서는 위쪽과 아래쪽에 제약을 걸어주면 됩니다. 

이때, bias는 한쪽 방향으로 치우친 정도를 나타내는 값으로 0~1의 값을 가지며 default 값인 0.5일 경우 중심에 위치하게 됩니다. 아래 예제에서 수평 bias가 0.25일 경우에는 수평으로 25%의 지점에 위치하게 됩니다. 

1. layout_constraintHorizontal_bias : 수평방향으로의 치우침 강도 조절
2. layout_constraintVertical_bias : 수직방향으로의 치우침 강도 조절

 

ConstrainLayout - 중앙정렬 및 bias 예시

 

 

4) Circular positioning과 관련된 속성 (원형 위치지정)

 

뷰를 화면에 나타낼 때 다른 요소와 수평 또는 수직 형태의 상대적 위치 지정뿐 아니라 원형 형태로의 상대적 위치 지정을 할 수 있습니다. 이를 위해서는 다른 요소와 떨어진 각도와 거리 요소를 필요로 하게 됩니다. 

1. layout_constraintCircle : 기준이 될 다른 위젯의 아이디 지정
2. layout_constraintCircleRadius : 기준이 되는 다른 위젯과의 중심점간 거리
3. layout_constraintCircleAngle : 기준이 되는 다른 위젯과의 각도

 

ConstraintLayout - 원형 위치지정 예시

 

 

5) Visibility behavior와 관련된 속성 (가시성 동작)

 

visibility 속성은 다른 레이아웃과 동일하게 사용됩니다. 

아래 그림에서는 다른 뷰의 기준이 되는 뷰의 visibility 속성 값(visible/invisible/gone)에 따라서 이를 기준점으로 삼던 뷰들의 화면 배치는 어떻게 되는지에 대해서 설명하고 있습니다.

또한 위에서 살펴본 Margins와 관련된 속성을 참고하시면 기준 뷰가 사라진(View.GONE) 상태에서의 마진 값을 따로 정의하실 수도 있습니다. 

 

ConstraintLayout - Visibility 속성에 따른 동작 예시

 

반응형

 

6) Dimension constraints와 관련된 속성 (크기 제약)

 

- 뷰의 width와 height는 다음 세 가지 방법으로 값을 정할 수 있습니다. 

1. (방법1) 직접 크기 지정 : 직접 width와 height 값을 지정해 줍니다. (ex, 100dp)
2. (방법2) wrap_content : 뷰에 포함된 내용의 크기에 따라 뷰의 크기가 자동으로 결정됩니다. 
3. (방법3) match_constraint : 0dp를 입력하면 match_constraint로 제약조건에 부합되는 뷰의 크기를 가지게 됩니다. (ConstraintLayout에 포함된 뷰에서는 match_parent 대신 match_constraint를 사용하도록 권장하고 있습니다.)

 

ConstraintLayout - 뷰의크기설정 - 직접지정(좌), wrap_content(중앙), match_constraint(우)

 

- match_constraint(=0dp)를 사용했을 경우, width와 height의 최소, 최대값을 지정할 수 있습니다.

1. layout_constraintWidth_min : 넓이의 최소값 지정 (match_constraint 사용시)
2. layout_constraintHeight_min : 높이의 최소값 지정 (match_constraint 사용시)
3. layout_constraintWidth_max : 넓이의 최대값 지정 (match_constraint 사용시)
4. layout_constraintHeight_max : 높이의 최대값 지정 (match_constraint 사용시)

 

- match_constraint(=0dp)를 사용했을 경우, 부모 뷰그룹의 크기에 비례하도록 설정할 수 있습니다. 

1. layout_constraintWidth_percent : 해당 뷰의 넓이를 부모 뷰그룹의 넓이와 비례하도록 설정함 (0~1사이의 값)
2. layout_constraintHeight_percent : 해당 뷰의 높이를 부모 뷰그룹의 높이와 비례하도록 설정함 (0~1사이의 값)
3. layout_constraintWidth_default = "percent" : 뷰의 넓이를 percent로 지정하도록 함.
4. layout_constraintHeight_default = "percent" : 뷰의 높이를 percent로 지정하도록 함.

 

ConstraintLayout - percent로 뷰 크기 설정하기

 

- wrap_content를 사용했을 경우, width와 height의 최소, 최대값을 지정할 수 있습니다. 

1. minWidth : 넓이의 최소값 지정 (wrap_content 사용시)
2. minHeight : 높이의 최소값 지정 (wrap_content 사용시)
3. maxWidth : 넓이의 최대값 지정 (wrap_content 사용시)
4. maxHeight : 높이의 최대값 지정 (wrap_content 사용시)

 

- wrap_content를 사용했을 경우, 뷰에서 텍스트의 길이가 길어져 width가 늘어날 경우 제약조건까지만 늘어나도록 지정할 수 있습니다. 아래 그림은 텍스트의 내용이 긴 경우 layout_constrainedWidth 속성을 적용한 예시입니다. 

1. layout_constrainedWidth : 넓이의 한계가 제약조건의 영향을 받습니다. 
2. layout_constrainedHeight : 높이의 한계가 제약조건의 영향을 받습니다. 

 

ConstraintLayout - layout_constrainedWidth 사용예시

 

- 뷰의 width와 height의 비율(Ratio)로 크기를 나타낼 수도 있습니다.

비율로 크기를 나타내기 위해서는 width 또는 height 중 최소 하나는 match_constraint(=0dp)가 적용되어 있어야 합니다. 둘 다 match_constraint(=0dp)인 경우에는 제약조건을 만족하면서 비율을 유지하는 가장 큰 크기로 나타나게 됩니다. 이때 width 또는 height 중 한쪽을 기준으로 크기를 정하고 다른쪽을 제한하려면 제한하려는 쪽의 문자를 적어주면 됩니다. - W(넓이 제한), H(높이제한)

1. layout_constraintDimensionRatio : match_constraint(=0dp)에서 width:height의 비율로 뷰의 크기를 나타냅니다. 

 

ConstraintLayout - width:length 비율로 뷰 크기 지정하기

 

 

7) Chains와 관련된 속성 (연결)

 

- Chains은 수평 또는 수직 방향으로 연결된 뷰를 그룹처럼 다룰 수 있습니다. 뷰들간에 양방향으로 연결되었을 때 체인으로 인식되며 체인은 첫번째 요소에 설정된 속성에 의해 제어됩니다. 체인의 연결 형태는 spread, spread_inside, packed 3가지가 있으며 default는 spread 입니다.

1. layout_constraintHorizontal_chainStyle : 수평방향의 체인 연결 형태를 지정합니다. (spead, spread_inside, packed)
2. layout_constraintVertical_chainStyle : 수평방향의 체인 연결 형태를 지정합니다. (spead, spread_inside, packed)

 

ConstraintLayout - Chain(체인) 생성방법과 종류

 

- 체인으로 연결된 뷰중에 match_constraint(=0dp)가 적용된 뷰가 있으면 해당 뷰가 여백 공간을 모두 차지하게 됩니다. 두개 이상의 뷰가 match_constraint(=0dp)인 경우에는 weight를 이용하여 여백을 차지하는 비율을 지정할 수 있습니다. 

1. layout_constraintHorizontal_weight : match_constraint(=0dp)를 사용하는 요소중 수평방향 여백을 차지하는 비율
2. layout_constraintVertical_weight : match_constraint(=0dp)를 사용하는 요소중 수직방향 여백을 차지하는 비율

 

ConstraintLayout - Chain(체인)에서 weight로 여백 채우기

 

 

8) Virtual Helpers objects 종류 (가상의 도움 객체들)

 

ConstraintLayout에서는 화면에 나타나지는 않지만 화면 구성을 편리하게 도와주는 여러 객체들이 있습니다. 이러한 객체로는 Guideline, Barrier, Group, Placeholder가 있으며 각 객체의 속성 및 사용방법은 아래 링크를 참고하시기 바랍니다. 

1. Guideline : 뷰의 위치를 지정하는데 도움을 주는 기준선
2. Barrier : 장벽처럼 등록된 뷰들의 최외곽 경계를 나타내는 가상의 동적 기준선
3. Group : 참조된 여러뷰들의 visibility를 한번에 제어할 수 있도록 그룹화한 객체
4. Placeholder : 이미 존재하고 있는 뷰의 위치를 이동시켜 재배치 할 수 있는 객체

 

2022.08.25 - [IT 개발/Android] - [안드로이드] Virtual Helpers objects (Guideline, Barrier, Group, Placeholder)

[안드로이드] Virtual Helpers objects (Guideline, Barrier, Group, Placeholder)

 

 

9) Optimizer와 관련된 속성 (최적화)

 

ConstraintLayout 요소에 layout_optimizationLevel 태그를 추가함으로 최적화 수준을 선택할 수 있습니다. 

1. layout_optimizationLevel="none" : 최적화가 적용되지 않음
2. layout_optimizationLevel="standard" : direct와 barrier 제약 최적화 (default)
3. layout_optimizationLevel="direct" : direct 제약 최적화
4. layout_optimizationLevel="barrier" : barrier 제약 최적화
5. layout_optimizationLevel="chain" : chain 제약 최적화 (실험중)
6. layout_optimizationLevel="dimensions" : dimensions 측정 최적화 (실험중)