# WWDC 2016 Making Apps Adaptive

## Part 1
**The system is going to do most of the work so you don't have to.**

다양한 폼팩터, 크기가 있고 가로든 세로든 여러 조합에 대해 적응형 앱을 사용자 정의할 수 있다.

다른 기기, 다른 화면 모드에 따라서 앱의 뷰들이 표시되는 방법을 정해줄 수 있다. (wChR..)
약 300가지 이상의 조합이 있음..
하지만 각 300가지 조합을 모두 생각할 필요가 없다! 대응하고자하는 조합에 대해서 사용자 정의 하면된다.

### Fundamental trait System
#### 1. Traits
특성 컬렉션(enum)
Size Classes / Dynamic Type / Layout Direction / Display Gamut / Interface Style / 3D Touch

trait: 앱이 실행되는 환경
정보를 제공하는 방식을 생각하여 제공(ipad, iphone)
Screen Size, Orientation, Adaptation

#### 2. Size Classes
* 사이즈 클래스
사이즈 클래스는 간접 계층이다.

h: 높이등급
w: 넓이등급
C: 컴팩트
R: 레귤러

기기마다 방향마다 조합이 다름 아래 표 참고
<img src="https://i.imgur.com/Qgs972k.png" width="500">

#### 3. Propagating Changes
`traitCollectionDidChange(_:)` 를 override하여 계층을 따라 변경사항을 전달하자.
IB, Asset catalog, UIAppearance는 해당 메서드에 반응함!

traitCollectionDidchange 를 오버라이드하여 trait 변경에 반응할 수 있다.

</br>

#### Size Class의 조합에 따라 View의 구성, 제약조건 등을 다르게 정의할 수 있다.

> <예시>
> Size Class 조합 (wRhR)일 경우: iPad에만 적용
> Size Class 조합 (wChR)일 경우: iPhone portrait / iPad split mode에 적용

<img src="https://i.imgur.com/WCXGB8M.png" width="500">

---

</br>

## Part 2

### Basics of Sizes and Size Classes

### Best Practices of Adaptive App
#### Xcode tools to get your app looking great faster
- Interface Builder
- Asset Catalogs

#### UIKit functionally to make it all easier
* Auto Layout
* UITraitCollection
* Dynamic Type
* Layout Guide
* UIAppearance

</br>

Interface Builder
- width / height / Compact / Regular를 조합한 size class를 attribute inspecter에서 +버튼을 통해 variation을 추가할 수 있다.

Asset Catalog
- 화면에 따라 이미지 버전을 다르게 사용한다. (@1x, @2x, @3x)

UITraitCollection
- 수평 및 수직 size class, 디스플레이 배율 및 사용자 인터페이스 idiom과 같은 특성을 포함한 앱의 iOS 인터페이스 환경.
- 특정 환경에 따라 View의 프로퍼티를 다르게 설정할 수 있다.

Dynamic Type
- UITraitCollection.preferredContentSizeCategory 속성을 사용하여 현재 앱의 폰트 크기에 대해 동적으로 font size를 알 수 있다.

Layout Guide
- readableContentGuide로 가독성이 좋은 이상적인 크기를 제공한다. layout margin guide를 넘어서 확장되지 않으며 사용자가 머리를 돌리지 않고도 텍스트를 읽기 쉽도록 한다.

UIAppearance
- `appearance(for:)`: TraitCollection을 지정하여 appearance를 커스터마이징할 클래스의 인스턴스를 추가로 세분화할 수 있다.

let image = UIImage(named: "image")
        
let verticalCompactTrait = UITraitCollection(verticalSizeClass: .compact)
let compactAppearance = UINavigationBar.appearance(for: verticalCompactTrait)
let noBackground = UINavigationBarAppearance()
noBackground.backgroundImage = nil

compactAppearance.setBackgroundImage(nil, for: .default)
compactAppearance.scrollEdgeAppearance = noBackground
compactAppearance.standardAppearance = noBackground

let verticalRegularTrait = UITraitCollection(verticalSizeClass: .regular)
let regularAppearance = UINavigationBar.appearance(for: verticalRegularTrait)

let background = UINavigationBarAppearance()
background.backgroundImage = image

regularAppearance.setBackgroundImage(image, for: .default)
regularAppearance.scrollEdgeAppearance = background
regularAppearance.standardAppearance = background

</br>

## 추가학습
### PNG / SVG
PNG는 픽셀 기반 그래픽 이미지로서 에셋에서 PNG로 이용할 경우, @1x, @2x, @3x 같이 스케일마다 파일이 필요합니다. 스케일 파일 없이 이미지를 확대하는 경우 이미지가 픽셀화되고 스케일이 커질 수록 파일의 크기가 늘어난다는 단점이 있습니다.

SVG는 XML 텍스트를 사용한 벡터 이미지로서 에셋에서 SVG 이미지를 사용할 경우 파일의 크기가 작은 장점이 있고 하나의 스케일 이미지만 필요합니다.

둘의 가장 큰 차이점은 확대를 했을 때, PNG 파일은 해상도 저하가 발생하고 SVG은 해상도가 저하되지 않는 다는 점 입니다. 다만 SVG는 픽셀이 부족하기 때문에 고품질 사진을 표현하기 어렵고 로고 같은 같단한 이미지에 적합합니다.