[iOS] Make Dynamic Island Timer

이번에 작성할 내용은

1. Dynamic Island 초기 설정 방법
2. Dynamic Island를 만들 때 필요한 요소
3. Dynamic Island에서 Timer 를 만드는 방법

입니다.

Dynamic Island 초기설정 방법

 

프로젝트 파일에서 iOS > Widget Extension Target을 추가해줍니다.

 

 

여기서 include LiveActivity 를 체크하고 Finish하면 Dynamic Island 파일 기본 세팅이 완료됩니다.

 

그리고 마지막으로 Widget Extension 타겟이 아니라 App Target 에서 Live Activity 권한을 허용해줘야합니다.

 

 

App Target Info.plist 에서 Supports Live Activities → Yes를 해주시면 끝입니다.

 

Dynamic Island를 만들 때 필요한 요소

 

 

Widget Extension을 생성하면 이렇게

1. Bundle
2. LiveActivity
3. Widget File (여기서는 WidgetExtension)

가 생성 됩니다.

Bundle

Bundle은 Widget Extension에 존재하는 Widget을 선언 해주는 곳입니다.

iOS 배경화면을 꾹 누르면 생성할 수 있는 위젯이나, 다이나믹 아일랜드 등을 여기서 선언해줍니다.

 

 

여기서 보면 위에서 아래로 순서가 있으며, 순서대로 사용자에게 보여집니다.

Live Activity

Widget Extension 을 생성했을 때 Live Activity를 추가하면 Live Activity 파일안에

• ActivityAttributes
• Live Activity Widget

이 생성되어 있습니다.

Activity Attributes는 Widget에서 사용되는 데이터들의 모델을 선언해주는 곳이라고 생각하시면 됩니다.

 

 

Attributes 안에 ContentState가 동적인 데이터를 표시할 때 사용하는 모델을 작성해주시면 되고,

바깥쪽에는 고정되어 있는 정적 데이터를 표시할 모델을 작성해주시면 됩니다.

 

 

 

Activity Configuration 의 첫번째 클로저에는 잠금화면 또는 배너에서 보이는 Live Activity UI를 선언해줍니다.

 

그리고 dynamicIsland 다음에 있는 클로저에는 Dynamic Island에서 사용되는 UI를 선언해줍니다.

 

Dynamic Island는 Expanded, Leading, Trailing, minimal 모든 타입에 맞게 UI를 만들어 줘야합니다.

Live Activity Manger(Controller)

 

App Target에 Dynamic Island를 시작하고 종료하는 Manager(Controller)를 생성해서 앱에서 사용하기 쉽게 만들 수 있습니다.

 

 

예를 들면 이렇게 버튼에서 Live Activity 시작 또는 종료를 할 수 있게 했습니다.

Dynamic Island에서 Timer 를 만드는 방법

Dynamic Island 에서 타이머 기능을 사용하기 위해 어떤 방법을 쓸까 고민을 했습니다.

 

처음 생각했던 방안이 Timer Manager를 따로 만들어서 타이머를 관리하고 그
“타이머의 시간을 Dynamic Island 로 보여줘야겠다.” 라고 생각했습니다.

 

이러한 방법은 시간, 포맷을 커스텀하기 쉽고 자유도가 높아서 좋았습니다.

 

하지만 문제는 백그라운드로 가는 순간 문제가 생깁니다.

Live Actvitiy는 백그라운드에서도 사용자가 앱의 실시간 현황을 파악하기 위한 용도인데,

타이머 객체가 백그라운드로 가는 순간 작동하지 않았습니다.

 

그러한 문제를 해결하기 위해 찾아낸 것이 Text View가 제공하는 기본 기능이었습니다.

https://developer.apple.com/documentation/swiftui/text/init(timerinterval:pausetime:countsdown:showshours:)

 

이 Text를 사용하면 Background 에서도 Timer가 끊기지 않고 잘 작동했습니다.

 

기타

https://stackoverflow.com/questions/77551496/is-it-possible-to-make-an-only-minutes-1m-countdown-in-a-live-activity

Is it possible to make an only minutes (1m) countdown in a Live Activity?

 

Text 를 사용해서 타이머를 개발했을 때 Trailing에 나오는 시간을 어떻게 Formatting 하는 방법에 대해 아시는 분이 계시다면 댓글로 알려주시면 감사드리겠습니다.

 

추가적인 질문 또는 피드백도 댓글로 해주시면 감사드리겠습니다.