티스토리 뷰
안녕하세요.
ScrollView 구성하는 방법 3가지를 끄적여보려고 합니다.
1. Storyboard (LayoutGuide X) 방식
2. Storyboard (LayoutGuide O) 방식
3. Snapkit 을 이용한 방식
(2번과 3번은 추후에 추가할게요.)
일부 작은 아이폰 화면에서 컨텐츠가 넘쳐 잘려보이지않게끔 스크롤뷰를 사용합니다.
개발하다보면 수직스크롤이 필요한 화면이 생각보다 많습니다.
그만큼 기본적이면서도, 중요합니다.
이번 주제는 수직스크롤 구성 방법을 공유합니다.
Xcode 11 버전 릴리즈되면서 스크롤뷰의 컨텐츠를 구성하는 가이드가 추가되었습니다.
추가된 가이드 :
1. Content Layout Guide
2. Frame Layout Guide
먼저, Layout Guide 가 추가되기 전 사용하던 방식입니다.
1. Storyboard (LayoutGuide X)
1-1. ScrollView 배치
- 스토리보드파일이 보이는 상태에서 키보드 단축키 조합 : "Command + Shift + L "
- 'ScrollView' 검색
- 드래그 후 ViewController 위에 올려놓습니다.
1-2. ScrollView Layout Guide Disable
- Layout Guide 를 사용하지 않도록 체크해제 합니다.
1-3. ContentView 배치
스크롤뷰의 구조를 간략하게 설명하겠습니다.
이전에 배치했던 'UIScrollView' 는 스크롤이 이루어질 영역이라고 단순하게 생각해주시면 되고,
앞으로 추가할 'ContentView' 는 내용물들이 들어갈 뷰 라고 생각해주시면 됩니다.
('ContentView' 는 'UIScrollView', 'UILabel' 같은 컴포넌트 이름이 아닙니다.
스크롤뷰 안에 보여질 내용물들을 담기위한 컨텐츠 영역을 편의상 'ContentView' 라고 언급한겁니다.
'ContentView' 는 'UIView' 컴포넌트로 사용할겁니다.)
- 단축키 조합 "Command + Shift + L " 으로 'UIView' 를 드래그합니다.
- 스크롤뷰안에 'UIView' 를 넣습니다.
1-4. ContentView 제약조건 지정
- 추가한 ContentView 의 제약조건을 지정합니다.
- ContentView 는 ScrollView 안에 포함되어있습니다.
이번에 설정하는 제약조건은 아래와같이 해석할 수 있습니다.
Top 0 : ScrollView 의 상단으로부터 0만큼 간격 제공
*Leading 0 : ScrollView 의 좌측으로부터 0만큼 간격 제공
*Trailing 0 : ScrollView 의 우측으로부터 0만큼 간격 제공
Bottom 0 : ScrollView 의 하단으로부터 0만큼 간격 제공
*Leading, Trailing : 글자가 시작하는 방향입니다.
아랍어로 설정되어있다면, 좌측 제약조건을 의도하고 설정한 Leading 이 오른쪽으로 밀착되어있는 것을 확인할 수 있어요.
제약조건을 지정하면 아래 사진과같이 빨간색 라인이 보입니다.
아직 스크롤 할 내용물이 없어서 발생한 에러라고 봐주시면 됩니다.
1-5. 내용물 추가
스크롤 동작으로 보여질 내용물을 추가합니다.
카카오톡을 예시로들면,
친구리스트가 5명일때 굳이 스크롤을 하지않아도 한 화면에 5명의 친구리스트가 보일겁니다.
하지만 친구리스트가 20개, 30개 이런식으로 많아지면 스크롤을 내려서 확인해야합니다.
- UILabel 을 ContentView 안에 넣습니다.
- 넣어둔 UILabel 의 제약조건을 지정합니다.
Top 0
Leading 0
Trailing 0
Bottom 0
UILabel 의 제약조건을 지정하면 아래 사진과같이 나타납니다.
시뮬레이터로 빌드한 모습입니다.
스크롤이 이루어져야 하니 Label 을 길게 써볼게요.
텍스트가 우측으로 넘어가고, 심지어 좌우 스크롤이 되는 상황입니다.
수직스크롤을 하기위해 UILabel 의 제약조건과 일부 설정을 추가해볼게요.
 |
 |
1-5. UILabel 추가 설정 (제약 조건, 옵션)
추가 설정 :
1. UILabel 라인 제한 해제
2. UILabel 에 추가할 제약조건 :
- UILabel Width = ScrollView Width
먼저, UILabel 의 텍스트가 좌,우로 꽉 차면 개행될 수 있게 설정합니다.
그리고, 수직 스크롤을 위해 UILabel 의 Width 를 ScrollView 와 동일하게 할당하겠습니다.
텍스트가 오른쪽 끝으로 다다르게되면 알아서 개행하게끔, UILabel 의 너비를 ScrollView 의 너비와 같게 설정합니다.
UILabel 의 높이를 설정하지 않으므로, UILabel 은 얼마든지 상,하로 늘어날 수 있습니다.
- UILabel 을 오른쪽마우스로 누르고 ScrollView 에 이어줍니다.
- 나타나는 팝업에서 'Equal Widths' 를 클릭합니다.
- 방금 'Equal Widths' 로 추가된 제약조건을 클릭합니다.
- 'Multiflier' 옵션을 1 로 할당합니다.
(UILabel 의 Width 는 ScrollView 의 Width 의 X 1 배율이라고 해석할 수 있습니다.)
이제 UILabel 의 텍스트를 길게 쓰고, 빌드해보겠습니다.
길어져서 넘쳐나는 텍스트는 수직스크롤로 확인할 수 있습니다.
