티스토리 뷰
[개발환경]
macOS High Sierra(10.13.5)
Xcode 9.4.1
개인적으로 안드로이드 개발자에서 iOS개발자로 바뀌면서 당황스러운 기능 중 하나가 바로 스크롤뷰입니다.
안드로이드에서는 스크롤 뷰를 단순히 가져와서 사용하면 끝이었건만...
iOS에서는 별도의 옵션을 주지 않으면 전혀 움직이지 않습니다.
(GIF파일인데... 세로로 전혀 움직이지 않는다...)
위와 같이 앱을 실행시켰을 때, 스크롤뷰를 적용했는지 알 수 조차 없습니다.
그래서, 오토 레이아웃을 이용한 스크롤 뷰를 구현방법을 공유하려 합니다.
(물론, 개발자마다 방식이 다르고, 아래의 방식은 저만의 방식입니다.)
# 오토 레이아웃을 적용한 스크롤 뷰(vertical)
1. (선택) ViewController의 Simulated Size을 Freeform으로 변경
2. 먼저 스크롤 뷰를 생성하고, constraints의 top / bottom / leading / trailing을 0으로 설정
3. 스크롤 뷰의 자식 뷰(이하 contentView)를 추가하고, 마찬가치로 constraints의 top / bottom / leading / trailing을 0으로 설정
4. contentView를 SafeArea의 width와 일치
5. 화면에 표시하고 싶은 뷰들을 contentView에 포함시킨다.(하단에 포함된 뷰들의 설정 방법 생략)
여기서 중요한 포인트!!
"bottom(contentView의 bottom) = stack2.bottom + 40(상수값)"
해당 constraint 대신에 contentView의 height를 SafeArea 또는 SuperView와 일치시키면...
예시] contentView.height = SafeArea.height / contentView.height = (superView).height
첫 GIF파일 처럼 스크롤이 작동하지 않거나, 작동이 되더라도 지속적으로 원위치로 되돌아가는 현상이 발생합니다.
그래서, 사용자에게 제공할 뷰들 중 가장 하단에 위치한 뷰를 기준으로 contentView의 bottom을 지정해줍니다.
(여기서, 40은 임의의 상수값으로 해당 예제에서만 적용되었고, 자유롭게 하시면 됩니다.)
마지막으로 완성된 모습
작성자 : 태헌 파트장 [포피스 iOS개발자]
*** 퍼가기 시, 출처를 명시해주세요. ***
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 스크롤뷰
- 안드로이드 스튜디오
- sftp
- phpstorm
- 팀노바
- constraints
- ftp
- teamnova
- android studio
- 오토 레이아웃
- iOS 개발
- ios
- xcode
- R 에러
- php
- 안드로이드 개발
- iPhone
- symbol R
- UIScrollView
- AutoLayout
- Cannot resolve symbol R
- 웹개발
- 안드로이드
- 아이폰
- 안드로이드 에러
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
글 보관함