[iOS] ScrollView 사용하기

 

저번 과제부터 스크롤뷰를 처음 사용해보면서 

어려웠던 점이 많아 연습했던 부분을 포스팅해보려 합니다!

 

스크롤뷰를 사용할 일이 많기 때문에 더 공부하고 연습해야 할 부분!!

 

UIScrollView

UIScrollView는 사용자가 내용을 스크롤할 수 있는 컨테이너 뷰이다.

이는 주로 사용자에게 화면보다 큰 컨텐츠를 제공할 때 유용하다!

 

---

 

 

사용하는 방법을 알아보자.

 

우선 뷰컨트롤러에 스크롤뷰를 추가해준다.

 

 

SafeArea 영역에 맞게 스크롤뷰를 배치해준다.

 

 

 

이런 에러가 뜰 것이다..

스크롤 할 수 있는 내용의 사이즈가 정해지지 않았기 때문이다!

 

스크롤뷰 안에 있는 뷰의 사이즈를 알아야 스크롤 영역이 정해지기 때문에

ContentView(UIView)를 추가해줘야 한다.

 

위와 같이 ContentView를 ScrollView 안에 추가해준 뒤 Layout Guide와 레이아웃 관계를 맺어줘야 한다.

 

여기서 Layout Guide를 잠깐 살펴보자면,,!!

UIScrollView에는 iOS 11부터 contentLayoutGuide와 frameLayoutGuide라는 두 가지 속성이 추가되었다.

이들은 Auto Layout을 사용하여 스크롤 뷰의 내용 및 프레임의 레이아웃을 관리하는 데 도움이 된다고 한다.

 

ContentLayoutGuide

 

 

 

이는 스크롤 가능한 영역 내에 포함된 내용에 대한 레이아웃을 정의하는 데 유용하다.

즉, contentLayoutGuide를 사용하면 스크롤 가능한 컨텐츠의 크기와 위치를 정확하게 제어할 수 있다.

👉 scrollView의 content area와 관련된 부분에 대해  autoLayout의 제약조건들을 생성하고자할 때 사용!

 

 

frameLayoutGuide

스크롤 뷰 자체의 크기와 위치를 조절하거나 부모 뷰에 대한 레이아웃을 정의하는 데 사용된다.

👉 scrollView 자기 자신의 프레임 사각형과 명확하게 연관된 AutoLayout 제약조건을 생성하길 원할 때 사용한다. 컨텐트 사각형과 반대라고 볼 수 있다.

---

 

레이아웃을 사용하는 방법은 다음과 같다.

스크롤 뷰 안에 있는 컨텐트뷰를 Control키를 누르고 ContentLayoutGuide에 가져가서 위와 같이 제약 조건을 설정한다.

(모두 0으로 하기!)

 

 

 

이제 스크롤 뷰 안에 있는 컨텐트 뷰를 frameLayoutGuide에 가져가서 Equal Widths로 설정한다.

이 때 Equal Widths는 스크롤뷰와 컨텐트뷰의 너비가 같으니 수직 스크롤이 가능하겠죠?!

만약 수평 스크롤을 원한다면 Equal Heights로 하면 된다.

 

 

 

프레임 레이아웃까지 설정했는데도 에러가 발생한다.

이 에러는 스크롤뷰의 높이값이 지정되지 않아서 생기는 에러이다.

ContentView의 사이즈가 결정되지 않았기 때문에 높이값을 정해주라는 뜻이다.

 

해결법은 아래와 같다!

1) content들의 사이즈만큼을 scrollView의 높이로 지정해주기! (ScrollView의 높이도 지정해야 함)
2)혹은 content의 사이즈를 명확하게 하기!

 

나는 2번 방법으로 ContentView안에 StackView를 추가해서 여러 UIView를 추가했다.

그리고 뷰의 높이를 250으로 지정했다. 

 

 

이제 스크롤뷰 안의 컨텐트뷰의 높이가 정해졌기 때문에(UIView들의 높이의 합)

에러가 발생하지 않는다. ㅎㅎ

 

 

스크롤이 잘 됩니다!

 

 

그리고 스토리보드에서 다 보이지 않는 화면의 컴포넌트들은 

빌드할 필요 없이 ContentLayout을 누르고 스크롤해보면 확인할 수 있다는 점!!~~

 

아니면 ViewController의 Size를 Freedom으로 선택한 뒤 원하는 크기로 사이즈를 맞춰서 사용해도 된다.