잘 지내셨나요..?
(대충 왜 요즘에 포스팅 안했냐는 분들의 눈빛을 받는 나)
(뭔가 기대에 부응을 해야할 것 같은 나)
.
.
.
.
.
.
그래서 주제를 하나 물고왔습니다~~~! (하하..)
오늘은 프로젝트를 진행하면서 scrollView를 사용하게 되었는데,
scrollView를 처음 접할 때는 제약 조건 설정하는게 어렵더라구요.
저와 같은 분이 많을 거라 생각이 들어서 포스팅하게 되었습니다.
이제 본격적으로 시작해보겠습니다~!
스크롤뷰가 뭐에요..?
라고 물으신다면 대답해드리는게 인지상정.
오늘도 역시나 애플 공식 문서에 먼저 검색해봅시다.
UIScrollView는
자신이 담고있는 뷰들의 scrolling과 zooming을 허용하는 뷰를 말합니다.
ScrollView는 손가락들의 움직임을 추적하고, 그에 따라 origin을 조정합니다.
(origin이 무엇인지 모른다면 Frame & Bounds 포스팅을 참고해보세요!)
스크롤뷰 제약조건 연습하기
아주아주 간단하고 쉬운 예제를 준비해보았습니다. GO!
우선
스토리보드에서 화면의 safeArea에 꽉차게 UIScrollView를 배치합니다.
그러면 두 개의 에러가 뜰거에요.
에러를 확인해보면~
"스크롤할 수 있는 content의 높이와 너비가 모호하다."
라고 적혀있는거 것을 볼 수 있습니다.
이것이 뜨는 이유가 무엇일까요??
바로
우리가 scrollView의 크기는 safeArea에 딱 맞게 조정해주었지만,
scrollView 안에 보여줄 내용의 사이즈를 모르면
scrollView는 어디까지 스크롤을 해야할지를 모릅니다.
공식 문서의 OverView를 읽어보면
"
scrollView는 contentView의 사이즈를 알아야
언제 스크롤을 멈출지 알기 때문에 무조건 알아야한다.
"
라고 적혀있습니다.
그래서 우리는 scrollView 안에 들어갈 content view의 사이즈를 지정해주지 않았기에
위와 같은 에러가 발생한 것입니다.
xcode11 부터 추가된 내용인데요
이 에러는 아래의 두 개의 Layout Guide 와 관련이 있습니다.
그게 뭐죠???
라고 물으실 것 같아 또 공식문서를 가져왔습니다. (검색의 늪...)
문서의 내용을 그대로 해석하자면,,
contentLayoutGuide
contentLayoutGuide는 scrollView의 변환되지 않은 컨텐츠 사각형을 기반으로 하는 레이아웃 가이드 입니다.
이 것은 우리가 scrollView의 content area와 관련된 부분에 대해
autoLayout의 제약조건들을 생성하고자할 때 사용합니다.
frameLayoutGuide
frameLayoutGuide는 scrollView의 변환되지 않은 프레임 사각형을 기반으로 하는 레이아웃 가이드 입니다.
이 것은 우리가 scrollView 자기 자신의 프레임 사각형과
명확하게 연관된 AutoLayout 제약조건을 생성하길 원할 때 사용합니다.
컨텐트 사각형과 반대라고 볼 수 있습니다.
.
.
.
.
.
??..그러니까 그게 뭐죠...?
음 쉽게 설명하자면
contentLayoutGuide는
우리가 tableViewCell 안의 contentView에 컴포넌트들을 배치하듯,
보여주고 싶은 content가 있을 거잖아요?
그 content의 크기를 알려주면 content에 따라 레이아웃이 바꿔주는 녀석입니다.
(우리가 보여주고 싶은 content들을 스크롤하면서 사용자가 화면에서 볼 수 있도록 하는 부분에 대한 layout)
frameLayoutGuide는
스크롤과 관계없이 항상 그 자리에 있었으면 하는 컴포턴트들에 대한
제약조건을 설정하여 항상 그 자리에 있도록 해주는 녀석입니다.
(화면 안에 content가 바뀌어도 그대로 있어야 하는 부분에 대한 layout)
지금도 이해가 안된다면 아래의 예제를 마저 따라하시고
직접 시뮬레이터를 실행해보면
이해가 가실거에요 ㅎㅎ!
그래서
우선 우리가 보여주고 싶은 content를 담을 view를 하나 scrollView에 추가해줍니다.
그리고 contentLayout에 제약조건을 걸어줍니다.
(왜냐. 이 뷰는 우리가 보여줄 content니까, 그와 관련된 contentLayout에 제약조건을 설정!)
워워.
빨간 줄이 나왔다고 놀라지마세요.
우리가 아직 설정을 덜 해줘서 그래요!
frameLayout까지 설정해주면 빨간줄이 없어질겁니다ㅎㅎ
frameLayout을 어떻게 주느냐에 따라
수평 스크롤, 수직 스크롤을 설정해줄 수 있는데,
만약
수평 스크롤을 하고 싶다면 -> Equal heights
수직 스크롤을 하고 싶다면 -> Equal Widths
를 설정해주면 됩니다.
저는
수직 스크롤을 하고 싶기 때문에 Equal Widths를 줄게요~
그러고 나도 에러가 하나 날거에요!
그 이유는
위에서 말했듯이
scrollView는 content view의 사이즈를 알아야만 어디까지 스크롤을 해야할지 파악할 수 있기 때문에
높이값을 지정해줘야한다는 에러가 나는 겁니다.
높이 값을 지정해주려면
우선 우리가 view 안에 보여주고 싶은 content 들을 배치하고
1) 그 content들의 사이즈만큼을 scrollView의 높이로 지정해주거나
2)혹은 content의 사이즈가 명확하면 되겠죠??
저는 우선 UlLable 2개와 UIView 3개를 넣어보겠습니다.
스크롤이 잘 되는지 contents가 다 보이는지 확인하기 위해
뷰의 시작과 끝에 UIlabel을 하나씩 두고, 사이에 배경색이 다른 UIView를 배치하였습니다.
여기서 추가한 제약조건이 궁금하다면? (아래 더보기 확인!)
----------------------------------------------
1. UILabel2개, UIView3개를 stackView로 묶어 view의 하위에 둔다.
2. stackView를 view의 leading, trailing, top, bottom에 0을 준다.
(위의 그림에서는 bottom이 빠졌지만 캡쳐후 추가하였습니다.)
3. label을 stackView의 leading, trailing에 0을 준다.
----------------------------------------------
근데 배치하고 보니까
화면에 꽉차지 않고 왼쪽으로 쏠려있죠?
이거는 FrameLayout 관련 제약조건을 눌러보면
multiplier가 0.xxxx로 되어있어서 그래요.
(왜 최초 연결시 이렇게 되는지는 잘 모르겠지만..?)
이걸 1 로 바꿔주시면 아래와 같이 화면에 알맞게 바뀔 겁니다.
이제 마지막 입니다!!
스크롤이 되는지 확인해야하니까
view 안에 있는 3개의 UIView들의 높이를 좀 크게 잡고 나서
(250 정도로 잡았습니다)
contentLayout을 눌러보면 아래에 가려진 부분까지 크기가 잘 정해져있고, 모든 에러가 사라졌을 겁니다ㅎㅎ
이제 스크롤뷰가 잘 작동하는 지 실행만 해보면 끝!
스크롤을 더 잘 확인하기 위해 stackView 안에 view를 2개 더 추가하였습니다 :)
참고로
스토리보드에서 화면 밖을 벗어나는 컴포넌트는 어떻게 확인하지...
시뮬레이터로 일일히 확인해야하나..?
하신다면 그럴필요 없습니다.
contentLayout을 누르고 이렇게 스토리보드 안에서 스크롤 해볼 수 있어요ㅎㅎ
몰랐던 분들 한정
꿀팁 인정??
제가 scrollView를 처음 다룰 때는
xcode11 이 나오기 전이라 contentLayout, frameLayout 이런거 없었는데..
이번에 scrollView 사용해보려고 추가했다가
"?....저게 뭐지..."
하고 벙지다가 이것저것 찾아보고 실험해보면서
포스팅을 남겨보았습니다..
(깃헙에 프로젝트 올려두었으니 링크타고 확인해보셔도 됩니당)
저 혼자 할게요..☆ 그 삽질.
.
.
.
.
.
위에 한번 따라서 사용해보시면 복잡한 뷰도
금방 그리실 거에요 🔥
오늘도 포스팅 작성 했으니
발빠르게 도망가겠습니다. 그럼 20000~~
호다다다다다닥 -
틀린부분이 있거나, 더 좋은 방법이 있다면 댓글로 남겨주세요!
🌈댓글은 언제나 환영입니다🙏🏻
참고자료
https://www.raywenderlich.com/books/auto-layout-by-tutorials/v1.0/chapters/5-scroll-view
Auto Layout by Tutorials, Chapter 5: Scroll View
Use scroll views to create user interfaces that go beyond the size of a physical screen. Learn about the special challenges they present when using Auto Layout and discover how to configure them.
www.raywenderlich.com
https://developer.apple.com/documentation/uikit/uiscrollview
Apple Developer Documentation
developer.apple.com
'iOS' 카테고리의 다른 글
| ARC & Retain Cycle 예제로 살펴보기 - iOS (2) | 2022.04.17 |
|---|---|
| Push Notification 과 APNS - iOS (0) | 2022.04.14 |
| github에 올리면 안되는 APIKEY 숨기기 - iOS (10) | 2021.10.26 |
| 랜덤 색상을 쓰고 싶을 때 추가하면 되는 extension - iOS (0) | 2021.10.23 |
| View Life-Cycle - swfit (0) | 2021.07.17 |