너무너무 오랜만에 쓰는 TIL
그동안 새로 알게 된 개념은 많았지만, 새로 알게 된 개념들은 검색하기만 하면 너무 많은 블로그에 작성되어 있었다. 그래서 다른 블로그와 거의 동일한 내용으로 다시 적는 건 의미가 없다는 생각에 잘 쓰지 않았다.

오늘 들고 온 내용은 검색은 해보지 않았지만 내가 나중에 까먹을 것 같아 적는 TIL!
스크롤뷰의 레이아웃을 잡는 법이다. 이제까지 스크롤은 테이블뷰를 사용하면 자동으로 따라오는 기능이었기에 레이아웃을 잡아본 적이 없다. 사용도 처음 해본다.

ScrollView AutoLayout

1. ScrollView 추가, Container 역할로 사용할 UIView 추가

• 스크롤이 되어야 하는 영역에 들어가는 컴포넌트들을 UIView에 담는다.
  • 나는 product image, price, description, name 등을 담았다.

나는 상단에 위치한 위시리스트 보기 버튼과 아래의 위시리스트 추가, 다른 상품 보기 버튼을 제외한 영역을 스크롤하고 싶었다.

그래서 버튼들을 제외하고 스크롤뷰의 영역을 잡아주었다.

2. Container 역할의 view를 선택한 뒤 컨트롤을 눌러 Content Layout Guide와 연결해준다.

위의 4개(Leading, Top, Trailing, Bottom)를 모두 선택해 영역을 잡아준다. 모두 0으로 설정한다.

이 작업은 Content의 크기를 알려주는 작업이다. 제약을 설정하는 방법으로 Content의 크기를 알려줘 스크롤이 생기게 하는 것이라고 한다.

3. Frame Layout Guide의 width와 View(Container 역할)의 width를 동일하게 설정해서 가로 스크롤이 불가능하게 한다.

세로 스크롤만 가능하게 하고, 가로 스크롤은 불가능하게 할 것이라면 컨텐츠 사이즈가 가로크기와 딱 맞거나 작아야 함

스크롤뷰보다 커지는 순간 스크롤이 생긴다.

이렇게 설정해주면 세로 스크롤만 가능해진다.

다른 AutoLayout

UIImageView AutoLayout

이미지뷰를 선택하고 컨트롤을 누른 뒤 그냥 오른쪽으로 살짝 잡아당기고 놓으면 아래와 같은 선택창이 뜬다. 이제까지는 다른 컴포넌트들과 제약을 잡았지만, 지금은 자기자신과 제약을 잡는 것.

여기서 Aspect Ratio 선택
1:1로 비율을 맞춰준다.
이렇게 하면 이미지를 정사각형 모양으로 맞출 수 있다.

Multiplier를 1:1로 설정하면 된다.
first item인 이미지의 width를 1, second item인 이미지의 height 값을 1로 하겠다는 뜻!