Complications and widgets: Reloaded

[Lia316]

Complications and widgets: Reloaded

2022.09.22. 목

목차

1. Complication timeline (역사와 발전된 현재의 모습)
2. Colors (위젯이랑 complication에 입힐 색)
3. Project setup (위젯 만드는 법 & 기존 위젯을 watchOS로 옮기는 법)
4. Making glanceable views (더 작은 뷰 만드는 법)
5. Privacy (화면에서 위젯이 얼마나 보일 건지)

1. Complication timeline (역사와 발전된 현재의 모습)

Complication : 홈 화면 그리드를 통해 여는 앱의 일부 정보

• Circular, Corner, Inline, Rectangular 등의 종류가 있음

iOS 16, watchOS 9의 WidgetKit으로 두 플랫폼에서 모두 동작 가능한 위젯을 만들 수 있다.

그래서 WidgetFamily 에 accessory 로 시작하는 케이스들이 몇 개 추가됨

accessoryRectangular

• 여러 줄짜리 텍스트, 그래프, 차트 등을 보여주기에 좋음

accessoryCircular

• 간단한 정보, 게이지 progress view 보여주기 좋음

accessoryInline

• 텍스트만 가능
• 주로 시간을 보여줌

accessoryCorner

2. Colors (위젯이랑 complication에 입힐 색)

색상과 렌더링 모드

3가지 렌더링 모드

• full color
• accented
• vibrant

코드

(1) Full color

• 개발자가 지정한 대로 보여지는 색상 세트

(2) Accent

• 색상을 두 그룹으로 나눈다.
• .widgetAccentable() viewModifier를 통해 색상 그룹을 구분한다.

(3) Vibrant

• 먼저 채도를 낮춰서 흑백으로 만든다
• 잠금 화면에 적절한 색으로 바꾼다

• 가독성을 위해 이 모드에서 투명한 색 대신 더 어두운 색이나 검정을 사용하는 걸 권장

• AccessoryWidgetBackground view로 위젯에도 배경을 줄 수 있다
• full color 환경의 검정색이 부드럽게 투명화 됨

3. Project setup (위젯 만드는 법 & 기존 위젯을 watchOS로 옮기는 법)

4. Making glanceable views (더 작은 뷰 만드는 법)

Circular

• accessoryCircular 에 progressViewStyle 코드를 추가함
  • timeline entry를 많이 요구할 수 있지만, SwiftUI에서 새롭게 나온 auto-updating ProgressView를 사용하여 하나의 timeline entry만 요구할 수 있다.

Rectangular iOS & watchOS

• headline 폰트 → iOS와 watchOS의 폰트가 미묘하게 다르기 때문에 웬만하면 시스템 기본 폰트를 쓰는 게 좋다
• accent color → 이런 식으로 적용된다!

Inline

• Inline accesory는 시스템에서 정의된 색과 폰트로 지정된다
• 글자가 잘림

• ViewThatFits 를 사용하면 텍스트가 잘리지 않는 가장 첫번째 컨텐츠를 뷰로 선택함

5. Privacy (화면에서 위젯이 얼마나 보일 건지)

Unredacted & awake (편집x & 화면 켜짐)

• iOS는 기기가 잠겨 있는 동안에도 컨텐츠를 보여주는 게 디폴트 → 세팅에서 설정 가능!

Redacted & awake (편집 & 화면 켜짐)

• 세팅에서 설정 가능!

Unredacted & low luminance (편집x & 화면 밝기 낮음)

• watchOS에서는 워치를 차고 있는 한, 기기가 잠금 해제 상태
• 차고 있지 않으면 낮은 밝기로 always-on 상태
• 낮은 밝기라고 해서 컨텐츠를 숨기는 건 아님 → 세팅에서 설정 가능!

Redacted & low luminance (편집 & 화면 밝기 낮음)

• 낮은 밝기일 때 컨텐츠 숨김으로 설정 변경 가능!

• 워치에서 위젯은 always-on display 를 지원해야 한다
• \.isLuminanceReduced environment 값으로 always-on 모드에서 컨텐츠가 어떻게 보일지 설정할 수 있다
• always-on 모드에서는 낮은 빈도로 timeline entry를 지원해서 시간이나 progress view 등 시간에 민감한 컨텐츠가 낮은 정확도를 보일 수 있으니, 지양하자

• 프라이버시 모드에서는 TimelineProvider가 생성하는 placeholde view의 편집 버전을 보여준다
• .privacySensitive modifier를 사용해서 일부 뷰만 숨길 수 있다