iOS Widget

생성일

2024/08/01 07:34

태그

지혜로운 회사생활

Swift Widget

간단 사용법

File → New → Target → Widget Extension 생성

•

Live Activity(Dynamic island) 여부와, Intent 구성(기초 설정)을 포함할 것인지도 설정 가능

•

scheme 또한 추가 가능

위젯 폴더 파헤치기

1. Bundle (MyWidgetBundle.swift)

// MyWidgetBundle.swift
import WidgetKit
import SwiftUI

@main
struct MyWidgetBundle: WidgetBundle {
		var body: some Widget {
				MyWidget()
		}
}
Swift
복사

•

Widget 프로토콜을 채택한 구조체를 넣어줄 수 있다.

•

여러 유형의 위젯을 지원하려면 여기에 속성을 추가해줄 수 있다.

공식문서 예)

게임에는 게임에 대한 요약 정보를 표시하는 위젯 하나,
개별 캐릭터에 대한 디테일한 정보를 표시하는 위젯 하나,
이렇게 WidgetBundle에 있을 수 있다.

@main
struct GameWidgets: WidgetBundle {
		var body: some Widget {
				GameStatusWidget()
				CharacterDetailWidget()
		}
}
Swift
복사

2. MyWidget

해당 파일로 들어가보면 다양한 구조체들이 추가가 되어있다.

struct Provider: IntentTimelineProvider {}
struct SimpleEntry: TimelineEntry {}
struct MyWidgetEntryView: View {}
struct MyWidget: Widget {}
Swift
복사

Provider

•

위젯의 컨텐츠를 업데이트할 날짜와 시간을 지정하고, 위젯을 렌더링하는 데 필요한 데이터를 포함한다.

세 가지 함수가 존재

•

placeholder

func placeholder(in context: Context) -> SimpleEntry {
		SimpleEntry(date: Date(), configuration: ConfigurationIntent())
}
Swift
복사

◦

위젯이 데이터를 받기 전 기본적으로 화면에 보여주여야 할 값들을 설정하는 함수

◦

현재 시간에 대한 date와 configuration을 생성해 보여주고 있는 모습

•

getShapshot

func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
		let entry = SimpleEntry(date: Date(), configuration: configuration)
		completion(entry)
}
Swift
복사

◦

위젯을 고를 때 미리보기에서 보여지는 데이터들을 설정하는 단계

◦

이미 나타난 경우 completion을 호출하고, 위젯의 현재 상태를 가져오거나 오래 걸릴 경우, 샘플 데이터를 제공해 보여줄 수도 있다.

•

getTimeline

func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
		var entries: [SimpleEntry] = []
		let currentDate = Date()
		
		for hourOffset in 0..<4 {
				let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
				let entry = SimpleEntry(date: entryDate, configuration: configuration)
				entries.append(entry)
		}
		
		let timeline = Timeline(entries: entries, policy: .atEnd)
		completion(timeline)
}
Swift
복사

◦

현재 시간과 선택적으로 위젯을 업데이트 할 때 미래의 시간에 대한 타임라인 항목 배열을 제공한다.

◦

업데이트를 언제 진행할 것인지에 대한 정보를 담고 있는 메서드

현재 코드는 0~3을 포함한 반복 횟수 만큼의 시간을 entry에 담고 이를 Timeline으로 만들어 업데이트를 진행하는 코드이다.

즉각적으로 반응하는 위젯을 만들고 싶지만 그럴 수 없다,, 왜?

위젯이 화면에 표시되어 있어도 위젯은 계속 활성화 되지 않는다.
정해진 예산 내에서의 리로딩 계획이 필수적으로 보임.
위젯을 다시 로드하면 시스템 리소스가 소모되고, 네트워크 처리가 추가적으로 들어가 있다면 배터리 소모가 발생하게 된다.
따라서 이러한 성능 영향을 줄이고, 배터리 수명을 하루종일 유지하기 위해서는 요청하는 업데이트의 빈도와 횟수를 제한해야 한다.

WidgetKit은 시스템 로드를 관리하기 위해 정해진 예산을 사용하여 하루 동안 위젯을 다시 로딩하고 배포하는 과정을 거친다.
이 예산이 얼마나 주어질지는 동적으로 계산되며, 다음을 포함하는 다양한 요소를 고려해야 할당이 된다.

- 위젯이 사용자에게 표시되는 빈도와 시간
- 위젯을 마지막 새로고침한 시간
- 위젯이 포함된 앱이 활성 상태인지

할당된 위젯의 예산은 24시간 동안만 적용된다.
또한 사용자의 일일 사용 패턴에 맞게 조절하게 된다.
그렇다고 해서 예산이 정확히 자정에 초기화 되는 것은 아닌데, 애플에 따르면 사용자가 자주 보는 위젯의 경우,
일일 예산에는 보통 40~70회의 새로고침이 포함된다고 한다.
대략적으로 15분~60분 마다 위젯을 다시 새로고침 하는 것으로 해석이 되지만, 여러 요인으로 인해 간격이 달라진다.

→ 시스템이 사용자의 행동을 학습하는 것에는 시간이 걸린다. → 이 학습 기간 동안 위젯은 평소보다 더 많은 새로고침을 진행할 수 있다.

func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
		var entries: [SimpleEntry] = []
		let currentDate = Date()
		
		for hourOffset in 0..<4 {
				let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
				// 현재 시간에 value 만큼의 시간을 더한 값을(0~3)
				
				let entry = SimpleEntry(date: entryDate, configuration: configuration)
				entries.append(entry)
				// 이 entry 객체에 넣어준 후 배열에 append 시켜준다.
		}
		
		let timeline = Timeline(entries: entries, policy: .atEnd)
		completion(timeline)
		// 이후 entries 배열을 통해 Timeline을 만들고 completion을 통해 호출한다.
		// .atEnd을 통해 마지막 date가 끝난 후, 타임라인을 reload 해줄 수 있다.
}
Swift
복사

◦

그림을 보면 초기 위젯이 화면에 보여지고, 이를 reload해서 Provide timeline으로 흘러들어온다.

◦

우리의 배열에 초창기 now 값은 0을 더한 값인 현재시간이 된다.

◦

배열의 마지막번 째에 도달했기 때문에 Provider는 현재 시간에 대한 단일 항목으로 설정호딘 새로고침 정책으로 응답하게 된다.

◦

마무리 되면 새 타임라인을 요청하도록 지시할 때까지 다른 타임라인을 요청하지 않는다.

•

새로운 타임라인도 만들 수 있다.

◦

예) 주식

◦

주식 개장은 주말에는 진행하지 않는다. 따라서 금요일의 장 시간 마지막날에 날짜를 지정해서 주말을 스킵할 수 있다.

◦

이러한 결과로 주식시장이 열릴 때까지 위젯을 업데이트할 필요가 없다.

let timeline = Timeline(entries: entries, policy: .after(date: Date))
Swift
복사

◦

기존 .atEnd 에서 .after로 바꿔준다면 해당 Date 날짜가 지난 후 타임라인을 리로딩하게 수정할 수 있는 것 

SimpleEntry

struct SimpleEntry: TimelineEntry {
		let date: Date
		let configuration: ConfigurationIntent
}
Swift
복사

•

기본적으로 TimelineEntry 프로토콜을 채택해야 한다.

•

필수 구현 프로퍼티로는 date가 있다.

•

위젯에 표시할 날짜를 지정하고 타임라인 항목을 생성하기 위해 필요하다. configuration은 필수로 구현하지 않아도 된다.

•

위젯 extension을 할 때, Configuration Intent를 체크 했다면 자동적으로 따라 붙게 된다. 해당 프로퍼티는 동적으로 뷰를 구성할 때 필요하다.

WidgetEntryView

struct MyWidgetEntryView: View {
		@Environment(\.wigetFamily) var family: WidgetFamily
		var entry: Provider.Entry
		
		var body: some View {
				switch family {
				case .systemSmall:
						SmallView()
				case .systemMedium:
						MediumView()
				case .systemLarge:
						LargeView()
				default:
						Text("None")
				}
		}
}
Swift
복사

•

렌더링 되어서 실제로 보여줄 뷰를 구성하는 구조체

•

WidgetFamily 라는 것을 통해 다양한 사이즈의 뷰를 구성할 수 있다.

•

여기서 엔트리를 받아 해당 뷰에 주입할 수 있다.

Widget

struct MyWidget: Widget {
		let kind: String = "MyWidget"
		
		var body: some WidgetConfiguration {
				IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
						MyWidgetEntryView(entry: entry)
				}
				.configurationDisplayName("My Widget")
				.description("This is an example Widget.")
		}
}
Swift
복사

•

kind에는 위젯의 id를 작성할 수 있다.

•

intent에는 어떤 것을 동적으로 작동하는지에 대해 설정할 수 있다.

•

provider에는 위에서 말한 Provider를 주입시키고, entry 또한 주입시킬 수 있다.

•

configurationDisplayName을 통해 위젯 갤러리라고 불리는 위젯 추가하는 화면에서의 상단에 위치한 타이틀 이름을 설정할 수 있다.

•

description 또한 마찬가지로 해당 크기의 위젯에 대한 설명 또는 전역적인 설명을 추가할 수 있다.

entry를 작성할 때, configuration을 봤을 텐데, 해당 네이밍은 위 파일에서 파생되어 나오게 된다.