[240328] Toss 오토레이아웃 따라하기 | TIL

학습 목표

• 스탠다드 반에서 진행한 Auto Layout을 똑같이 따라서 만들어보자.

최종 목표

해당 오토 레이아웃을 최대한 따라해보기

기초

내 쇼핑 주문배송 고양이 만나러 가기

일단 기본적인 스토리보드상 구조는 이러하다.

이제 구성을 보자.

뷰 안에 스택뷰를 넣었다.

이 때 스택뷰도 오토레이아웃을 당연히 잡아야하는데 view의 크기와 동일.

이미지를 1:1 비율로 설정하는 방법

이걸 켜고 1:1로 비율을 별도 설정하면 된다.

스택 뷰를 동일한 사이즈로 채우는 방법

이렇게 설정된건데 만약 버튼 추가를 한다면 레이아웃을 다 바꿀 것인가? NO.

stack view를 클릭하고 Fill Equally를 당겨놓으면 항상 같은 크기로 유지된다.

부모 스택뷰의 크기를 내부 구성 버튼이 정하게 하는 방법

스택뷰의 height를 지정하지 않음에도 정상적으로 동작한다. 왜?

버튼에서 값을 지정하고 있기 때문.

그럼 이렇게 값을 변경해서 button의 top bottom을 50으로 주더라도 깨지지 않는다.

비율이 다르게 버튼 설정하기

2:1 비율의 버튼을 제작해보자

이렇게 control을 누른 채 옆 버튼으로 끌고가서 equal width를 설정해준다

이후 Multiplier에서 얼만큼의 배율을 가질건지 설정한다.

오늘의 마무리

컬러도 안입혔고 레이블도 전부 넣지 않았지만 기본적인 매커니즘의 이해에 박수를 보낸다.

이미지가 없어서 완성은 못했지만 기본적인 매커니즘의 이해에 중점을 둔 공부였으니 만족한다.