随着iOS14
的发布,WidgetKit
也应运而生,替换了以前的Today Extension
,各大APP也都开始适配iOS14,为APP增加桌面小组件,最近发现网易云也增加了桌面小组件的功能,觉得还不错,就模仿着写一下。
看完本篇文章后你将学会以下几点:
1、创建WidgetExtension,运行系统默认小组件
2、使用SwiftUI搭建小组件界面,并实时预览效果
3、实现如下效果的小组件
1、创建WidgetExtension
在Xcode项目中点击File
->New
->Target
,搜索Widget,选中Widget Extension
点击Next,输入名称,这里用GKWYWidget
这里的
Include Configuration Intent
是为小组件增加可编辑功能,如果勾选上长按小组件就会出现编辑小组件的选项,这里暂时不勾选。然后点击Finish,小组件就创建完成了。运行项目,就可以看到系统默认为我们创建的小组件
2、使用SwiftUI搭建小组件界面
右键GKWYWidget,创建SwiftUI View
文件,命名为GKWYWidgetView,这时候点击右边的预览会出现缺少previewContext,这里我们用小组件的方式预览,导入WidgetKit,import WidgetKit
,然后加入WidgetPreviewContext
,如下
struct GKWYWidgetView_Previews: PreviewProvider {
static var previews: some View {
GKWYWidgetView()
.previewContext(WidgetPreviewContext(family: .systemSmall))
}
}
这时候点击预览就会出现下面的效果:
下面开始搭建界面,修改GKWYWidgetView为以下代码:
struct GKWYWidgetView: View {
var body: some View {
// 通过GeometryReader获取view的尺寸
GeometryReader { geo in
ZStack(alignment: .bottomLeading) {
// 添加背景图
Image("background")
.resizable()
// 添加阴影
LinearGradient(gradient: Gradient(colors: [Color.black.opacity(0.15), Color.black.opacity(0.35)]), startPoint: .top, endPoint: .bottom)
// 添加logo
Image("cm2_clock_logo")
.resizable()
.scaledToFill()
.frame(width: 20, height: 20)
.position(x: geo.size.width - (20/2) - 10, y: (20/2) + 10)
.ignoresSafeArea(.all)
// 添加左下角的图标及文字
VStack(alignment: .leading, spacing: 5) {
HStack() {
Image("cm4_disc_type_list")
.resizable()
.frame(width: 20, height: 20)
Text("私人雷达")
.font(.system(size: 16))
.foregroundColor(.white)
}
Text("探索另类音乐宝藏")
.font(.system(size: 14))
.foregroundColor(.white)
}.padding()
}
}
}
}
然后点击右边的预览,效果图如下:
到这里,通过SwiftUI创建小组件界面就已经完成了。
3、实现小组件
上面代码已经写好,要实现小组件就很简单了,只需要把GKWYWidget里面的GKWYWidgetEntryView修改为下面的即可
struct GKWYWidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
GKWYWidgetView()
}
}
然后运行项目,小组件就可以显示出来了,如下:
下面简单介绍下系统widget里面的类
Provider
Provider
:为小组件展示提供一切必要信息的结构体,实现TimelineProvider协议,需要实现三个方法,
placeholder
:提供一个默认的视图,当网络数据请求失败或者其他一些异常的时候,用于展示
getSnapshot
:为了在小部件库中显示小部件,WidgetKit要求提供者提供预览快照,在组件的添加页面可以看到效果
getTimeline
:在这个方法内可以进行网络请求,拿到的数据保存在对应的entry中,调用completion之后会到刷新小组件
SimpleEntry
实现TimelineEntry
协议,就是用来保存所需要的数据
GKWYWidgetEntryView
这个结构体就是我们需要用来展示的视图View,这里可以进行各种界面搭建
GKWYWidget
@main
:代表着Widget的主入口,系统从这里加载
kind
:是Widget的唯一标识
StaticConfiguration
:初始化配置代码
configurationDisplayName
:添加编辑界面展示的标题
description
:添加编辑界面展示的描述内容
supportedFamilies
这里可以限制要提供三个样式中的哪几个
GKWYWidget_Previews
小组件的预览结构体,实现PreviewProvider
协议,在这里可以实现快速预览小组件的效果
WidgetPreviewContext
:可实时预览小组件的结构体,支持三种样式的小组件效果
最后
到这里,网易云小组件的简单搭建就完成了,后面将会为你介绍通过网络请求来获取数据,显示不同内容。
---敬请期待