개인 개발 프로그램에 위젯이 추가된 이야기

개시하다

안녕하세요.며칠 전 개인이 개발한 앱에 애플릿이 추가됐기 때문에 그 과정을 적어보려고 합니다.부품을 추가하고 싶은 분들의 참고가 되었으면 좋겠습니다.또한 SwiftUI의 기본 시나리오와 관련해서는 자신의과거의 보도 복제 후 바로 이동하는 것들이 많이 남아 있으니 참고하시기 바랍니다.또 쓴 사람은 앱 개발 작업을 한 적이 없다.치졸한 코드와 이해가 얕은 부분도 볼 수 있을 것 같은데 그때는 댓글 등에서 지적해 주세요.

응용 프로그램 소개

만원 컬러에서 색상을 선택해 RGB 값과 컬러 코드를 얻는 매우 간단한 앱이다.모두 SwiftUI로 제작되었습니다.소스 코드와 구성여기.에 대해 쓰여 있습니다.

1단계 Widget Extension 추가

Target에서 Widget Extension을 선택하여 사전과 같이 적합한 이름을 선택합니다.기본 디스플레이 시간의 위젯을 추가합니다.

다음은 시간을 표시하는 기능입니다.

struct TestWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Text(entry.date, style: .time)//ここ
    }
}

예를 들어 이 코드가 다음과 같을 때

struct TestWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text("あ")
            Circle()
        }
    }
}

이렇게 돼서

2단계에서 부품으로 모듈 파일 작성

앞에서 말한 바와 같이 EntryView에 부품을 직접 써서 모양을 바꿀 수 있지만, 대부분의 경우 다른 파일로 모듈을 만들어 EntryView에 넣을 수 있습니다.(한 파일로 모두 진행하면 오류가 발생합니다.)
Widget Extension의 그룹이 아니라 응용 프로그램 바디에 파일을 만들고 Target Membersip에 Extenision Widget을 추가합니다.

3단계 모듈을 부품으로 작성

여기서 진행하면 다음과 같습니다.

여기에서 미리 보기 화면을 위젯 크기로 변경할 수 있습니다.

import SwiftUI

struct TestWidget: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct TestWidget_Previews: PreviewProvider {
    static var previews: some View {
        Group {
        TestWidget()
            .previewLayout(.fixed(width: 160, height: 160.0))//変更した
        }
    }
}

애플릿의 크기는 터미널의 크기에 따라 미묘한 차이가 있지만 SE의 크기는 160이다.
여기서 만든 TestWidget을 EntryView에 넣습니다.

struct WidgetofColorDesignAppEntryView : View {
    var entry: Provider.Entry
    
    var body: some View {
        TestWidget()//変えた
    }
}

4단계 모듈의 매개 변수 설정

※ 제목의 매개 변수는 구조체의 저장 속성입니다.그러나 저장 속성의 값에 따라 화면이 바뀌기 때문에 매개 변수로 표시한다.
애플릿의 이념은'개성화','동태'이다.표시할 부품이 이러한 조건을 충족하려면 매개변수 설정이 중요합니다.
나의 경우 R, G, B 값이 저장된 [Int]형 변수를 매개 변수로 하여 이를 바탕으로 색, 숫자, 색 코드를 표시한다.

import SwiftUI

struct WidgetColorView: View {
    var RGBArray: [Int]
    
    func radixJudge (_ n:Int) -> String {
        if n <= 15 {
            return "0"+String(n,radix: 16)
        } else {
            return String(n,radix: 16)
        }
    }
    
    
    var body: some View {
        VStack {
            Spacer()
                HStack {
                    WidgetView(rValue: RGBArray[0], gValue: RGBArray[1], bValue: RGBArray[2])
                    VStack(alignment: .leading, spacing: 8) {
                        HStack {
                            Circle()
                                .foregroundColor(Color.init(UIColor(red: 1, green: 0, blue: 0, alpha: 1)))
                                .frame(width: 18, height: 18)
                                
                            Text("\(RGBArray[0])")
                        }
                        
                        HStack {
                            Circle()
                                .foregroundColor(Color.init(UIColor(red: 0, green: 1, blue: 0, alpha: 1)))
                                .frame(width: 18, height: 18)
                            Text("\(RGBArray[1])")
                        }
                        HStack {
                            Circle()
                                .foregroundColor(Color.init(UIColor(red: 0, green: 0, blue: 1, alpha: 1)))
                                .frame(width: 18, height: 18)
                            Text("\(RGBArray[2])")
                        }
                    }
                }
            Spacer()
                Text(self.radixJudge(self.RGBArray[0])+(self.radixJudge( self.RGBArray[1]))+(self.radixJudge(self.RGBArray[2])))
                    .fontWeight(.bold)
                    .font(.largeTitle)
            Spacer()
        }
    }
}

struct WidgetColorView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            WidgetColorView(RGBArray: [0,0,0])
                .previewLayout(.fixed(width: 160, height: 160.0))
        }
    }
}

또한 이 모듈에서 사용하는 정사각형은 다른 파일로 제작되었다.
이 모듈은 R, G, B 세 정수를 변수(스토리지 속성)로 설정합니다.
이미지

import SwiftUI
import Foundation

struct WidgetView: View {
    var rValue: Int
    var gValue: Int
    var bValue: Int
    
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.init(UIColor(red: CGFloat(rValue)/CGFloat(255), green: CGFloat(gValue)/CGFloat(255), blue: CGFloat(bValue)/CGFloat(255), alpha: 1)))
                .frame(width: 160/2, height: 160/2, alignment: .center)
        }
    }
}

struct WidgetView_Previews: PreviewProvider {
    static var previews: some View {
        WidgetView(rValue: 20, gValue: 84, bValue: 128)
    }
}

5단계 App Groups 설정

이 프로그램의 위젯 기능은 즐겨찾기 폴더에 마지막으로 저장된 색을 표시하는 것입니다.저장 방법은 UserDefaults를 사용하기 때문에 앱과 애플릿이 통용하는 앱 그룹을 설치했다.
Signing & Capabilities->+ Capability에 App Groups를 추가합니다.

그리고 개발자의 이름과 주소에 따라 결정되는 것을 그룹 이름에 추가합니다.

6단계 타임라인에 입력한 값 설정하기

마침내 진정으로 부품으로 옮기는 설정.getTimeline에서 모듈 매개 변수에 사용할 변수를 정의하고 UserDefaults에서 가져온 값을 변수에 대입합니다.

let userDefaults = UserDefaults(suiteName: "*****")
let lastSoterdArray = userDefaults?.array(forKey: "storedArray") as? [[Int]]

단계 7TimelineEntry에서 매개변수 설정

SimpleEntry 기본 설정은 다음과 같습니다.

struct SimpleEntry: TimelineEntry {
    let date: Date
    let configuration: ConfigurationIntent
}

방금 모듈의 매개 변수 유형을 지정합니다.

struct SimpleEntry: TimelineEntry {
    let date: Date
    let configuration: ConfigurationIntent
    let lastStoredArray: [[Int]]//追加した
}

일 경우 설정placeholder 또는 getSnapshot에 추가된 수치의 초기 값에 오류가 발생하므로 적절한 값을 설정합니다.나는 거의 쓸 수 없는 값이라고 생각해서 []을 선택했다.
중요한 것은 getTimeline입니다.여기에도 entry의 값을 설정해야 하기 때문에 적당한 값을 설정해야 한다.이 값은 부품을 처음 추가할 때 사용됩니다.

let entry = SimpleEntry(
                date: entryDate,
                configuration: ConfigurationIntent(),
                lastStoredArray: lastStoredArray ?? [[0,0,0]]
            )

나는 위처럼 했다.

8단계에서 해당 부품의 크기 설정

최소 크기의 위젯만 사용했기 때문에 사용자가 선택할 수 있도록 설정합니다.supportedFamilies 스토리지에 해당되는 크기입니다.

struct WidgetofColorDesignApp: Widget {
    let kind: String = "WidgetofColorDesignApp"

    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind,
                            intent: ConfigurationIntent.self,
                            provider: Provider()) { entry in
            WidgetofColorDesignAppEntryView(entry: entry)
        }
        .supportedFamilies([.systemSmall])//追加した
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

완성!
이미지 등으로 설명하지 않고 심사를 제출한 곳은 탈락했고, 이후 이미지와 설명을 더해 제출한 곳은 통과됐다.
글의 첫머리에 쓴 바와 같이 잘못된 점이 있으면 메시지를 남겨 주십시오🙇‍♂️

참고 자료

동영상은 역시 이해하기 쉽다.
https://medium.com/swlh/build-your-first-ios-widget-part-1-d2cecdd4020a
영어지만 여기도 자세하게 정리되었다.