[iOS] UIScrollView (스크롤뷰) 구현하기 - 기초(Storyboard)

안녕하세요 

오늘은 UIScrollView를 구현하는 가장 쉬운 방법에 대해 포스팅하겠습니다.

제목과 같이 Storyboard를 이용한 구현 방법이며, 코드로 구현하는 방법은 추후에 포스팅하도록 하겠습니다.

 

UIScrollView 란?

UIScrollView(이하 '스크롤 뷰')는 손가락에 움직임에 따라 화면의 위치가 변하는 UIView입니다.

스크롤 뷰는 확대, 축소, 스크롤 막대 등등 여러 기능을 제공합니다. 더 상세한 내용이 궁금하시면 애플 공식문서를 참고하여 주시기 바랍니다.

예를 들어 현재 보고 있는 웹페이지에서 마우스 스크롤을 아래 방향으로 돌리면 화면이 위로 올라가는데, 이것을 '스크롤 뷰'라고 생각하면 될 것 같습니다.

스크롤 뷰는 매우 유용하게 사용되며 UITableView, UICollectionView의 상위 클래스입니다. 웬만한 앱에는 스크롤 뷰가 적용되어 있다고 봐도 과언이 아닐 겁니다.

 

그림 1. 스크롤 뷰가 사용된 '네이버 앱'

 

UIScrollView 적용 방법 (storyboard)

1. UIScrollView 추가

그림 2. 스크롤 뷰 추가

 

2. UIScrollView Layout 적용

스크롤 뷰의 Layout을 지정합니다. 스크롤 뷰를 지정할 만큼으로 레이아웃을 잡아주세요.

그림 3. 스크롤뷰 레이아웃 적용

 

3. SubView 추가

스크롤 뷰 위에 보일 SubView를 추가합니다.

스크롤 뷰 위에 크기가 일치하도록 SubView를 추가했습니다. 이유는 layout 설정이 편리하기 위함입니다.

 

그림 4. 스크롤 뷰 위에 SubView 추가

 

4. SubView Layout 적용

아래와 같이 SubView를 스크롤 뷰에 상, 하, 좌, 우 가득 차게 맞추고, width와 height을 같게 맞춰줍니다.

스크롤 뷰에 SubView를 맞춘 이유는 스크롤이 되기 위해서는 어떤 기준이 있어야 하는데, 그 기준을 하나하나 맞추면서 UI를 작업하면 혼란이 올 수도 있기 때문에 최초의 기준을 잡아준다고 보면 좋을 것 같습니다.

그림 5. SubView layout 설정

5. View Controller 크기 변경

스크롤 뷰에 UI를 추가하려면 상하 또는 좌우로 길어지기 마련입니다. 그러므로 작업할 storyboard의 View Controller 크기를 변경해 줍니다. (크기를 변경하지 않아도 constraints 제약조건만 잘 맞춰준다면 View Controller에서도 스크롤이 가능합니다.)

 

[View Controller] -> [View Controller Inspector] -> [Simulated Size] 순서로 진입하여 크기를 변경합니다.

(세로 모드의 스크롤 뷰를 예시로 보여드리기 위해 Height를 1600으로 맞췄습니다.)

그림 6. View Controller size 변경

 

6. UI Object 추가

스크롤 확인을 위해 UILabel을 상단, 가운데, 하단에 추가합니다.

그림 7. 스크롤 확인을 위한 UILabel 추가

 

7. UI Object Layout 적용 (중요)

Layout을 적용하지 않거나, View의 사이즈를 정해주지 않으면 스크롤의 범위를 잡지 못하기 때문에 스크롤이 되지 않습니다.

그렇기 때문에 View의 사이즈를 정해주거나, Layout으로 상하 또는 좌우의 간격을 맞춰주도록 합니다.

(이해가 어려울 수 있으니 아래 이미지를 참고하여 주시기 바랍니다.)

 

우선 아래와 같이 각각의 위치와 간격, 사이즈를 설정합니다. 

width를 적용하지 않은 이유는 좌우의 간격을 적용해줬기 때문에 굳이 지정하지 않았습니다.

(추후 Auto Layout 포스팅 예정)

그림 8. UILabel layout 설정

 

위 [그림 8]과 같이 적용하면 아래 [그림 9]처럼 "constraints가 잘못됐는데?"라고 알려줍니다.

그 이유는 [4. SubView Layout 적용]에서 SubView의 높이를 스크롤 뷰와 같다고 지정해 줬습니다.

그런데 UILabel을 높이와 상, 하 간격을 또 지정해줬으니 결국 SubView는 두 개의 높이가 지정이 된 겁니다.

저희는 스크롤 뷰의 내용을 기준으로 스크롤을 할 것이기 때문에 SubView의 높이는 제거해 주도록 합니다. ([그림 10] 참고)

그림 9. Scroll View constraints 에러

 

SubView 높이 제거방법 : [SubView 클릭] -> [SubView 높이 클릭] -> [back space]

그림 10. SubView의 높이 제거

 

8. 스크롤 뷰 동작 확인

그림 11. 스크롤 뷰 동작 확인

 

 

이상으로 스크롤 뷰 구현에 대해 알아보았습니다.

스크롤 뷰는 예민하지만 생각보다 단순하며, constraints 제약조건만 잘 적용하면 된다고 생각합니다.

상, 하, 좌, 우, 폭, 높이 빈틈없이 잡아주면 스트레스 없이 구현이 가능할 것 같습니다.

 

이상이며 스크롤 뷰 구현을 성공적으로 하셨으면 좋겠습니다.