WidgetKit : 고급 개발-2 부

소개

이것은 WidgetKit : Advanced development-Part 1 기사에서 새로운 iOS 위젯에 대한 다양한 고급 개발 기술을 살펴본 기사 의 연속입니다. 여기서는 위젯의 정적동적 구성 에 중점을두고 위젯 사용자 상호 작용을 구현할 것입니다.

위젯 구성

멋진 위젯을 만들었지 만 현재로서는 사용자에게이를 구성하는 방법을 제공하지 않고 있으므로 위젯 구성을 구현하는 방법을 살펴 보겠습니다.
1 부 예제의 이벤트 앱을 고수하면 사용자가 특정 유형의 이벤트에 관심이있을 수 있다고 상상할 수 있으므로 해당 유형의 이벤트 만 보여주는 것이 좋지 않을까요? 아마도 사용자는 영화 나 여행을 좋아하지만 예술이나 음악에는 관심이 없습니다. 이전 기사에서 우리는 모든 이벤트를 가져 왔고 이제 사용자가 위젯에 손가락을 대고 "위젯 편집"을 선택하기 만하면 위젯에 표시된 이벤트를 쉽게 필터링 할 수 있습니다 .

WidgetKit을 사용하면 두 가지 방법으로이를 수행 할 수 있습니다. 첫 번째는 간단한 정적 구성이고 두 번째는 더 복잡한 동적 구성입니다. 살펴 보겠습니다.

정적 위젯 구성

정적 위젯 구성은 매우 쉽고 간단합니다. 첫째, 정적 구성의 경우 구성 가능한 매개 변수와 사용할 수있는 관련 값을 제공하는 "하드 코딩 된"구성을 의미합니다.
모든 위젯은 다양한 유형의 매개 변수를 통해 구성 할 수 있으며 각 위젯은 자체 구성 상태를 저장합니다. 즉, 사용자는 홈 화면에 동일한 앱의 작은 크기 위젯 4 개를 가질 수 있으며 각 위젯은 다르게 구성됩니다.

구성 가능한 위젯을 사용하는 가장 쉬운 방법 은 위젯 확장을 프로젝트에 추가 할 때 구성 의도 포함 이 선택되어 있는지 확인하는 것입니다. 그렇게하면 위젯 확장이 포함되지 않은 위젯 확장과 관련하여 몇 가지 차이점을 알 수 있습니다.

  • 위젯의 공급자 클래스는 더 이상 TimelineProvider가 아니라 IntentTimelineProvider 이며 이는 getSnapshotgetTimeline 함수 에도 영향을줍니다 . 입력 선언의 시작 부분에 추가 된 매개 변수 인 구성 매개 변수가 표시됩니다.
  • TimelineEntry 클래스에는 이제 반짝이는 새 구성 속성이 있습니다.
  • .intentdefinition 파일 확장자를 사용하여 위젯 폴더에 새 파일이 생성되었습니다.

참고 : 인 텐트는 iOS 10.0부터 사용할 수 있었지만 대부분 Siri와의 상호 작용에 사용되었습니다. 꽤 큰 주제이지만 그것에 대한 다양한 기사를 쉽게 찾을 수 있습니다. 우리의 목적을 위해이 주제에 대해 너무 많이 알 필요가 없으므로 인 텐트를 사용한 적이 없더라도 두려워하지 마십시오.

Intent Editor에서 많은 매개 변수와 체크 박스를 볼 수 있지만 지금 확인하고 싶은 것은 Intent가 위젯에 적합 하다는 것뿐입니다 .

이제 구성을 추가하고 매개 변수 목록 아래에있는 + 버튼을 누릅니다. 매개 변수를 추가하고 목록에서 선택하면 해당 매개 변수에 적용된 많은 설정이 표시됩니다. 각 매개 변수는 고유 한 유형 (문자열, 부울, 열거 형 또는 새 유형)을 가질 수 있습니다 (동적 구성 단락에서이 유형을 볼 수 있음).

앞서 언급했듯이 사용자가 카테고리별로 표시되는 이벤트를 필터링 할 수 있도록하고 싶으므로 먼저 category 라는 매개 변수를 추가합니다 .

그런 다음 Type 드롭 다운을 열고 Add Enum을 선택 합니다.
Custom Intents 부분 아래의 왼쪽 메뉴에 이제 Enum과 새로 생성 된 Enum 이 표시됩니다. EventCategory 라고 부르겠습니다. 표시 이름은 "Event Category" 와 같은 간단한 이름 입니다. 우리가 완료되면, 우리는 같은이 열거의 경우 추가 할 수 있습니다 음악, 영화, 예술, 여행모든 :

위젯에 대한 정적 구성을 효과적으로 만들었습니다! 시뮬레이터를 실행하는 경우 위젯을 길게 누르고“ 위젯 편집 ”을 누르면 구성보기를 볼 수 있습니다.

참고 : 여기에서 볼 수 있듯이 이벤트 범주에 대해 "All"케이스가 이미 선택되어 있으므로 Intent Editor에서 기본값을 쉽게 설정할 수 있습니다.

보기는 좋지만 현재로서는 여전히 다소 쓸모가 없습니다. 카테고리를 변경해도 위젯에 표시되는 내용에는 전혀 영향을주지 않으므로 위젯이 구성으로 수행 할 작업을 이해할 수 있도록 코드를 추가해야합니다.
위젯 제공자로 돌아가서 , 우리가 사랑하는 getTimeline 함수 내부에 앞서 말했듯이 함수 선언에 구성 매개 변수가 있습니다.이 매개 변수를 사용하여 타임 라인 을 만드는 방식을 변경하면됩니다 .

여기에 우리가의 getTimeline는 이제 올바른 필터 설정 구성을 사용 EventsLoader을 하고 전화를 걸 그 반환 그냥 카테고리의 이벤트를!

참고 : Xcode가 configuration.category가 존재하지 않는다고 불평하는 경우 새 매개 변수를 인식 할 때까지 위젯 대상 빌드를 다시 실행하십시오.

앱을 실행하고, 동일한 패밀리의 위젯 3 개를 추가하고, 각 위젯을 다른 카테고리로 구성하면 3 가지 다른 결과를 가진 위젯 3 개를 얻을 수 있습니다.

동적 위젯 구성

정적 구성이 유용했지만 향후 이벤트 범주가 변경되면 어떻게됩니까? 아마도 백엔드에 HistoryNature 카테고리가 추가 될 수 있으며, 그럴 경우 앱 코드를 변경하고 앱을 다시 제출해야하며, 이전 버전의 앱을 사용하는 사용자는 업데이트 할 때까지 해당 카테고리가 없습니다. . 확실히 이상적이지 않습니다. 이 시점에서 동적 구성이 도움이됩니다.

동적 구성을 통해 필요한 경우 API에서 직접 가져 오는 다양한 값을 가정 할 수있는 사용자 구성 가능한 매개 변수를 제공 할 수 있습니다.

Intent Editor로 돌아가서 Enum 목록에서 EventCategory 열거 형을 제거하고 범주 매개 변수 유형에 대해 Add Type을 선택합니다 . 이제 새 유형의 이름을 지정할 수 있으며 다시 EventCategory 라고 부를 수 있습니다 .
보시다시피 위젯 편집보기에 표시 될 표시 이름을 다시 선택할 수 있습니다. 그 외에도 이제 미리 생성되어 수정할 수없는 identifier 및 displayString이라는 2 개의 속성도 있습니다. 예를 들어 String 유형의 value라는 새 매개 변수를 추가하기 만하면됩니다.

Xcode가 아무것도 불평하지 않는지 확인하면서 위젯을 구축해 보겠습니다 ( "Parameter voice-only prompt…"오류에 대해 불평하는 경우 구성의 매개 변수 목록에서 범주 매개 변수 로 돌아가서 "Siri can 실행할 때 가치를 요구하십시오 . ). 매개 변수 구성에서 "옵션이 동적으로 제공됨"
을 확인하십시오 (실제로 매개 변수 값을 제공 할 수 있도록하기 위해 필요함). 이제 비슷한 상황에 있어야합니다.

모든 것이 정상이어야합니다. 이제 타임 라인을 만들 때 해당 매개 변수를 사용하는 방법을 추가해야합니다. 정의 된 값이있는 열거 형이 아닌 지금 클래스를 사용하고 있기 때문에 이전과 같이 간단하지 않으며 위젯을 실행하면 위젯 구성보기에서 선택할 값을 볼 수 없습니다.

먼저 EventCategory 가 가정 할 수 있는 값을 위젯에 제공해야합니다 . 이를 위해서는 해당 값을 가져와 위젯에 제공하는 인 텐트 핸들러를 추가해야합니다.

선택 파일 -> 새로 만들기 -> 대상 다음 선택 텐트 확장. 다음 화면에서 " EventWidgetIntentHandler " 와 같은 이름을 제공하고 시작점으로 없음 을 선택 하고 UI 확장 포함선택 취소 되었는지 확인하십시오 . 계속하고 메시지가 표시되면 활성화 하도록 선택 하십시오.

이제 프로젝트에 Info.plistIntentHandler.swift 만 포함 된 새 폴더가 있습니다 .
먼저이 타겟이 어떤 유형의 인 텐트를 처리 할 수 ​​있는지 이해하도록해야합니다. 프로젝트 설정으로 이동하여 EventWidgetIntentHandler 대상을 선택하고 새 지원되는 인 텐트 항목 ConfigurationIntent를 추가하십시오 .

또한 위젯 .intentdefinition 파일 을 선택 하고 EventWidgetIntentHandler 대상에 추가해야합니다 .

이제 EventWidgetIntentHandler 폴더 에서 IntentHandler.swift 파일을 열고 ConfigurationIntent 를 올바르게 처리하는 데 필요한 ConfigurationIntentHandling 프로토콜을 IntentHandler 클래스에 추가합니다 .

class IntentHandler: INExtension, ConfigurationIntentHandling {
}

참고 : EventCategory 유형에 추가 한 속성은 매우 쓸모가 없지만 식별자와 이름 대신 사용자 지정 매개 변수를 사용하여 동적 구성을 구현하는 방법에 대한 더 나은 예를 제공하는 데 유용했습니다.

이제 애플리케이션을 실행하면 예상대로 백엔드에서 얻은 카테고리로 위젯을 구성 할 수 있습니다!

위젯 사용자 상호 작용

애플은 또한 위젯이 앱처럼 너무 많이 사용되지 않도록하기를 원했기 때문에 위젯과의 상호 작용이 탭 제스처로만 줄어 들었습니다.
기본적으로 사용자가 위젯을 탭하면 시스템은 앱을 열기 만하므로 앱이 시작 지점에서 나타나거나 백그라운드에있는 경우 포 그라운드로 돌아갑니다. 때로는 이것으로 충분하지만이 사용자 경험을 개선하는 것도 가능합니다.

언급했듯이 위젯은 크기가 다를 수 있으며 위젯의 크기도 지원하는 상호 작용에 영향을 미칩니다. 실제로 위젯이 작은 경우 상호 작용은 위젯의 어느 부분에서나 수행 할 수있는 단일 탭으로 축소됩니다. 대신 중형대형 크기에서 위젯의 다양한 부분을 탭할 때 다른 동작을 갖도록 설정할 수 있습니다.

이벤트 목록 예제로 돌아가 보겠습니다. 작은 위젯에서는 발생할 첫 번째 이벤트 만 표시하고 큰 위젯에서는 다음 세 가지 이벤트를 표시합니다.

이것은 허용되는 상호 작용을 이해하는 데 이상적인 설계입니다.

  • 사용자가 작은 위젯의 일부를 탭 하면 앱이 열리고 이벤트 세부 정보 (위젯에 표시되는 유일한 항목)가 표시됩니다.
  • 사용자가 위젯 내의 이벤트 중 하나를 탭 하면 앱이 열리고 표시되는 세부 정보 페이지가 사용자가 탭한 이벤트 중 하나가됩니다.

이를 구현하기 위해 swiftUI View .widgetURL (URL) 및 swiftUI 컨트롤 링크 의 새로운 메소드를 사용 하여 탭된 이벤트 세부 정보를 표시하는 매개 변수를 전달하는 앱을 엽니 다.

.widgetURL (URL) 사용

.widgetURL (URL)는 위젯이 도청 될 때 호출하는 URL (상관없이)를 정의하는 방법입니다. 위젯보기에서 한 번만 구현하면 모든 위젯 크기에서 사용할 수 있습니다. .widgetURL (URL)을
추가하는 것은 매우 간단합니다. 위젯 디자인이 포함 된 뷰가있는 경우 끝에 호출하면됩니다.

컨테이너 뷰가없는 경우 다음과 같이 ZStack에 추가하고 사용하면됩니다.

참고 : 이 예에서는 이벤트 [0]이 존재하는지 실제로 확인하지 않습니다. 전달 된 URL도 nullable이므로주의해야합니다. URL을 전달하지 않으면 위젯은 기본적으로 앱을 엽니 다. 행동.

링크 사용

링크 대신 언급 한 바와 같이, 위젯의 다른 tappable 영역을 정의하는 데 사용할 수있는 SwiftUI 컨트롤 만 작동하다 중간 크기입니다. 이벤트 배열이 있고 각 이벤트에는 자체 EventView가 있으며 (타일 / 셀을 의미 함) 탭할 때 이벤트 세부 정보가 표시되어야하는 앱에 신호를 보내야한다고 가정 해 보겠습니다.

참고 1 : 이 예제에서 내보기는 큰 위젯에 사용되며 위젯의 기본보기에서 확인하고 있습니다.

이제 앱에 대한 올바른 링크를 구현 했으므로 전달 된 URL도 처리해야합니다. 하지만 어디? Apple 문서에 따르면 앱의 수명주기에 따라 다릅니다. 기본적으로 시스템은 앱을 활성화하고 URL을 onOpenURL(perform:), to (_:open:options:)또는에 전달합니다. application(_:open:)이 시점은 저에게 명확하지 않았으므로 다음 단계는 iOS의 딥 링킹에 대해 자세히 알아 보는 것이지만 제가 한 일을 보여 드릴 수 있습니다 지금까지.

내 예제 앱에서 SceneDelegate 에서 URL을 받고 있습니다. 앱이 닫히면 수신 된 URL이 다음에서 처리됩니다.

앱이 이미 열려있는 동안 수신 된 URL은 다음에서 처리됩니다.

잘 작동하고 결과에 만족하지만 많이 개선 될 수 있다고 생각합니다.
Apple이 말했듯이 이것은 사용자 상호 작용 에 대한 응답 단락에서 볼 수 있듯이 기존 앱 수명주기 및 아키텍처에 따라 실제로 달라진다는 점도 명심할 가치가 있습니다 .

결론

위젯은 정말 멋지고 유연하며 Apple은 정말 멋지고 사용하기 쉬운 WidgetKit을 만들었습니다. 상황이 이미 좋은 시점에있는 것 같으며 곧 장치에 위젯이 추가 될 것입니다. 즉, 시뮬레이터를 다시 시작하면 대부분 수정 된 이상한 버그 (플래시 위젯, 비로드 위젯, 충돌)가 발생했습니다.
모든 것이 베타에서 나올 때 어떤 결과가 나올지 봅시다.

Roger Tan , Raynelle Alphonso , Nick HegartyBen Gilroy 에게 감사를 전합니다.

Suggested posts

Swift에서 느리게 이미지로드

의존성 주입을 잊지 마세요!

Swift에서 느리게 이미지로드

난이도 : 초급 | 쉬운 | 정상 | 이 기사는 Xcode 12.4 및 Swift 5를 사용하여 개발되었습니다.

금문교에 대한 완전 무작위 사실

금문교에 대한 완전 무작위 사실

금문교는 세계에서 가장 상징적 인 건축물 중 하나이며, 20 세기에 일어난 가장 인상적인 엔지니어링 업적 중 하나입니다. 1937 년 개통 당시에는 1964 년까지 유지되었던 세계에서 가장 긴 주경간을 가진 현수교가되었습니다.

Related posts

Swift— 프로토콜은 어떻게 작동합니까?

프로토콜과 위임은 Swift의 기본 개념입니다. 작동 방식과 사용 방법에 대해 알아 보려면이 빠른 가이드를 읽어보세요.

Swift— 프로토콜은 어떻게 작동합니까?

프로토콜은 Swift에서 매우 간단하지만 기본적인 개념입니다. 프로토콜은 코드 계약과 같습니다.

Mac App Store에없는 Mac에서 iOS / iPadOS 앱을 실행하는 방법

Mac App Store에없는 Mac에서 iOS / iPadOS 앱을 실행하는 방법

M1 칩을 실행하는 Mac이있는 경우 Mac App Store에 나열된 iOS / iPadOS 앱만 실행할 수 있습니다. 하지만 Mac App Store에 나열되지 않은 iOS / iPadOS 앱은 어떻습니까? 공식적으로는 할 수 없습니다.

더 접근하기 쉬운 오디오 플레이어

실명 및 시각 장애가있는 사람들을위한 공감력으로 구축하는 법 배우기

더 접근하기 쉬운 오디오 플레이어

작성자 : Francis Mariano, iOS 엔지니어 Headspace의 대담한 사명 선언문 인 세상의 건강과 행복을 개선합니다. 우리가 그곳에 사는 사람들의 다양한 경험을 인식하게 만드는 것.

SwiftUI를 사용하여 원 안에 텍스트를 표시하는 방법

SwiftUI를 사용하여 원 안에 텍스트를 표시하는 방법

이번에는 SwiftUI를 사용하여 원 안에 텍스트 레이블을 표시하는 몇 가지 방법을 살펴 보겠습니다. ZStack보기를 사용하여 세 가지 다른 방법을 자세히 살펴 보겠습니다.