UIScrollView 간단 설정하기

에스·2020년 12월 16일
0
  1. UIScrollView를 원하는 영역에 드래그 한 후 Leading(Left), Tailing(Right), Top, Bottom을 제약을 추가한다. 기본적으로 0으로 설정하지만 원하는 간격이 있다면 값을 적용해도 상관없다. 이하 완료 시점까지 오류를 표시하는 빨간 화살표가 보일 것이지만 신경쓰지 말자.

  2. UIScrollView 안에 UIView, UIStackView 등 원하는 뷰(이하 UIView로 갈음)를 드래그한다.

  3. 스토리보드 화면 내 좌측 UI Navigation Pane에서 UIView를 선택한 후 control키를 누른 채로 드래그해서 UIScrollView의 Content Layout Guide로 이동하면 나오는 하위 메뉴에서 다음을 추가한다.

  • Leading Space to Content Layout Guide
  • Trailing Space to Content Layout Guide
  • Top Space to Content Layout Guide
  • Bottom Space to Content Layout Guide

  1. 3번과 동일하게 이번에는 Frame Layout Guide로 이동해서 다음 중 하나를 추가한다.
  • Equal Widths (상하 스크롤 시)
  • Equal Heights (좌우 스크롤 시)
  1. 자동 지정된 제약조건의 값을 조정한다. 스토리보드 화면 내 우측 Utility Pane 상단의 Inspector bar 메뉴 여섯번째이자 삼각자 모양 아이콘인 Size Inspector을 눌러 Horizontal, Vertical 부분의 Contraint 옆의 Edit를 눌러 값을 수정한다. Proportional의 경우 값 변경시 Eqaul로 자동 수정된다.

  • Align Leading to의 Constant 항목: 0 또는 원하는 여백
  • Align Trailing to의 Constant 항목: 0 또는 원하는 여백
  • Align Top to: 0의 Constant 항목 또는 원하는 여백
  • Align Bottom to의 Constant 항목: 0 또는 원하는 여백
  • Proportional Width to의 Multiplier: 1 (상하 스크롤 시)
  • Proportional Height to의 Multiplier: 1 (좌우 스크롤 시)
  1. 스크롤 뷰 설정이 완료되었다. 여전히 오류를 표시하는 빨간 화살표가 보일 것이지만 이것은 UIView의 높이를 지정하는 제약조건이 생기면 사라진다. 그 예시는 다음과 같다.
  • UIView의 Height 값을 지정한다.
  • UIView 내부에 UILabel을 추가하고, 그 UILabel에 Leading, Trailing, Top, Bottom Align 제약조건을 추가한다.
  • UIView 내부에 UILabel을 추가하고, 그 UILabel에 Leading, Trailing, Top, Height (좌우 스크롤시 Leading, Top, Bottom, Width) 제약조건을 추가한다.
  • UIView 대신 UIStackView를 사용하고 내부에 UILabel을 추가한다, 등.
  1. 스크롤 기능은 스크롤이 가능한 경우에만 동작한다. 위 방법을 제대로 설정했는지 알고 싶다면 가장 간단한 방법으로는 UIView의 Width 또는 Height 값을 3000 등 화면 길이 이상으로 설정하는 방법이 가장 간단하다.

0개의 댓글