ConstraintLayout 동작 원리
- constraintLayout을 완전히 이해하기 위해서는 다음의 개념을 익혀야 한다.
- constraint: 한 컴포저블의 정렬과 위치를 조정함에 있어 다른 컴포저블들, ConstraintLayout 부모를 포함한 관계, 그리고 가이드라인과 배리어라 불리는 특별한 요소들을 기준으로 상대적으로 지정한다.
- margin: 고정된 거리를 지정하는 제약의 한 형태.
- opposing constraint(반대 제약): 한 컴포넌트가 왼쪽과 오른쪽 가장자리에 모두 제약을 갖고 있을 때 수평 반대 제약을 가진 것으로 간주한다.
- 예를 들어, 버튼을 위쪽 가장자리에서 20dp라는 거리로 고정하는 대신, 위쪽 가장자리로부터 30% 떨어진 지점에 배치되는 것으로 정의한다. 기기 방향이나 화면 크기에 관계없이 Button은 언제나 부모 레이아웃으로부터 상대적으로 같은 위치에 배치된다.
- constraint bias(제약 편향): 기본적으로 반대 제약이 동일하면 해당 위젯은 축을 따라 중앙에 배치된다. 제약 편향을 이용하면 축을 따라 컴포저블의 위치를 지정함으로써 하나의 제약 조건에 대해 지정된 백분율만큼 치우치도록 할 수 있다.
- chain: 하나의 그룹으로 정의된 2개 이상의 컴포저블을 포함하는 레이아웃의 동작 방법을 제공한다. 수직축 및 수평축 기준으로 선언할 수 있으며, 체인 안에 있는 컴포넌트들의 간격과 크기를 정의한다.
- 체인 스타일
- Spread Chain: 체인에 포함된 컴포저블들은 이용할 수 있는 공간에 공평하게 분배된다.
- Spread inside chain: 체인에 포함된 컴포저블들은 체인 헤드와 체인의 마지막 위젯 사이에서 공평하게 분배된다. 체인 헤드와 마지막 컴포저블은 공간 배분에 포함되지 않는다.
- Weighted Chain: 체인에 포함된 각 컴포저블들이 차지하는 공간은 weighting 프로퍼티를 이용해 정의된다.
- Packed Chain: 체인을 구성하는 컴포저블들은 사이에 여유 공간 없이 위치한다. 편향을 이용해 부모 컨테이너 안에서 체인의 수직 또는 수평 위치를 제어할 수 있다.
- 체인 스타일
크기 설정하기
- ConstraintLayout은 개별 컴포넌트의 크기 동작을 설정할 수 있도록 5개의 옵션을 제공한다. 이 설정은 폭과 높이에 독립적으로 적용할 수 있다.
- Dimension.preferredWrapContent: 컴포저블의 크기는 이전 제약에 따라 해당 컴포저블이 포함하는 콘텐츠에 따라 결정된다.
- Dimension.wrapContent: 컴포저블의 크기는 이전 제약에 관계없이 해당 컴포저블이 포함하는 콘텐츠에 따라 결정된다.
- Dimension.fillToConstraints: 컴포저블은 이전 제약에 따라 할당된 공간을 가득 채운다.
- Dimension.preferredValue: 컴포저블의 크기는 이전 제약에 따라 정의된 크기로 고정된다.
- Dimension.value: 컴포저블의 크기는 이전 제약과 관계없이 지정된 크기로 고정된다.
가이드라인 헬퍼
배리어 핼퍼
- 배리어는 가이드라인과 유사하지만 레이아웃 안에서 고정된 위치에 남아 있는 가이드라인과 달리, 배리어의 위치는 유동적이다.
- 예를 들어, 다음 그림을 보자.
- item3는 fillToConstraints 모드로 설정되어 있고 왼쪽 가장자리가 item1의 오른쪽 가장자리에 연결되어 있다.
- 이때 item1의 폭을 증가시키면 item3의 폭이 줄어들게 되어 문제가 발생하지 않는다.
- 하지만 item2의 폭을 증가시킬 경우 item3이 item1의 제약만 받기 때문에 item2와 item3가 겹치게 된다.
- 이 문제를 해결하기 위해 수직 배리어를 추가하고 item1, item2를 배리어의 참조 컴포넌트로 할당해서 배리어의 위치를 제어하게 하는 것이다.
- item3의 왼쪽 가장자리는 배리어에 의해 제약을 받게 되고, 앞선 문제는 발생하지 않게 된다.
- 한 배리어에 연결할 수 있는 레퍼런스 뷰의 수나 제약 컴포넌트의 수에는 제한이 없다.
안녕하세요.