iOS widget 小组件开发

Github地址

项目选择对应语言项目小组件部分 Github地址 https://github.com/HahnLoving/iOS_Study

iOS 多个widget调试问题

iOS 多个widget调试问题
https://www.jianshu.com/p/d0993b2c6e34

iOS widget 小组件 秒级刷新
https://www.jianshu.com/p/40d631f32260

创建项目

1.png

2.png

widget 代码说明

Provider

struct Provider: TimelineProvider {
    // 占位视图，例如网络请求失败、发生未知错误、第一次展示小组件都会展示这个view
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date())
    }

    // 定义Widget预览中如何展示，所以提供默认值要在这里
    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date())
        completion(entry)
    }

    // 决定 Widget 何时刷新
    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        // Generate a timeline consisting of five entries an hour apart, starting from the current date.
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

SimpleEntry

// 渲染 Widget 所需的数据模型，需要遵守TimelineEntry协议
struct SimpleEntry: TimelineEntry {
    let date: Date
}

MainWidgetEntryView

// 渲染的view
struct MainWidgetEntryView : View {
    var entry: Provider.Entry

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

MainWidget

@main
struct MainWidget: Widget {
    // 主件唯一标识符
    let kind: String = "MainWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            MainWidgetEntryView(entry: entry)
        }
        // 标题
        .configurationDisplayName("My Widget")
        // 详情
        .description("This is an example widget.")
        // 枚举设置
        .supportedFamilies([.systemMedium, .systemSmall, .systemLarge])
    }
}

MainWidget_Previews

// SwiftUI Xcode 测试预览视图
struct MainWidget_Previews: PreviewProvider {
    static var previews: some View {
        MainWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

效果图

3.jpg

widget 分组

widget 有多组和单组区别。
单组包含 小，中，大，特大(iOS 15)
多组包含 小，小，小

单组的例子如系统的天气widget包含小，中，大三个组件

4.jpg

5.jpg

6.jpg

多组以支付宝为例子。包含两个小的组件

7.jpg

8.jpg

单组件适配开发

MainWidgetEntryView

// 渲染的view
struct MainWidgetEntryView : View {
    var entry: Provider.Entry
    
    // 判断小组件的类型
    @Environment(\.widgetFamily) var family: WidgetFamily

    var body: some View {
//        Text(entry.date, style: .time)
        switch family {
        case .systemSmall:
            VStack(alignment: .center, spacing: 0) {
                Text("小")
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }
        case .systemMedium:
            VStack(alignment: .center, spacing: 0) {
                Text("中")
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }
        default:
            VStack(alignment: .center, spacing: 0) {
                Text("大")
                Spacer().frame(height: 20)
                Text(entry.date, style: .time)
            }
        }
    }
}

效果图

9.jpg

10.jpg

多组件开发 WidgetBundle

多组件开发使用了 WidgetBundle
下面用了以下5个案例讲解多组件开发
1.网络请求 NetWorkData
2.网络图片 NetWorkImage
3.编辑小组件 Edit
4.和app本地数据进行交互和点击交互 AppData

MainWidget
先注释全部代码

import WidgetKit
import SwiftUI
import Intents

struct SimpleEntry: TimelineEntry {
    public let date: Date
}

struct PlaceholderView : View {
    //这里是PlaceholderView - 提醒用户选择部件功能
    var body: some View {
        Text("Place Holder")
    }
}

@main
struct MainWidget: WidgetBundle {
    @WidgetBundleBuilder
    var body: some Widget {
//        OneWordWidget()
//        FristWidget(title: "hahn", desc: "hahn1")
//        CountDownWidget()
//        Demo(title: "Demo", desc: "Demo")
        NetWorkData(title: "网络请求小组件", desc: "网络请求小组件列表")
        NetWorkImage(title: "网络图片小组件", desc: "网络图片小组件列表")
        Edit(title: "编辑小组件", desc: "编辑小组件列表")
        AppData(title: "app数据交互小组件", desc: "app数据交互小组件列表")
    }
}

新建分组的widget

新建SwiftUI文件

11.png

新建 SirKit Intent Definition File 文件

12.png

记得勾选这两个，不然会无法编辑的

13.png

新建 Intent

14.png

Title就是你对应Widget 名字
Category 选择View
勾Widgets

15.png

网络请求 NetWorkData

先按照上面的步骤创建 NetWorkData 的widget 和 Intent文件

注意需要info.plist设置可以网络请求。如果主项目没有网络请求，先做一次网络请求。
我这里使用了Moya 框架进行Api 请求。

为widget 扩展添加pod

platform :ios, '14.0'
use_frameworks!
inhibit_all_warnings!

source 'https://github.com/CocoaPods/Specs.git'

target 'StudySwiftUI' do

# swift
end

# Extension 名字  在Targets里面可以查看名字
target 'MainWidgetExtension' do
  pod 'ObjectMapper'
  pod 'Moya'
  pod 'ObjectMapper'
  pod 'HandyJSON'
  pod 'SwiftyJSON'
end

请求的json 结构如下

{
    "items":[
        {
            "title":"Quiz for Designing",
            "subTitle":"834 questions in tottal",
            "icon":"tlIconDesign1",
            "correctRate":80,
            "submit":48,
            "starCount":4
        },
        {
            "title":"Quiz for Coding",
            "subTitle":"1000 questions in tottal",
            "icon":"tlIconMobile1",
            "correctRate":98,
            "submit":68,
            "starCount":5
        },
        {
            "title":"Quiz for Officing",
            "subTitle":"569 questions in tottal",
            "icon":"tlIconOffice1",
            "correctRate":60,
            "submit":43,
            "starCount":3
        },
        {
            "title":"Quiz for Painting",
            "subTitle":"321 questions in tottal",
            "icon":"tlIconDesign2",
            "correctRate":87,
            "submit":48,
            "starCount":5
        }
    ]
}

使用HandyJSON 创建Model

import Foundation
import HandyJSON

struct ZModel: HandyJSON {
    var items: [ZQuiz] = []
}

struct ZQuiz: HandyJSON {
    
    var title : String = ""
    var subTitle : String = ""
    var icon : String = ""
    var correctRate : Int = 0
    var submit : Int = 0
    var starCount : Int = 0
}

我们取json数组第一个字典的title渲染出来

NetWorkData.swift

import WidgetKit
import SwiftUI
import Intents

struct NetWorkDataProvider: IntentTimelineProvider {
    func placeholder(in context: Context) -> NetWorkDataEntry {
        NetWorkDataEntry(date: Date(), configuration: NetWorkDataIntent(), displaySize: context.displaySize, model: ZModel())
    }

    // 定义Widget预览中如何展示，所以提供默认值要在这里
    func getSnapshot(for configuration: NetWorkDataIntent, in context: Context, completion: @escaping (NetWorkDataEntry) -> ()) {
        let entry = NetWorkDataEntry(date: Date(), configuration: configuration, displaySize: context.displaySize, model: ZModel())
        completion(entry)
    }

    // 决定 Widget 何时刷新
    func getTimeline(for configuration: NetWorkDataIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        
        // API请求
        NetWorkRequest(API.getQuizListApi, modelType: ZModel.self) { (model, responseModel) in
            // 每隔2个小时刷新。
            let entry = NetWorkDataEntry(date: Date(), configuration: configuration, displaySize: context.displaySize, model: model)
                // refresh the data every two hours
            let expireDate = Calendar.current.date(byAdding: .hour, value: 2, to: Date()) ?? Date()
            let timeline = Timeline(entries: [entry], policy: .after(expireDate))

            completion(timeline)

        } failureCallback: { (responseModel) in

            
        }
        
    }
}

struct NetWorkDataEntry: TimelineEntry {
    let date: Date
    let configuration: NetWorkDataIntent
    let displaySize: CGSize
    let model: ZModel
}

struct NetWorkDataEntryView : View {
    var entry: NetWorkDataProvider.Entry

    var body: some View {
        Text(entry.model.items.first?.title ?? "0")
    }
}


// 单个
//@main
struct NetWorkData: Widget {
    let kind: String = "NetWorkData"
    var title: String = ""
    var desc: String = ""
    
    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: NetWorkDataIntent.self, provider: NetWorkDataProvider()) { entry in
            NetWorkDataEntryView(entry: entry)
        }
        .configurationDisplayName(title)
        .description(desc)
        .supportedFamilies([.systemMedium, .systemSmall])
//        .supportedFamilies([.systemMedium, .systemLarge, .systemSmall])
    }
}

效果
渲染出来第一个元素的title

16.png

网络图片 NetWorkImage

先按照上面的步骤创建 NetWorkImage 的widget 和 Intent文件
注意小组件目前是不支持异步下载的和动画的
所以图片是需要同步下载的

WidgetImageLoader 先对图片下载封装

import Foundation
import SwiftUI

enum WidgetError: Error {
    case netError //网络请求出错
    case dataError //数据解析错误
}


/*
 
 由于不支持异步加载图片
 所以暂时在网络请求好之后，直接下载好全部图片
 使用NSCache暂存图片
 */
class WidgetImageLoader {
    
    static var shareLoader = WidgetImageLoader()
    private var cache = NSCache<NSURL, UIImage>()
    
    /// 下载单张图片
    /// - Parameters:
    ///   - imageUrl: 图片URL
    ///   - completion: 成功的回调
    func downLoadImage(imageUrl: String?,completion: @escaping (Result<Image, WidgetError>) -> Void) {
        if let imageUrl = imageUrl {
            if let cacheImage  = self.cache.object(forKey: NSURL(string: imageUrl)!) {
                completion(.success(Image(uiImage: cacheImage)))
            } else {
                URLSession.shared.dataTask(with: URL(string: imageUrl)!) { (data, response, error) in
                    if let data = data,
                       let image = UIImage(data: data) {
                        self.cache.setObject(image, forKey: NSURL(string: imageUrl)!)
                        completion(.success(Image(uiImage: image)))
                    } else {
                        completion(.failure(WidgetError.netError))
                    }
                }.resume()
            }
        } else {
            completion(.failure(WidgetError.dataError))
        }
    }
    
    /// 批量下载图片
    /// - Parameters:
    ///   - imageAry: 图片数组集合
    ///   - placeHolder: 占位图，可传可不传
    ///   - completion: 成功回调
    func downLoadImage(imageAry:[String],placeHolder:Image?,completion: @escaping (Result<[Image], WidgetError>) -> Void) {
        let group:DispatchGroup = DispatchGroup()
        var array = [Image]()
        for image in imageAry {
            group.enter()
            self.downLoadImage(imageUrl: image) { result in
                let image : Image
                if case .success(let response) = result {
                    image = response
                } else {
                    image = placeHolder ?? Image("")
                }
                array.append(image)
                group.leave()
            }
        }
        group.notify(queue: DispatchQueue.main) {
            completion(.success(array))
        }
    }
    
    /// 获取image
    /// - Parameters:
    ///   - imageUrl: 图片地址
    ///   - placeHolderImage: 占位图，请尽量传入
    /// - Returns: 返回结果
    func getImage(_ imageUrl:String, _ placeHolderImage:UIImage?) -> UIImage {
        if let cacheImage  = self.cache.object(forKey: NSURL(string: imageUrl)!) {
            return cacheImage
        } else {
            if let cacheImag = placeHolderImage {
                return cacheImag
            } else {
                return UIImage()
            }
        }
    }
}

NetWorkImage

import WidgetKit
import SwiftUI
import Intents

struct NetWorkImageProvider: IntentTimelineProvider {
    
    var img = Image("widget_background_test")
    
    func placeholder(in context: Context) -> NetWorkImageEntry {
        NetWorkImageEntry(date: Date(), configuration: NetWorkImageIntent(), displaySize: context.displaySize, img: img)
    }

    // 定义Widget预览中如何展示，所以提供默认值要在这里
    func getSnapshot(for configuration: NetWorkImageIntent, in context: Context, completion: @escaping (NetWorkImageEntry) -> ()) {
        let entry = NetWorkImageEntry(date: Date(), configuration: configuration, displaySize: context.displaySize, img: img)
        completion(entry)
    }

    // 决定 Widget 何时刷新
    func getTimeline(for configuration: NetWorkImageIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        
        var img = Image("widget_background_test")
        // 占位图
        WidgetImageLoader.shareLoader.downLoadImage(imageUrl: "https://lmg.jj20.com/up/allimg/tx18/0217202027012.jpg") { result in
            switch result {
            case .success(let image):
                print("成功 = \(image)")
                img = image
                // 每隔2个小时刷新。
                let entry = NetWorkImageEntry(date: Date(), configuration: configuration, displaySize: context.displaySize,img: img)
                    // refresh the data every two hours
                let expireDate = Calendar.current.date(byAdding: .hour, value: 2, to: Date()) ?? Date()
                let timeline = Timeline(entries: [entry], policy: .after(expireDate))
                
                completion(timeline)
            case .failure(let error):
                print("失败 = \(error)")
            }
        }

    }
}

struct NetWorkImageEntry: TimelineEntry {
    let date: Date
    let configuration: NetWorkImageIntent
    let displaySize: CGSize
    let img: Image
}

struct NetWorkImageEntryView : View {
    var entry: NetWorkImageProvider.Entry

    var body: some View {
        entry.img
            .resizable()
            .frame(width: entry.displaySize.width, height: entry.displaySize.height, alignment: .center)
    }
}


// 单个
//@main
struct NetWorkImage: Widget {
    let kind: String = "NetWorkImage"
    var title: String = ""
    var desc: String = ""
    
    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: NetWorkImageIntent.self, provider: NetWorkImageProvider()) { entry in
            NetWorkImageEntryView(entry: entry)
        }
        .configurationDisplayName(title)
        .description(desc)
        .supportedFamilies([.systemMedium, .systemSmall])
//        .supportedFamilies([.systemMedium, .systemLarge, .systemSmall])
    }
}

效果

17.png

编辑小组件 Edit

先按照上面的步骤创建 Edit 的widget 和 Intent文件
这里需要注意要Intent文件一个勾上主项目和你widget，不然小组件编辑无法载入。

在Edit Intent文件创建title字段

18.png

Edit

import WidgetKit
import SwiftUI
import Intents


struct EditProvider: IntentTimelineProvider {
    func placeholder(in context: Context) -> EditEntry {
        EditEntry(date: Date(), configuration: EditIntent())
    }
    //    typealias Entry = EditEntry
    func getSnapshot(for configuration: EditIntent, in context: Context, completion: @escaping (EditEntry) -> Void) {
        let entry = EditEntry(date: Date(), configuration: configuration)
        completion(entry)
    }
    func getTimeline(for configuration: EditIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> Void) {
        let entry = EditEntry(date: Date(), configuration: configuration)
            // refresh the data every two hours
        let expireDate = Calendar.current.date(byAdding: .hour, value: 2, to: Date()) ?? Date()
        let timeline = Timeline(entries: [entry], policy: .after(expireDate))
        completion(timeline)
    }
}

struct EditEntry: TimelineEntry {
    public let date: Date
    let configuration: EditIntent
}

struct EditEntryView : View {
    //这里是Widget的类型判断
    var entry: EditProvider.Entry
    
    @ViewBuilder
    var body: some View {
        VStack(alignment: .center) {
            if entry.configuration.title == "请编辑小组件" {
                Text("请编辑小组件吧")
                    .font(.headline)
                    .foregroundColor(Color.gray)
            }else {
                Text(entry.configuration.title ?? "")
                    .font(.headline)
                    .foregroundColor(Color.gray)
            }
        }
        .padding(.all)
    }
    
}



struct Edit: Widget {
    private let kind: String = "Edit"
    var title: String = ""
    var desc: String = ""
    
    public var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: EditIntent.self, provider: EditProvider()) { entry in
            EditEntryView(entry: entry)
        }
        .configurationDisplayName(title)
        .description(desc)
        .supportedFamilies([.systemSmall])
        
    }
}

效果

19.png

20.png

21.png

和app本地数据进行交互 AppData

先按照上面的步骤创建 AppData 的widget 和 Intent文件

数据交互

小组件和app交互是通过AppGroups的交互的

主项目和子项目都需要创建AppGroups

22.png

在主项目保存数据
Swift

// appgroup
let z = UserDefaults.init(suiteName: "你的appgroupid")
// 保存数据
z?.set("demo", forKey: "demo")
let demo = z?.value(forKey: "demo")
print("AppGroup交互 = \(String(describing: demo))")

// 全部刷新
WidgetCenter.shared.reloadAllTimelines()
 // 刷新指定的kind
// WidgetCenter.shared.reloadTimelines(ofKind: <#T##String#>)

OC 需要创建桥接文件

创建WidgetKitManager.swift
第一次的话会自动配置
WidgetKitManager.swift

import WidgetKit

@objc
@available(iOS 14.0, *)
class WidgetKitManager: NSObject {

    @objc
    static let shareManager = WidgetKitManager()
    
    /// MARK: 刷新所有小组件
    @objc
    func reloadAllTimelines() {
       #if arch(arm64) || arch(i386) || arch(x86_64)
            WidgetCenter.shared.reloadAllTimelines()
            #endif
    }

    /// MARK: 刷新单个小组件
    /*
     kind: 小组件Configuration 中的kind
     */
    @objc
    func reloadTimelines(kind: String) {
          #if arch(arm64) || arch(i386) || arch(x86_64)
        WidgetCenter.shared.reloadTimelines(ofKind: kind)
            #endif
    }
}

OC

#import "WidgetController.h"
#import "StudyOC-Swift.h"

@interface WidgetController ()

@end

@implementation WidgetController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self initWidget];
}

- (void)initWidget{
    UIButton *btn = [UIButton new];
    [btn setTitle:@"刷新" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    btn.frame = CGRectMake(0, 100, 100, 100);
    [btn addTarget:self action:@selector(clicktBtn1) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)clicktBtn1{
//    [WidgetCenter];
    //使用 Groups ID 初始化一个供 App Groups 使用的 NSUserDefaults 对象
    NSUserDefaults *userDefaults = [[NSUserDefaults alloc] initWithSuiteName:@"group.zhahntest"];

    //写入数据
    [userDefaults setValue:@"123456789" forKey:@"userID"];

    //读取数据
    NSString *userIDStr = [userDefaults valueForKey:@"userID"];
    NSLog(@"zzr123 = %@",userIDStr);
    [[WidgetKitManager shareManager] reloadAllTimelines];
}

效果

一开始是空的

23.png

执行方法

24.png

刷新机制

刷新分被动刷新和主动刷新
主动刷新

WidgetCenter.shared.reloadAllTimelines()
 // 刷新指定的kind
// WidgetCenter.shared.reloadTimelines(ofKind: <#T##String#>)

被动刷新，需要就算设置1分钟，小组件也是最快5分钟刷新一次的

    // 决定 Widget 何时刷新
    func getTimeline(for configuration: AppDataIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        
        
        // 每隔2个小时刷新。
        let entry = AppDataEntry(date: Date(), configuration: configuration, str: String(describing: AppData))
            // refresh the data every two hours
        let expireDate = Calendar.current.date(byAdding: .minute, value: 5, to: Date()) ?? Date()
//        print("zzr123 = \(expireDate)")
        let timeline = Timeline(entries: [entry], policy: .after(expireDate))
        
        completion(timeline)
        
    }

点击交互

点击是通过link和widgetURL操作，格式是URL sheme

widgetUrl
widgetUrl 是针对整个小组件 点击小组件响应(如果有Link 就响应Link)

Link
LinK 给元素添加点击事件， Link 对 systemSmall样式的组件不生效(systemSmall 样式的小组件只响应widgetUrl)

struct AppDataEntryView : View {
    var entry: AppDataProvider.Entry

    var body: some View {
        VStack
        {
            // 和App数据交互
            Text(entry.str)
            Spacer()
            // 点击交互
            HStack
            {
                Link(destination: URL(string: "https://www.baidu.com?str=left")!) {
                    // 左 View
                    leftView()
                }
                Spacer()
                    .frame(width: 20)

                // 右 View
                Text("right")
                .widgetURL(URL(string: "https://www.baidu.com?str=right"))
                
            }
        }
    }
}


struct leftView : View {

    var body: some View {
        
        HStack {
            
            Text("Left")
        }
    }
}

监听是通过openUrl

SwiftUI

@main
struct SwiftUIDemoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onOpenURL {
                    print("交互 = \($0)")
                }
        }
    }
}

Swift

// AppDelegate
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    print("交互 = \(url)")
    return true
}

// SceneDelegate
    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        print("交互 = \(URLContexts.first?.url)")
    }

OC

// AppDelegate
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
    NSLog(@"交互 = %@",url);
    return YES;
}

// SceneDelegate
- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts
{
    NSLog(@"交互 = %@",URLContexts.allObjects.firstObject.URL);
}