Widget 是 iOS14 的新特性,是一个桌面小插件,它的 UI 需要使用到 SwiftUI, 所以想要写 Widget 首先需要学会写 SwiftUI.
最终代码 Github(https://github.com/wintelsui/iOS14Widget)
准备写个包括三种样式的简单的 Widget
WidgetFamily中包含 3 中定义:
systemSmall // A small widget.
systemMedium //A medium-sized widget.
systemLarge // A large widget
具体大小可以看苹果的设计指南
https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/widgets/-
Widget 又有 2 中配置,静态和动态,区别在于是否使用了Intent
StaticConfiguration 和 IntentConfiguration.
如果需要"编辑小组件"中设置 Widget 参数,那么就需要用到Intent.
配置.jpg
随意创建一个iOS项目(无关紧要,因为我们只在乎 Widget), 然后创建Target 选择 Widget Extension
因为需要显示 "编辑小组件" 中 配置参数,所以选择 "Include Configuration Intent"
创建完成后,我们先来编辑一下TestWidget.intentdefinition文件, 这里我将它自动生成的Configuration(改一个有辨识度的名字,改名字这一步不做也可以) 随意的改成 TestWidgetConfiguration,去TestWidget.swift文件中将原有的ConfigurationIntent都替换为TestWidgetConfigurationIntent, 并 build 一次(会自动生成TestWidgetConfigurationIntent.swift 类), 让后在 Parameters 中添加两个参数,并配置类型.
现在我们运行一下代码,并在手机上把 Widget 添加到桌面, 长按Widget显示菜单,选择"编辑小组件",这时我们将看到我们的参数:
下面到了去写代码的时间了
模板生成了一些必要的代码:
struct PlaceholderView : View {} 是临时展示的视图
struct TestWidgetEntryView : View {} 是 Widget 展示的主要视图
struct SimpleEntry: TimelineEntry {} 是 Widget 的时间线中必要的对象
struct Provider: IntentTimelineProvider {} 控制着 Widget 的刷新,我们要提供一些用于刷新的内容,比如请求网络数据后提交给时间线显示数据.
/// 用于展示时候的快照(在插件中心选择插件时候)
public func snapshot(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (SimpleEntry) -> ()) {}
/// 是真是的展示情况
public func timeline(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (Timeline) -> ()) {}
在这里 timeline 这个方法的刷新规律,并不清楚,看WWDC视频的时候,感觉难道是 30 分钟左右吗? 反正应用并不知道什么时候会刷新(当然貌似可以从主程序中调用 WidgetCenter.shared.reloadAllTimelines() 强制刷新),但是不管怎样,我们需要在timeline被调用时,提供数据用于展示.
开始编写代码 timeline(for configuration:....方法
public func timeline(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (Timeline) -> ()) {
// 读取了设置中的参数, 实际上并不用,只是展示一下这个功能怎么写
let userName = configuration.userName ?? ""
let showFullName = configuration.showFullName?.boolValue ?? true
//此处并不着急completion(),可以发起网络请求等
/*
let reqUrl = URL(string: "https://api.xygeng.cn/Bing")!
let task = URLSession.shared.dataTask(with: reqUrl) { (data, response, error) in
guard error == nil else {
let entryDate = Calendar.current.date(byAdding: .second, value: 20, to: Date())!
let entry = SimpleEntry(date: entryDate)
let timeline = Timeline(entries: [entry], policy: .after(entryDate))
completion(timeline)
return
}
let _ = getCommitInfo(fromData: data!)
let entryDate = Calendar.current.date(byAdding: .second, value: 20, to: Date())!
let entry = SimpleEntry(date: entryDate)
let timeline = Timeline(entries: [entry], policy: .after(entryDate))
completion(timeline)
}
task.resume()
*/
//本代码 在 2 秒后刷新界面
let entryDate = Calendar.current.date(byAdding: .second, value: 2, to: Date())!
let entry = SimpleEntry(date: entryDate)
let timeline = Timeline(entries: [entry], policy: .after(entryDate))
completion(timeline)
}
视图代码,使用 @Environment(.widgetFamily) var family 来判断当前是什么大小样式,其中PhotoView不多说了,是 Image 加了边框.
struct TestWidgetEntryView : View {
var entry: Provider.Entry
@Environment(\.widgetFamily) var family
@ViewBuilder
var body: some View {
switch family {
case .systemSmall:
ZStack {
Color(red: 0.55, green: 0.73, blue: 1.0)
VStack(spacing: 10) {
PhotoView(imageName: "aragaki")
}
}
case .systemMedium:
ZStack {
Color(red:0.61, green:0.35, blue:0.71)
HStack(spacing: 10) {
PhotoView(imageName: "aragaki2")
Text("Aragaki")
.font(Font.system(size: 18))
.fontWeight(.heavy)
.shadow(color: Color.gray, radius: 5, x: 2, y: 2)
}
}
default:
ZStack {
Color(red:0.97, green:0.54, blue:0.88)
VStack {
HStack(spacing: 10) {
PhotoView(imageName: "aragaki3")
Text("Aragaki")
.font(Font.system(size: 18))
.fontWeight(.heavy)
.shadow(color: Color.gray, radius: 5, x: 2, y: 2)
}
Text("Aragaki")
.font(Font.system(size: 18))
.fontWeight(.heavy)
.shadow(color: Color.gray, radius: 5, x: 2, y: 2)
}
}
}
}
}
最终运行效果
最终代码 Github(https://github.com/wintelsui/iOS14Widget)