ConstraintLayout 이해, 정복하기

목표

ConstraintLayout, Constraint, Chain, Constraint 삭제 방법, Baseline constraint 등에 대해서 알아봅시다!

 

ConstraintLayout 무엇?

• 유연한 방식으로 자식뷰의 위치, 크기를 조정할 수 있는 뷰 그룹이다.
• ConstraintLayout에 있는 각각의 뷰들의 위치는 적어도 하나의 수평과 수직 제약을 사용해 정해진다.
• 하나의 제약은 한 뷰를 다른 UI 요소, 부모 레이아웃, 보이지 않는 기준선에 연결하거나 나란히 한다.

 

ConstraintLayout을 사용함으로써 얻는 이점

1. 스크린 사이즈나 해상도가 다양한 기기에 반응해 레이아웃을 만들 수 있다.
2. LinearLayout보다 평평한 뷰 위계를(a flatter view hierarchy) 결과로 가질 수 있다
3. 안드로이드 스튜디오 내 The design editor and the view inspector가 제약을 구성하는데 도움을 준다.

 

Constraints는 무엇?

두 UI 요소간에 연결과 정렬하는 것이다.

각각의 constraint는 다른 뷰를 연결하거나 정렬한다.

 

 

Constraint bias는 무엇?

제약 바이어스는 수평 및 수직 축을 따라 뷰 요소를 배치합니다.

 

 

Chains?

• 체인은 양방향 제약으로 서로 연결되있는 뷰의 그룹을 말한다.
• 체인 내의 뷰들은 수직 또는 수평으로 분산될 수 있다.

A와 B가 양방향으로 연결되어 있는 모습

 

 

Head of the chain?

체인에 있는 첫 번째 뷰를 말한다.

뷰의 머리에 정해진 속성은 체인에 있는 모든 뷰들을 통제하고 위치를 조정하고 분산시킨다.

 

 

Chain styles은 무엇?

체인에 있는 뷰들이 정렬되거나 퍼져있는 방식을 정의한다.

체인 스타일 특성을 할당하거나, 가중치를 추가하거나 뷰에 치우침을 설정하여 체인을 스타일링할 수 있다.

 

세 가지 체인 스타일이 있습니다.

 

• Spread

기본 스타일입니다. 여백을 고려한 후 사용 가능한 공간에보기가 균등하게 분산됩니다.

 

• Spread inside

 첫 번째 보기와 마지막 보기는 체인의 양 끝에 있는 부모에 부착된다. 나머지 뷰들은 이용 가능한 공간에 골고루 펼쳐져 있습니다.

 

 

• Packed

뷰들은 마진이 계산된 후에 함께 포장된다. 그런 다음 체인의 헤드뷰의 편향을(bias) 변경하여 전체 체인의 위치를 조정할 수 있다.

 

 Packed chain

 

 Packed chain with bias

 

 

• Weighted

설정된 값에 따라 모든 공간을 채우도록 뷰의 크기가 조정됩니다.

in the layout_constraintHorizontal_weight or layout_constraintVertical_weight attributes.

 

예를 들어, A, B, C의 세 개의 뷰를 포함하는 체인을 상상해 보십시오. 뷰 A는 무게 1을 사용한다. 뷰 B와 C는 각각 2의 중량을 사용한다. 뷰 B와 C가 점유한 공간은 아래와 같이 뷰 A의 2배이다.

 

 

 

체인에 체인 스타일을 추가하기

XML 코드에 체인 스타일을 추가하기

// Horizontal spread chain
app:layout_constraintHorizontal_chainStyle="spread"

// Vertical spread inside chain
app:layout_constraintVertical_chainStyle="spread_inside"

// Horizontal packed chain
app:layout_constraintHorizontal_chainStyle="packed"

 

Baseline constraint

baseline의 사전적 의미 : 기준선 

• 한 뷰의 텍스트 기준선을 다른 뷰의 텍스트 기준선에 나란히 정렬하는 것이다.
• 특히 폰트 크기가 다른 뷰들을 나란히 놓는 것에 도움이 된다.

 

Design-time attributes

 

오직 레이아웃  디자인할 때만 사용되고 적용되는 속성들이다.

앱을 시작하면 Design-time attributes은 무시된다.

 

tools이라는 namespace를 사용한다.

 

 

제약조건 삭제하기

디자인 텝에서 뷰를 클릭한다.

1. 오른쪽 버튼을 클릭하면 뷰에 해당하는 전체 제약을 삭제할 수 있다.
2. CTRL을 누르면서 특정 제약 위에 마우스를 올리면 특정 제약만 삭제할 수 있다.

 

Baseline constraint and the bottom constraint 

둘은 상호 베타적이라 (mutually exclusive) 같은 뷰에 둘 다 만들면 안된다.,

만약 둘 다 속성에 넣는다면 layout editor는 bottom 제약을 지운다.

 

참고 : codelabs.developers.google.com/android-kotlin-fundamentals/

Android Kotlin Fundamentals Course