티스토리 뷰

[개발환경]

  • 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개발자]



  # 팀노바 패밀리사이트



 

공식 홈페이지

유튜브 채널

 

 



 

블로그

오픈카페

 






*** 퍼가기 시, 출처를 명시해주세요. ***


'iOS(SWIFT)' 카테고리의 다른 글

[iOS / Xcode] 오토레이아웃을 적용한 UIScrollView  (0) 2018.06.20
댓글
댓글쓰기 폼