[iOS] scrollView 개념 부터 구현까지 뽀개기 - HoonIOS

안녕하세요, HoonIOS입니다. :)

 

이번에는 스크롤 뷰 개념부터 델리게이트 패턴까지 한번 알아보기 위해서 공부를 하고 포스팅을 하게 되었습니다. :)

 

 

 ScrollView란?

 

애플 공식문서에서 말하는 UIScrollView는 포함된 뷰의 스크롤링하고 줌잉을 허락해주는 뷰라고 합니다.

 

스크롤 뷰는 UIKit프레임워크의 요소로 UITableView, UITextView의 부모 클래스이기도 합니다.

 

이 말은 즉 테이블 뷰가 스크롤이 가능했던 이유는 UIScrollView의 자식 클래스여서 가능했던 것이겠죠?

 

스크롤 뷰가 움직이는 방식은 손가락의 스크롤 움직임을 추적해서 그에 따라 원점을 조절하는 방식입니다. 이뿐만 아니라 스크롤 뷰는 콘텐츠의 확대 및 축소 이동을 처리합니다. 

사용자가 pitch - in 또는 pitch - out 제스처를 만들면은 스크롤 뷰는 콘텐츠의 크기와 offset을 스크롤 뷰에 적용한다고 합니다.

 

스크롤 뷰를 오브젝트 라이브러리에서 찾아 뷰 컨트롤러 위에 올리게 되면은 두 개의 레이아웃 가이드가 생겨나게 됩니다.

한 개는 frame Layout Guide고 나머지 하나는 Content Layout Guide입니다.

 

한번 한 개씩 살펴보겠습니다.

 

 frame Layout Guide

애플 공식 문서에서는 변형되지 않은 프레임을 기반으로 한 레이아웃 가이드라고 합니다.

콘텐츠가 아닌 스크롤 뷰 자체의 프레임 사각형을 포함하는 자동으로 레이아웃 제약조건을 설정하려면 이 레이아웃 가이드를 사용하라고 나와있습니다.

 

즉 다시 말해서 스크롤 뷰의 스크롤을 가로로 할지 세로로 할지는 이 FrameLayoutGuide를 기준으로 제약조건을 걸어달라는 말입니다.

 

 Content Layout Guide

애플 공식 문서에서는 이 레이아웃 가이드는 변형되지 않은 스크롤 뷰의 사각형 콘텐츠를 기반으로 하고 있다고 나와있습니다.

스크롤뷰의 콘텐츠 영역에 관련된 레이아웃 제약 조건을 설정하려면 이 레이아웃 가이드를 사용하라고 나와있습니다.

 

즉 콘텐츠의 레이아웃을 잡을 때는 Scroll View와 잡는 게 아니라 이 contentLayoutGuide를 기준으로 잡으라는 말입니다.

 

흠 이 레이아웃 가이드를 말로만 설명하면 이해가 안 될 수 있으니 예시로 한번 구현을 해보겠습니다.

 

 

 UIScrollView 구현하기

 

1. 제일 먼저 아무것도 없는 깔끔한 뷰 컨트롤러를 준비를 해줍니다.

 

2. 이제 이 뷰 컨트롤러 위에 스크롤 뷰를 올려놓겠습니다.

아아 당연히 스크롤 뷰는 오브젝트 라이브러리에 추가되어 있어 가서 끌어오시면 됩니다..!!ㅎㅎ

 

이렇게 스크롤 뷰를 뷰컨에 올려놓으면 스크롤 뷰만 추가되는 게 아니라 아래와 같이 ContentLayoutGuide 하고 FrameLayoutGuide모두 추가되는 것을 확인할 수 있습니다.

3. 스크롤 뷰의 레이아웃을 잡아줍니다.!

 

스크롤 뷰의 레이아웃은 safeArea 하고 딱 달라붙게 위아래 모두 0으로 붙여줍니다.

 

한 뷰 컨트롤러를 스크롤 뷰로 다 정의한다고 생각하시면 됩니다.

 

4. 스크롤 뷰에 뷰를 추가합니다.

 

이 뷰 안에 레이블 콘텐츠를 넣어줄 것입니다.

 

5. 해당 뷰의 레이아웃을 잡아줍니다.

 

여기서 중요한 것이 있습니다. 바로 앞에서 말씀드린 frameLayoutGuide를 잡아줄 겁니다.

 

이 레이아웃 가이드는 앞에서 말해준 것처럼 스크롤을 가로로 할 것인지 세로로 할 것인지 frame을 잡아주는 것입니다. 우선 여기 예제에서는 세로로 스크롤을 할 예정입니다.

 

아 뷰는 뷰 컨트롤러보다 좀 더 크게 잡으시는 게 좋습니다.

 

 

※ 참고

• 만약 세로로 스크롤을 할꺼면 넓이를 고정시켜 Height만 변화되게 시켜줘야합니다.
• 그렇지 않고 만약 가로로 스크롤을 해줄꺼면 높이를 고정시켜줘 높이는 그대로고 widith가 변화되게 해줘야 합니다.

스크롤 뷰의 레이 아웃하고 framLayoutGuide만 잡아주면 이렇게 레이아웃 경고가 계속 뜹니다. 왜냐하면 콘텐츠 레이아웃을 아직 안 잡아줬기 때문이죠

 

6. 해당 뷰의 레이아웃을 잡아줍니다.

 

이 부분도 중요한데요 앞에서 말씀드린 contentLayoutGuide를 잡아줄 겁니다.

 

즉 뷰의 레이아웃을 잡을 때는 위쪽, 왼쪽, 오른쪽, 아래쪽을 contentLayoutGuide와 잡아줘야 한다고 했습니다.

 

여기서 중요한 것은 스크롤 뷰에 넣어준 뷰의 레이아웃입니다. 뷰는 스크롤 뷰 안에 있는 콘텐츠입니다. 따라서 뷰도 레이아웃을 잡아줘야 합니다.

 

* 설명

• 위 레이아웃 설정한 것을 우선 보시면은 뷰의 레이아웃을 Content Layout Guide와 잡아놓은 것을 볼 수 있습니다. 단순히 한쪽만 잡아놓느게 아니라 위아래 왼쪽 오른쪽 모두 레이아웃을 잡아야 합니다.

이제 뷰안에 있는 콘텐츠를 이용해서 레이아웃을 잡은 건데 여기서는 레이블을 넣어줘 레이아웃을 각각 잡아줄 것입니다.

 

7. 해당 뷰안에 있는 콘텐츠들의 레이아웃을 모두 잡아줍니다.

 

저는 뷰안에 7개의 레이블을 넣어줬습니다. :)

 

뷰안에 콘텐츠를 넣어줄 때는 중요한 것이 두 가지 있습니다.

1. 맨 처음 맨 마지막 콘텐츠의 모두 위아래 왼쪽 오른쪽 다 레이아웃을 잡아줘야 한다는 것
2. 뷰안에 있는 레이아웃이라 contentLayoutGuide와 레이아웃을 잡는 게 아니라 뷰위에 있는 레이블이 있으므로 뷰와 레이아웃을 잡아줘야 합니다.

그런데 왜 맨 마지막에 있는 레이블의 바닥까지 잡아줘야 할까요?

.

.

정답은 스크롤 뷰의 뷰의 높이는 딱 정해져 있어야 하므로 마지막 라벨의 bottom까지 제약을 걸어줘야 높이가 정해지게 되기 때문입니다.

 

이렇게 뷰안에 있는 콘텐츠의 레이아웃을 모두 잡으면은 레이아웃 빨간불이 모두 사라졌을 겁니다.

우선 여기 실행에서는 레이블을 7개 넣어줬지만 다음 포스팅할 UIScrollViewDelegate를 공부하게 되면서 10개를 더 추가해줘서 이렇게 레이아웃이 많아진 것입니다....ㅎ

 

그럼 한번 잘 실행이 되는지 한번 실행시켜봐야겠습니다. :)

 

 

스크롤이 잘 되는 것을 알 수 있네요 스크롤 뷰가 딱 생성이 되면 스토리 보드에 있는 뷰 컨트롤러에서도 스크롤이 되더라고요 만약 스크롤 뷰가 잘됬는지 궁금하다? 

 

그러면 우선 스크롤 뷰의 레이아웃을 잡고 잘 스크롤되는지 확인을 해보시면 됩니다. 

 

스크롤 뷰 델리게이트에는 크게 스크롤링을 위한 델리게이트와 줌을 위한 델리게이트 메서드가 있습니다. 다음 포스팅에는 이에 대해 한번 포스팅을 할 예정입니다. :)