제약 레이아웃이란?
안드로이드 스튜디오에서는 기본적인 레이아웃을
제약 레이아웃(Constraint Layout)으로 자동 설정합니다.
제약 레이아웃 이전에 사용하던 상대 레이아웃과 비슷한 점이 많으면서도 제약 레이아웃의 장점이 더 많습니다.
제약 레이아웃의 가장 큰 특징은 뷰의 위치를 결정할 때,
제약조건(Constaint)을 사용한다는 것 입니다.
제약 조건이란?
뷰가 레이아웃 안의 다른 요소와 어떻게 연결되는지 알려주는 것으로, 뷰의 연결점과, 대상을 연결합니다.
이름 그대로 제약 조건을 활용하는 레이아웃 입니다.
Swift의 오토 레이아웃과 유사합니다.
위의 사진을 보시면,
버튼 왼쪽 동그라미가 연결선으로 부모 레이아웃의 왼쪽 벽면과 연결이 되어 있습니다.
이러한 상태를 부모 레이아웃이 타깃이 되어,
연결점과 해당 타깃이(부모 레이아웃) 연결 되었다고 보면 되겠습니다.
버튼이 레이아웃 안에서 어디에 위치하고 있는지 결정하려면 적어도,
왼쪽과 위쪽에 연결되어 있어야 합니다.
따라서 버튼의 위쪽 연결점을 부모 레이아웃의 위쪽 벽면까지 연결하는 것을
진행하면 버튼의 제약 조건이 완성되게 됩니다.
제약 조건이 완성되면 위의 사진처럼 속성 창에 제약 조건이 표시 됩니다.
72라고 적혀 있는 숫자를 Margin 이라고 하고 연결점과 타킷의 거리를 나타냅니다.
타깃이 될 수 있는것들
- 같은 부모 레이아웃 안에 들어 있는 다른 뷰의 연결점
- 부모 레이아웃의 연결점
- 가이드 라인
연결점이 될 수 있는것들
- 위쪽(Top), 아래쪽(Bottom), 왼쪽(Left), 오른쪽(Right)
- 가로축의 가운데 (Center X), 세로축의 가운데 (Center Y)
- 베이스라인(Baseline) -> 텍스트를 보여주는 뷰의 경우에만 적용
Button 두개일때 제약 조건 예시
버튼을 새로 추가해서 기존 버튼의 왼쪽에 배치 하였는데요,
새로 배치한 버튼의 왼쪽 연결점을 기존 버튼과 연결하면서
기존 버튼이 타킷이 되면서 새로운 연결선이 만들어 지게 됩니다.
여기서 마진을 적절하게 조절하면 두 개의 버튼이 적절한 위치에 배치 되도록 만들 수 있습니다.
화면 가운데에 뷰 배치하기
왼쪽 팔레트에서 버튼을 드래그 앤 드롭으로 화면 정 가운데에 배치하게 되면,
위 사진과 같이 자동으로 왼쪽과 오른쪽 모두 자동으로 연결선이 만들어지게 됩니다.
자석 모양이 비활성화가 되어 있다면 직접 연결선을 연결해 주어야 합니다.
위의 사진에서 왼쪽 빨간 박스는 세로 방향 바이어스 (Vertical Bias)이고,
아래쪽 끝에 있는 줄이 가로 방향 (Horizontal Bias) 입니다.
바이어스는 한쪽으로 얼마나 치우쳐 있는지를 나타내는것 입니다.
보통 0부터 1사이의 값이고 75% 지점은 XML에서 0.75로 설정할 수 있는데,
디자인 화면에서는 % 단위로 표시 됩니다.
제약 조건 표시 그림의 선 모양
아래의 그림은 버튼의 크기를 바꾸어 주었는데,
잘 보시면 옆에 제약 설정 창에서의 연결선 모양이 바뀌었습니다.
이렇게 width,height 값을 무엇을 주느냐에 따라 모양이 바뀌게 됩니다.
부모 여유 공간 채우기
- 연결선이 구불구불한 선으로 표시
- Layout width 값은 Match constraint나 0dp로 표시
뷰의 내용물 채우기
- 연결선이 »로 표시
- Layout width 값이 Wrap content로 설정됨
고정 크기
- 연결선이 직선으로 표시
- Layout width 값과 Layout height 값은 지정한 값으로 설정됨