[iOS] ScrollView...

hzw94·2021년 12월 2일
0

iOS

목록 보기
1/3

서론

최근에 iOS 프로젝트를 시작했다.

일단, 간단하게 화면 로그인, 회원가입 화면 구성을 먼저 하는 것으로 시작을 하게 됐다.

현재 간단한 UI 틀만 잡아놓은 상태다.

그 안에서도 어제, 오늘 회원가입 페이지를 만들면서 ScrollView로 삽질했던 결과물과 왜 ScrollView를 썼는지와 왜 계속 삽질을 해야 했는지에 대한 이유 그리고 해결한 방법에 대해 간단히 적어보려고 한다.

첫 시작

iOS앱 프로젝트를 하면서 크게 화면을 구성하는 방식이

  • Storyboard
  • Programmable UI
  • SwiftUI
    정도가 있을텐데, Storyboard로 프로젝트는 해본적이 있었고, SwiftUI를 지금 당장 또 배워서 하기에는 무리라는 생각이 있어서 그나마 UI를 배치하는데 감각이 비슷하고 새로운 경험이다 싶어 코드로 UI를 작성하는 방식으로 진행을 했다.

Programmable UI

viewDidLoad() 단계에서 UI를 실제 화면에 보여질 View에 넣는 과정을 거치는 방식이다.

이번에 문제가 되었던 ScrollView역시 코드를 통해 viewDidLoad() 단계에서 view에 subview로 삽입되어 동작하게끔 구성했다.


위와 같은 코드에서 보는대로

  • view에 ScrollView삽입
  • view에 삽입 된 ScrollView에 Content View 삽입

과정을 거치게 된다.

Scroll View 조건
1. 스크롤뷰 내부에 컨텐츠를 담고있는 컨텐츠뷰가 존재해야한다.
2. 컨텐츠뷰의 사이즈를 명확하게 해야한다.

사이즈까지 snapKit으로 잘 정해줬다고 생각했는데, 이것은 불행하게도 내 착각이였다.

위에 화면을 보면, 이 상태로도 스크롤이 움직여져야 하고, 화면 역시 스크롤에 따라 변화해야한다.

하지만 저 화면 그대로 스크롤만 움직이는 것을 확인할수 있다.

반면에 Storyboard에서 구현한 화면은 문제 없이 스크롤이 움직임에 따라 ScrollView의 ContentView 가 같이 움직이는것을 확인할수 있었다.

여기서 내가 생각한 의심스러운 문제는

  1. ContentView의 사이즈가 구현 시 불명확는지
  2. ScrollView의 ContentLayout Guide 등 StoryBoard에서 Config와 다른지

정답은 두 가지 모두 다였다.

Programmable 코드에서 처음 ScrollView와 ContentView의 사이즈는 그냥 현재 화면보다 큰정도로 코드로 구현을했는데, constraint를 통해 사이즈 구현을 하는점이 불편했었고
또 Config를 코드로서 구현해야 하는것 역시 제법 귀찮은 일이였다.

결국 나는 SignUp 페이지를 구성할때는 StoryBoard에서 ScrollView를 넣고, 그 안에 Content View를 따로 넣으면서 Constraint 에서 Content Layout Guide들을 풀어주고 내부 컨텐츠를 ScrollView사이즈에 맞춰 주게됐다.

이런식으로 구현 방식을 바꾸게 되면 StoryBoard내에서 직접적으로 필요한 UI요소들을 바로 바꿀수 있게 된다.

생각 이상으로 굉장히 허무하고 간단한 문제였다.
결론적으로는 코드로 UI를 짜다가 못해먹어서 스토리보드로 해결을 한거긴한데.. 일단 만들어 놓고 Refactoring이 가능하면 해보도록 하자..!

ScrollView 정보

아마, 안드로이드도 그렇고 iOS도 마찬가지겠지만 어떤 UI를 사용하기 위해선 충족시켜야할 조건들이 종종 있다.
처음 시작할때 무지성으로 일단 UI를 넣고 "왜 안돼지?..." 하던게 떠올라서 ScrollView에서 알아둬야될 사항만 간단하게 적어본다.

A scroll view is a view with an origin that’s adjustable over the content view. It clips the content to its frame, which generally (but not necessarily) coincides with that of the application’s main window. A scroll view tracks the movements of fingers, and adjusts the origin accordingly. The view that shows its content through the scroll view draws that portion of itself according to the new origin, which is pinned to an offset in the content view. The scroll view itself does no drawing except for displaying vertical and horizontal scroll indicators. The scroll view must know the size of the content view so it knows when to stop scrolling. By default, it bounces back when scrolling exceeds the bounds of the content.

ScrolView 를 사용하기 위해서는 내부 컨텐츠의 사이즈를 알필요가 있다 라는 얘기다.
아무래도 스크롤 뷰 내부에 컨텐츠를 담고있는 뷰가 필요하고 그래서 그 뷰의 사이즈를 명확하게 해야한다는 조건이 필요하다.

profile
볼가놈의 iOS & Swift & RxSwift & PS 저장창고

0개의 댓글