[Swift] ScrollView 오토레이아웃 잡기

안녕하세요😄😄

 

스크롤뷰를 처음 써보는 사람이면 이게 왜 오토레이아웃이 빨갛게 뜨지..?

왜 스크롤이 안돼...?

하는 경우가 종종 있어요

 

저도 저랬거든요..ㅎ..

 

그래서 ScrollView를 ScrollView답게 사용 할 수있도록 해보겠습니다.!!

.

.

.

.

 

우선 뷰컨트롤러에

 

ScrollView를 추가하고 오토레이아웃으로 0,0,0,0을 맞춰줍니다!

 

 

 

하려고했는데 Equal Widths가 없다...?!

ContentLayout과 FrameLayout이 구분되어있어서 그런경우가 있어요

구분시키는 기능 ContentLayoutGuides를 꺼주고 따라해보세요!!

 

 

그런다음 ScrollView에 View를 추가해서 넣어줍니다.

이 View가 스크롤뷰의 기본바탕이 될 뷰에요!

 

뷰에도 오토레이아웃을 적용 할건데

스토리보드 왼쪽에보면 뷰의 구조를 나타내는 곳에서

ScrollView안에 있는 View를 선택하고

control + 드래그를 해서 ScrollView에 가져다 놓으면

3번째 사진과 같이 오토레이아웃을 설정할 수 있도록 창이 떠요

거기서 ScrollView에 오토레이아웃 0,0,0,0이 되도록 맞춰줄 거에요

(여기서 세로스크롤인경우 Equal Widths 가로인경우 Equal Heights)

 

드래그 방법이아닌 이 방법으로 0,0,0,0을 맞춰줘도됩니다!!

 

 

 

이 과정 까지 따라왔다면 오토레이아웃이 빨갛게 되어있

을거에요

 

그게 정상이에요!!

왜냐하면

 

ScrollView안에 View가 있는데 그 View의 크기를 정확히 모르기때문에

ScrollView는 ContentSize를 확정지을수 없어서 

스크롤도 안되고 오토레이아웃도 못잡는 상태에요

 

 

View안에 내용물이 있어야 저희가 View의 크기를 정해주겠죠??

 

 

스크롤뷰에 테스트할 imageView를 넣어볼게요

오토레이아웃은 위와 양옆만 맞추고 높이를 600으로 고정한imageView를 2개를 세로로 넣었어요

확실하게 뷰의 크기보다 크기때문에 스크롤이 필요해 졌네요!!?!

 

 

ScrollView안에 있는 View의 크기를 제가 만드려는 사이즈에 맞게 Height를 고정 시켜볼게요

길이가 600인 이미지뷰가 2개있으니까

여유있게 1500으로 고정할게요

 

 

이제 오토레이아웃들이 파랗게 딱딱 맞으면서!!

뷰를 클릭하고 스크롤을하면 스크롤되는 것을 볼 수 잇어요!