피그마 강의(5) 프레임과 컨스트레인트

컨스트레인트: 오토레이아웃을 오토레이아웃 답게 만들어주는 기능

 

오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있다.

- 오토레이아웃이 적용된 프레임 내의 자식 개체들은 추가가 되더라도 오토레이아웃에 따라 자동적으로 정렬이 된다. 

(수직정렬...수평정렬... 간격이 얼마 떨어진 채로 유지... 등)

- 하지만 반응형 웹사이트나 앱과 같이 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어줘야 한다. 

- 디바이스의 크기가 커지면 개체의 크기도 커져야 하는데, 이 때 컨스트레인트가 없으면 다 깨진다. 

 

• 컨스트레인트는 오토레이아웃 '안에' 있는 개체들이 움직이는 방식을 제한한다.
• 더 정확하게는, **부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?**를 정할 수 있다.

위 이미지에서 파란색 점선은, Parent Container에 대응하는 자식 콘테이너의 Constraint 값이다. 

현재는 Left & Top으로 설정되어 있다. 

 

Q. 현재는 Parent에 오토레이아웃을 적용하지 않은 상황인데, Constraint는 그냥 적용되는 것인가? 

- 기능의 주 사용처를 위해 설명했을 뿐, 오토레이아웃을 적용해야만 Cons값이 적용되는 것은 아닌 듯 하다. 

 

현재 Cons는 left와 top으로 설정이 되어 있다. 따라서, 부모 프레임의 좌상단을 기준으로 늘리면 해당 Cons값을 유지한 채 따라가지만, 다른 곳을 기준으로 프레임을 늘리거나 줄이면 전혀 영향을 받지 않는 모습을 확인할 수 있다. 

 

alignment에서 우측 정렬을 하자 Constraint도 자연히 left에서 right로 바꼈다. 

이를 통해, alignment는 단순히 어느 방향으로 정렬할지만을 설정하는 것이 아니라, 어느 방향을 기준으로 고정할 것이냐, 도 설정하는 기능임을 알 수 있다. 

 

4. Constraints의 속성 5가지 (이 부분은 내가 개인적으로 연구한 부분이라 정확하지 않을 수 있다.)

 

 

좌측 사진은 좌우 관련, 우측 사진은 상하 관련 Constraints 설정 방법이다. 

Left, Right, L+R / Top, Bottom, T+B 까지는 모두가 이해할 것이라 생각한다. 

각각 닻을 저 방향으로 놓는다는 말이다. 

닻 길이를 유지하는 원리이기 때문에 L+R, T+B으로 설정을 하면 좀 더 객체가 잘 늘어나는 경험을 할 수 있을 것이다.

Center은 무엇이냐?

해당 프레임 내에서 중심비율이 일정하도록 하는 설정인 것으로 유추했다.

좌 간격과 우 간격의 비율이 일정하도록 비율이 조정된다.

 

그렇다면 Scale은? 

비율 맞춰서 늘어나는 것이다. 

가로 scale만 맞추면 가로 비율만, 세로 scale만 맞추면 세로 비율만 증가비율에 따라 같이 증가한다. 

 

 

컨스트레인트 어렵다~ 휴~