UIScrollView(스크롤 뷰) 만드는 법

ScrollView의 기본 개념

 

UIScrollView의 기본 설명을 보면,

 

 

 

포함된 View의 스크롤 및 확대 / 축소를 허용하는 View 입니다.

 

 

 

 

 

개발자들이 많이 사용하는 UITableView, UITextView (그 외엔 UICollectionView)등과 같은 UIKit 클래스들의

 

 

 

상위 클래스가 UIScrollView인 것입니다.

 

 

 

StoryBoard에서 UIScrollView를 생성하게 되면 ContentLayout과 FrameLayout이라는 두 개의

 

 

 

요소가 존재합니다. 이 두 가지 요소의 개념은 

 

 

 

(1)

 

ContentLayout 

 

 

 

 

Scroll View안에 들어가는 모든 View들을 담고 있는 영역에 대한 Layout

 

 

 

(2)

 

 

FrameLayout

 

 

 

실제로 Scoll View가 보여지게 되는 영역에 관한 Layout

 

 

 

이 두가지 요소의 개념을 알게 되면 UIScollView에 대해서 더 쉽게 다룰 수 있습니다.

 

 

 

 

이제 StoryBoard를 이용하여 ScrollView를 작성해보겠습니다.

 

 

 

 

 

 

 

ScrollView를 화면에 꽉 차게 설정해준다. Autolayout을 top, leading, trailing, bottom 모두 0으로 설정.

 

 

 

그리고 ScrollView안에 View를 넣어줍니다.

 

 

 

넣어준 View를 Content Layout Guide에 대해서 제약 조건을 설정해줍니다. 

 

 

 

Leading, Trailing, Bottom, Top의 값을 모두 0으로 설정.

 

 

 

 

 

 

 

그리고 Frame Layout Guide에 대해서는

 

 

 

세로로 스크롤을 하고 싶다면 가로를 같게끔 설정. (Equal Widths)

 

 

 

가로로 스크롤을 하고 싶다면 세로를 같게끔 설정. (Equal Heights)을 하면 됩니다.

 

 

 

저는 세로로 스크롤을 할 예정이므로 Equal Widths로 설정했습니다.

 

 

 

 

 

그리고 View의 Height를 따로 설정해주면 

 

 

 

Height는 1200으로 설정

 

 

 

ScrollView가 완성되었습니다.

 

 

 

잘 완성이 되었는지 확인하기 위해서 두 개의 Label을 추가해서 확인하였습니다.

 

 

 

 

 

 

 

잘 보여지는 것을 확인할 수 있습니다.

 

 

 

다음 글에서는 코드로 ScrollView 작성하는 법을 알아보겠습니다.