8. ScrollView

ScrollView를 사용하는 상황은 이미지 또는 컨텐츠가 화면의 크기로 감당할 수 없을 때 사용한다.

[큰 이미지를 스크롤 뷰로 보기]

1. 우선 이미지를 준비해서 imageView를 이용해서 이미지를 추가한다. (Content Mode: Scale To Fill)

 

Editor - size to fit Contetnt을 클릭하면 아래와 같이 화면크기보다 이미지의 크기가 큰것을 확인할 수 있다. 이 크기를 우리는 스크롤 View를 이용해서 나타내보려고 한다.

이미지 크기는 다시 원래 상태로!

 

2. 해당하는 컨텐츠를 클릭하고 우측하단에 Embed in View - ScrollView를 클릭해준다.

 

3. 이제 ScrollView를 전체화면크기로 키우기 위해서 Constraints의 값을 모두 0으로 해준다.

그러면 오류가 뜨게 되는데 그 이유는 ScrollView 내부에 있는 컨텐츠의 크기와 사이즈를 잡아주지 않아서이다.

그래서 만약 이미지의 정확한 크기가 있다면 직접 Constraints width, height를 주면된다.

 

4. 우선 오류를 해결하기 전에 imageView 자체의 오토레이아웃을 잡아보자.

xcode 11부터 새로 생긴 Content Layout Guide, FrameLayout에 대해서 설명하겠다.

• Content Layout Guide: ScrollView의 컨텐츠 영역과 관련된 오토 레이아웃 제약 조건을 만드려면 이 레이아웃 가이드를 사용
• FrameLayout: ScrollView 자체의 프레임 사각형을 포함하는 오토 레이아웃 제약 조건을 만드려면 이 레이아웃 가이드를 사용

해당 이미지를 클릭하고 Ctrl을 누르면서 Content Layout Guide 이어주면 아래의 화면이 나오는데 이때 shift를 누르고 leading, top, trailing, bottom을 모두 체크해준다.

그후 우리가 원하는 레이아웃을 Constant를 조절해서 잡아주자. 나는 모든 Constant를 0으로 조절하였다.

[이미지 크기지정 o]

 

5. 이제 이미지의 크기가 결정되어 있다는 가정하에 500 500으로 이미지 크기를 지정해준다.

이렇게 하면 크기가 500 500인 이미지를 가로, 세로 스크롤할 수 있는 레이아웃을 잡게 된 것이다. (이미지의 높이가 화면의 높이보다 작아서 세로 스크롤은 불가능)

[요약]

1. ScrollView의 Constraints 설정

2. ScrollView의 내부 Content의 레이아웃 지정 (Content Layout Guide를 통해서)

3. Content 크기 지정

[이미지 크기지정 x]

만약에 이미지의 크기가 지정되어 있지 않은 경우를 가정해서 기존의 width, height를 지우면 이미지의 실제 크기에 맞게 Content사이즈가 지정이 된다.

)

 

[컨텐츠가 적당히 많을 때 스크롤뷰로 보기]

1. 많은 컨테츠들을 화면에 놓기 위해서 왼쪽 ViewController를 누르고 사이즈 인스펙터로 들어가서 Simulated Size - Freeform으로 바꾸고 Height를 1000으로 설정해준다.

 

2. 그 후 textField 여러개를 화면에 놓는다.

 

3. 여러개의 컨텐츠이기 때문에 모든 컨텐츠를 선택하고 Embed in View - View를 선택해서 View위에 컨텐츠를 올려준다.

View가 식별이 안되기 때문에 배경색을 넣자.

 

4.그 후 해당 View를 다시 Embed in View - ScrollView를 선택해서 올려준다.

 

5. ScrollView를 화면 전체에 사용하려고 하기 때문에 Constraints를 모두 0으로 만들어준다.

이때 SafeArea는 건드리지 않아야하기 때문에 Constraints를 전부 SafeArea로 바꾸고 Constant는 0으로 해준다.

 

6. textField의 Constraints를 모두 20으로 만들어준다.

 

7. textField아래에 있는 View는 ScrollView에 맞아야하기 때문에 View를 클릭하고 Ctrl을 누르면서 Content Layout Guide 이어주면 아래의 화면이 나오는데 이때 shift를 누르고 leading, top, trailing, bottom을 모두 체크해준다. 그리고 Constant는 모두 0으로해준다.

아까전의 이미지는 화면보다 크게 잡혀있었고 지금 TextField는 기본적인 크기가 아무것도 없는 상황이기 가장 최소의 크기로 잡힌다.

하지만 우리는 TextField를 화면의 크기만큼 길게 해주고 싶기 때문에 TextField가 있는 View의 넓이는 해당 화면의 넓이와 같게 설정해주어야 한다.

 

8. TextField가 있는 View를 우클릭한채로 Safe Area에 놓고 Equal width를 선택해준 뒤 View의 width Constraints의 Mutiplier를 1로 설정해준다.

컨텐츠보다 화면이 작은 디바이스로 실행하면 아래와 같이 세로 스크롤이 된다. 가로 스크롤이 안되는 이유는 Equal Width를 SafeArea에 했기 때문이다.

컨테츠를 추가하거나 삭제할 때는 어떤 Constraints를 수정할지 잘 생각해보고 수정 또는 삭제를 해야한다.