iOS16 lock screen widget development

foreword

Solving the problem of how to add a lock screen widget is actually very simple. It is to add 3 WidgetFamily types to support the lock screen widget on the basis of the desktop widget. We only need to support the WidgetFamily and the view.

illustrate

iOS16 has added the editing function of the lock screen. There are two areas where widgets can be placed. WidgetFamily also adds three types : accessoryInline , accessoryRectangular , and accessoryCircular . The corresponding relationship is shown in the figure below:

一、accessoryInline

The accessoryInline type widget can only be placed in the top widget area, and only one line of Image and Text can be placed with a fixed length. There must be one on the leftsystem date。

二、accessoryRectangular、accessoryCircular

accessoryRectangular and accessoryCircular can only be placed in == the lower widget area (1x4) == arrangement and combination.
accessoryRectangular shape is a rounded rectangle, the content is a rectangle,Occupy 1x2So put at most 2. There is a certain margin between top, bottom, left, and right, and it is not filled.
accessoryCircular shape is a rounded square, the content is a circle,Occupy 1x1So put up to 4. There is a certain margin between top, bottom, left, and right, and it is not filled.

limit

1. The refresh mechanism still continues the refresh mechanism of desktop widgets.
2. The color settings of text and pictures are invalid, and they will be rendered in the same color as the system time on the lock screen widget, but the color settings will result in different shades of colors.
3. accessoryInline can only display Image and Text , and accessoryRectangular and accessoryCircular can also display some ProgressView .
4. The size is very small, and the position is fixed, and the displayed content is limited.
5. It is impossible to long press to open the editing page behind like a desktop widget, and use SiriIntent to provide user configuration, and the degree of freedom is small.

the code

It only needs to be supported in the supportedFamilies attribute of the Widget entry

@main
struct MyWidget: Widget {
    
    
    let kind: String = "MyTWidget"

    var body: some WidgetConfiguration {
    
    
        StaticConfiguration(kind: kind, provider: Provider()) {
    
     entry in
            WidgetEntryView(entry: entry)
        }
        .configurationDisplayName("xxx")
        .description("xxx")
        // 在这里支持小组件类型
        .supportedFamilies([.accessoryInline, .accessoryRectangular, .accessoryCircular])
    }
}

Views can use @Environment(.widgetFamily) var family to distinguish sizes and write different views.

struct WidgetEntryView : View {
    
    
    var entry: Provider.Entry
    @Environment(\.widgetFamily) var family // 尺寸环境变量
    var body: some View {
    
    
        switch family{
    
    
        case .accessoryInline :
            Text("顶部文字")
        case .accessoryCircular :
            Text("1x1组件")
        case .accessoryRectangular :
            Text("1x2组件")
        default :
            Text("默认")
        }
    }
}

If your project target system is iOS14 , Widget also supports iOS14 desktop widgets, you can use version judgment to distinguish supportedFamilies

func getWidgetSupportedFamilies () -> [WidgetFamily]{
    
    
    if #available(iOS 16, *) {
    
    
        return [.accessoryInline, .accessoryRectangular, .accessoryCircular, .systemSmall]
    } else {
    
    
        return [.systemSmall]
    }
}

@main
struct MyWidget: Widget {
    
    
    let kind: String = "MyTWidget"

    var body: some WidgetConfiguration {
    
    
        StaticConfiguration(kind: kind, provider: Provider()) {
    
     entry in
            WidgetEntryView(entry: entry)
        }
        .configurationDisplayName("xxx")
        .description("xxx")
        // 在这里支持小组件类型
        .supportedFamilies(getWidgetSupportedFamilies())
    }
}

If you need a frosted glass background like an alarm clock, you can use AccessoryWidgetBackground()

struct WidgetEntryView : View {
    
    
    var entry: Provider.Entry
    @Environment(\.widgetFamily) var family // 尺寸环境变量
    var body: some View {
    
    
        switch family{
    
    
        case .accessoryInline :
            Text("顶部文字")
        case .accessoryCircular :
        	ZStack {
    
    
          		AccessoryWidgetBackground()
            	Text("1x1组件")
         	}
        case .accessoryRectangular :
            Text("1x2组件")
        default :
            Text("默认")
        }
    }
}

references

I am a novice, please correct me if I make mistakes, and look forward to communicating and developing with everyone.

"Apple-creating-a-widget-extension"
"Apple-widgetfamily"
"Apple-Creating Lock Screen Widgets and Watch Complications" "
iOS14 Widget Development Stepping Pit (1) Revised Version - Initial Identification and Refresh"
"iOS14WidgetKit Development Practice 1- 4》