Constraint란?
Constraint (컨스트레인트)는 제약, 제한이라는 뜻을 가지고 있는데 Auto Layout 안에 있는 개체들이 움직이는 모양을 제한한다는 뜻이다.
즉, 부모 컨테이너의 크기가 변할 때 자식 컨테이너에게 너는 어디를 기준으로 변할지를 정해주는 것이다.
자식 컨테이너와 부모 컨테이너를 각각 생성한 후 자식 컨테이너를 클릭한 채로 드래그를 해서 부모 컨테이너로 옮겨주면 상속이 된다.
부모 컨테이너와 자식 컨테이너 사이에 파란 점선이 보이는데 이게 바로 둘이 가진 제약 즉, constraint인 것이다.
부모 사이즈가 변할 때 자식 사이즈는 어떻게 변할 것인가? 자식 컨테이너가 부모 컨테이너에 고정되어 움직여지는 핀의 위치라 생각하면 편할 듯?
현재 보여지는 자식 컨테이너는 부모 컨테이너의 사이즈가 변할때 왼쪽과 위쪽을 기준으로 고정되어 움직인다 즉 Anchor인 것이다!
오른쪽 디자인 패널의 constraints 영역을 보면 이렇게 직관적으로 왼쪽과 상단에 제약이 생성되어 있음을 확인할 수 있다.
이렇게 제약이 설정된 상태에서 부모 컨테이너를 늘였다 줄였다 해보았다.
Constraints를 설정한 위와 왼쪽의 간격은 변하지 않고 고정된 상태에서 부모 컨테이너의 크기에 따라 위치를 계속해서 잡아가고 있는 것을 확인할 수 있다.
이때 자식 컨테이너의 정렬을 오른쪽으로 바꾸면 어떻게 될까?
잘 살펴보면 캔버스에서 상단 제약은 그대로 유지된 채 오른쪽 끝에 붙게 되고 Constraints는 left/top에서 right/top으로 변하게 되었다.
즉, 정렬을 사용하는 것은 부모 컨테이너 안에서 어떻게 정렬하는지를 정하는 것 뿐만 아니라 어딜 기준으로 고정이 될지도 정해준다.
좌우 양쪽 다 제약 설정 시에는 어떻게 될까?
양쪽의 제약을 모두 받아야 하므로 안쪽에 있는 자식 컨테이너가 그에 맞춰서 리사이징이 진행되는 것을 알 수가 있다.
당연히 위, 아래에 대한 제약도 동시에 줄 수 있다.
상하좌우에 모두 Constraints를 적용하면 어떻게 될까?
제약을 둔 위치에 맞춰서 자식 컨테이너의 크기가 리사이징 된다. 이렇게 된다면 반응형 디자인에 잘 적용해볼 수 있지 않을까 싶다.
리사이징
부모 컨테이너를 오토레이아웃화 시킨 후 디자인 패널의 프레임을 보면 리사이징 종류를 확인할 수 있는데 이떄 피그마에서 리사이징은 세 가지 값이 있으며, 가로 길이와 세로 길이에 각각 적용할 수가 있다.
| 값 | 설명 | 유형 |
|---|---|---|
| Fixed | 고정값 | 공통 |
| Hug | 자식 컨테이너의 크기에 맞춰 조정 | 부모만 쓸 수 있음 |
| Fill | 부모 컨테이너의 크기에 맞춰 조정 | 자식만 쓸 수 있음 |
자식이 고정값이라면 부모는 그걸 감쌀 수 있어야 하고, 자식이 부모에 맞게 움직이려면 부모가 고정값으로 멈춰있어야 한다.
즉, 부모가 자식을 감싸기로 했다면 자식은 고정되어있어야 한다.
부모가 Hug, 자식이 Fixed인 상태
부모컨테이너는 자식을 감싸기로 되어있기 때문에 자식의 사이즈가 변하면 부모는 그걸 따라갈 수밖에 없다
부모가 Fixed, 자식이 Fill인 상태
분명 부모에 Hug를 그대로 두고 기존에 자식에 Fixed를 준 것을 Fill로 바꿨을 뿐인데 이에 맞춰서 자동으로 부모 컨테이너의 프레임 가로 속성이 변경되었다는 안내가 뜨면서...
부모 컨테이너의 프레임 가로 속성이 Fixed로 바뀐 것을 확인할 수 있다!!
(부모 컨테이너의 크기에 따라 사이즈가 달라지는 자식 컨테이너의 모습!)
정리하자면!
자식이 고정값(fixed)이라면 부모는 그걸 감싸고(hug) 자식이 부모에 맞게 늘어나야 한다면(fill) 그 부모는 고정값을 가져야(fixed) 한계를 설정할 수 있다.
반대로, 부모가 자식을 감싸기로 했다면(hug) 자식은 사이즈가 고정되어 감싸질 수 있도록 설정이 필요하다.(fixed)
그리고 부모와 자식 둘 다 고정일 수도 있다!
디자인 결과물은 같지만...?
보이는 디자인 결과물에는 차이가 없을 수 있지만, 부모와 자식의 리사이징 관계에 따라 실제로 변하는 부분들이 달라지기 때문에 오토레이아웃 컨테이너를 여러개 쌓기 시작하면 리사이징을 꼼꼼하게 신경써야 동적으로 변하는 레이아웃을 제대로 설계할 수 있다!
