.swift 파일들은(AppDelegate.swift SceneDelegate.swift, ViewController.swift) 3주차 때 다루기로 하고 2주차는 .storyboard 파일에 집중해보자.
A
storyboardis a visual representation of the app’s user interface, showing screens of content and the transitions between them. You use storyboards to lay out the flow—or story—that drives your app. You see exactly what you're building while you’re building it, get immediate feedback about what’s working and what’s not, and make instantly visible changes to your user interface.
스토리 보드는 앱의 사용자 인터페이스를 시각적으로 표현하여 콘텐츠 화면과 화면 간의 전환을 보여줍니다.
This scene contains a single
viewthat’s managed by aview controller
View Controller의 왼쪽 화살표는 storyboard entry point로 다섯 번째 탭(Attribute)의 Is Initial View Controller가 체크되어 있다.
왼쪽 상단은 앱을 빌드 했을 때 시뮬레이터이다. 현재 Storyboard에 있는 화면과 다를 수 있다. Storyboard에 있는 화면은 하단 탭에서 선택할 수 있다. 작업할 때 한 가지 팁은, Storyboard에서의 기기와 실제 빌드 되는 기기 종류를 다르게 해보자. 내가 한 작업이 다양한 해상도를 고려하고 있는지 알 수 있다.
iOS 제공 기본 앱인 미리알림을 통해 UI를 구성해보자.
Controller
View Controller
View Controller는 application views, toolbars, navigation bars에 대한 View 관리 기능을 제공한다. (이 Controller를 주로 사용하게 된다고 한다.)
Navigation Controller
Storyborad Segue
Tab Bar Controller
Auto Layout
다양한 기기별 해상도, Orientation을 고려하여 화면을 구성하려면 Auto Layout을 이용하면 된다. Constraint를 설정해보자. 몇 가지 케이스들을 정리해보자. (참고로 아래에서 설명할 Stack View는 복잡한 Constraint 설정 없이 몇 가지 속성으로 Auto Layout 형태를 정의할 수 있다.)
우선 X, Y, Width, Height 설정은 기본이다.
IntrinsicContentSize
컨텐츠 고유 사이즈는 UILabel, UIButton, UIImageView 등 대부분의 뷰에 있습니다. 레이블을 만들 때 직접 너비와 높이를 지정하지 않아도 되는 이유가 바로 이 컨텐트 고유 사이즈가 있기 때문입니다. 이미지뷰 역시 이미지 크기에 맞게 컨텐트 고유 사이즈가 설정됩니다. 이렇게 대부분의 뷰들은 고유 사이즈, Intrinsic size를 가지며, 표시되는 내용이 변경될 때 이 값도 함께 변경됩니다. 하지만 컨테이너 역할을 하는 일부 뷰들은 고유 사이즈가 없기 때문에 예를 들어 UIView를 넣고 오토 레이아웃을 중앙으로 잡으면 오류가 일어납니다.
Greater than, Less than
View가 넘칠 경우를 고려해야 할 때 사용한다. 숫자가 길어지면 왼쪽에 있는 이미지를 뚫고 늘어날 것이다. 따라서 Image View의 Trailing + 20 ≤ Label의 Leading 을 통해 내가 원하는 바를 설정했다.
위 처럼 Edit 버튼을 통해 설정할 수도 있고 아래처럼 상세 화면에서 설정할 수도 있다. 
여기에선 Image View의 Trailing ≤ Label의 Leading -20 이다. (윗 내용이랑 같은 말임) 
Label이 길어질 때, Line Break 속성을 통해 어느 부분을 ... 처리할 것인지 선택할 수 있다.
Priority
Hugging 최대 크기에 제한을 두는 것
Compression Resistance 최소 크기에 제한을 두는 것
이곳이 제일 자세하게 설명되어 있는 듯
근데 아직 잘 모르겠다. Priority는 절대적인 width를 주지 않고 상대적인 길이만 줬을 때 유의미한 것인가?
우선 이렇게 정리해놓겠다.
View
Stack View
Stack View를 잘 활용하자. Stack View는 언제 사용하면 좋을까? 런타임 도중 동적으로 제거 / 추가 될 때 기존 View들의 레이아웃이 바뀌어야 하는 경우 Stack View를 활용하면 된다. 즉, View를 단순히 Hidden 처리해서 공간을 차지하도록 두는게 아니라 Hidden 처리 된 영역의 공간을 삭제하고 싶을 때(기존 레이아웃 형태가 삭제된 자리를 차지하고 싶을 때) 사용하면 된다. 이곳의 카카오톡 예시를 살펴보자.
Stack View는 여러 속성들을 통해 Constraint 설정을 할 수 있다.
Scroll View
Scroll View를 만들어보자.
View Controller 내부에 Scroll View를 넣으면 다음과 같은 계층이 생긴다.
Content Layout: 실제 내용 사이즈
Frame Layout: 눈에 보이는 사이즈
일반적으로 Scroll View 내부에 View를 넣어서 관리한다. 다음은 세로 스크롤을 기준으로 설명하겠다. (가로 스크롤 시 Width <-> Height를 하면 된다.)
View->Content Layout GuideLeading, Top, Trailing, Bottom 모두 맞추기. Constant를 0으로 고정하자.
View->Frame Layout GuideEqual Width 하기. (세로 스크롤 시)
View자체 Height를 설정한다.
다음과 같이 세로 스크롤이 생성된 것을 알 수 있다.
중첩 스크롤도 생성할 수 있다.
🪴 Reference
