[Android] ConstraintLayout

ConstraintLayout을 도입한 이유는 무엇인가? 왜 사용하는가?

기존에서 많이 사용하는 RelativeLayout과 LinearLayout을 사용해서 뷰를 구성하면, 뷰를 중첩해서 구성하는 경우가 많았는데

이러한 중첩 구조는 성능을 좋지 않게 만들 뿐더러, 유지보수할 때에도 어려움이 많았음

ConstraintLayout은 뷰의 중첩 구조를 개선하여 단순하게 제약조건만으로 뷰를 구성할 수 있도록 함으로써 성능면에서 효율적임

 

ConstraintLayout 기능

상위 요소 포지셔닝

제약을 상위 요소의 왼쪽으로 지정하고 여백(margin)을 사용하여 가장자리로부터의 거리를 정의

위치 순서 지정

가로 또는 세로로 두 보기가 표시되는 순서를 정의

정렬

보기의 가장자리를 다른 보기의 가장자리에 맞게 정렬합니다.

아래 그림에서 B의 왼쪽은 A의 왼쪽에 맞게 정렬됩니다. 보기 중심을 정렬하려면 양쪽에 제약조건을 만듭니다.

제약조건에서 안쪽으로 보기를 드래그하여 기준에서 벗어나 정렬할 수 있습니다. 예를 들어 그림 10에서는 24dp 벗어나 정렬된 B를 보여줍니다. 이와 같은 오프셋은 제한된 보기의 여백으로 정의됩니다.

정렬할 보기를 모두 선택한 후 툴바에서 Align 을 클릭하여 정렬 유형을 선택할 수도 있습니다.

 

기준선 정렬

보기의 텍스트 기준선을 다른 보기의 텍스트 기준선에 맞춥니다.

기준선 제약조건을 만들려면 제한할 텍스트 보기를 마우스 오른쪽 버튼으로 클릭한 다음 Show Baseline을 클릭합니다. 그런 다음 텍스트 기준선을 클릭하고 선을 다른 기준선으로 드래그합니다.

안내선으로 제한

보기를 제한할 수 있는 세로 또는 가로 안내선을 추가할 수 있습니다. 안내선은 앱 사용자에게 표시되지 않습니다. 레이아웃의 가장자리를 기준으로 dp 단위 또는 백분율을 기반으로 레이아웃에 안내선을 배치할 수 있습니다.

안내선을 만들려면 툴바에서 Guidelines를 클릭한 다음 Add Vertical Guideline 또는 Add Horizontal Guideline을 클릭합니다.

점선을 드래그하여 위치를 변경하고 안내선 가장자리의 원을 클릭하여 측정 모드를 전환합니다.

경계선으로 제한

안내선과 비슷하게 경계선은 보기를 제한하는 데 사용할 수 있는 표시되지 않는 선입니다. 단, 경계선은 자체 위치를 정의하지 않으며, 경계선 내로 제한된 보기 위치를 기반으로 경계선 위치가 이동됩니다. 보기를 특정한 하나의 보기가 아니라 보기 집합으로 제한하려고 할 때 유용합니다.

예를 들어 그림 13에서는 보기 C가 경계선의 오른쪽으로 제한된다는 것을 보여줍니다. 경계는 보기 A와 보기 B의 '끝'(또는 왼쪽에서 오른쪽으로 배치되는 레이아웃에서 오른쪽)으로 설정됩니다. 따라서 보기 A 또는 보기 B의 오른쪽 중 맨 오른쪽에 있는 것에 따라 경계선이 이동합니다.

경계선을 만들려면 다음 단계를 따르세요.

1. 툴바에서 Guidelines 를 클릭한 후 Add Vertical Barrier 또는 Add Horizontal Barrier를 클릭합니다.
2. Component Tree 창에서 경계선 내의 원하는 보기를 선택하여 경계선 구성요소로 드래그합니다.
3. Component Tree에서 경계선을 선택하고 Attributes 창을 연 후 barrierDirection을 설정합니다.

이제 다른 보기에서 경계선으로의 제약조건을 만들 수 있습니다.

경계선 내부의 보기를 경계선으로 제한할 수도 있습니다. 그러면 어떤 보기가 가장 길거나 높은지 몰라도 경계선에 있는 모든 보기가 항상 서로에 맞게 배열됩니다.

경계선의 '최소' 위치를 보장하도록 경계선 안에 안내선도 포함할 수 있습니다.

 

Chains

체인은 1개 이상의 뷰들을 하나의 그룹처럼 행동할 수 있게 도와주는 역할

체인은 Chain의 Head에 의해 속성이 결정됨 

 

Chain Style

• CHAIN_SPREAD -- 일정 비율로 퍼져있는 형태
• Weighted chain --  MATCH_CONSTRAINT로 되어있을 경우 일정 비율로 그룹의 뷰들이 그 공간을 채움
• CHAIN_SPREAD_INSIDE -- 안에서 일정 비율로 떨어짐
• CHAIN_PACKED -- 그룹의 뷰끼리 서로 모여다님

 

 

Reference

https://abandonia.tistory.com/1

[번역문] ConstraintLayout의 성능 이점에 대한 이해

https://developer.android.com/training/constraint-layout?hl=ko#add-a-constraint 

 

안드로이드 ConstraintLayout 개념과 사용법 정복하기 - 개발자 직강

https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout