上一篇文章【iOS14】仿网易云桌面小组件（二）介绍了从网络中请求数据并在小组件中动态显示，本篇文章将从为小组件增加编辑功能给大家介绍
通过本篇你将学到
1、创建IntentConfiguration为小组件增加可编辑功能
2、创建Intents Extension，增加动态编辑数据
3、根据用户配置修改界面显示，整体效果图如下
1、创建IntentConfiguration
右键GKWYWidget，New File 然后搜索intent，创建SiriKit Intent Definition File，这里命名为GKWYWidget，然后创建就会生成一个空的intentdefinition文件
然后点击左下角的New Intent，修改名字为WidgetConfiguration，如下
创建完之后系统默认会生成WidgetConfigurationIntent类，如果没有则重启Xcode。
接下来我们修改GKWYWidget.swift，首先导入Intents，
import Intents修改Provider如下
struct Provider: IntentTimelineProvider {
func placeholder(in context: Context) -> SimpleEntry {
SimpleEntry(date: Date(), data: defaultData)
}
func getSnapshot(for configuration: GKWYWidgetConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> Void) {
let entry = SimpleEntry(date: Date(), data: defaultData)
completion(entry)
}
func getTimeline(for configuration: GKWYWidgetConfigurationIntent, in context: Context, completion: @escaping (Timeline<SimpleEntry>) -> Void) {
let currentDate = Date()
let updateDate = Calendar.current.date(byAdding: .minute, value: 5, to: currentDate)
GKWYDataLoader.requestRecomment { (data) in
let entry = SimpleEntry(date: currentDate, data: data)
let timeline = Timeline(entries: [entry], policy: .after(updateDate!))
completion(timeline)
}
}
}
修改GKWYWidget如下
@main
struct GKWYWidget: Widget {
let kind: String = "GKWYWidget"
var body: some WidgetConfiguration {
IntentConfiguration(kind: kind, intent: GKWYWidgetConfigurationIntent.self, provider: Provider()) { entry in
GKWYWidgetEntryView(entry: entry)
}
.configurationDisplayName("云音乐推荐")
.description("快捷享用你的专属音乐，并可自定义精选功能")
}
}
运行，然后长按小组件->编辑小组件，我们会看到下面的效果
接下来为编辑界面增加内容
点击配置文件下面的Parameters的加号，增加Boolean类型的参数，命名为custom，Display Name改为定制我的云音乐小组件
点击左下角的加号，New Type，修改名字为WidgetMode，然后点击Parameters下面的加号，增加类型为WidgetMode的参数，命名为modeArr，配置如下
再次运行小组件，将会看到下面的效果
此时点击选取会出现”未提供此参数的选项“，那是因为还没有配置数据
2、创建Intents Extension
依次点击Xcode->File->New->Target，搜索Intent，选择Intents Extension，Next，命名为GKWYIntent，把Include UI Extension的勾选去掉这里不需要。
修改GKWYData如下，增加getList方法，获取默认list，增加getModeList获取默认modeList
struct GKWYData {
let id: String // 唯一标识
var title: String // 标题
var desc: String // 描述
let icon: String // 图标名称
var type: String
var bgImage: UIImage? = UIImage(named: "recommend_bg") // 背景图片对象
static func getList() -> [GKWYData] {
var list = [GKWYData]()
list.append(.init(id: "1", title: "每日音乐推荐", desc: "为你带来每日惊喜", icon: "cm4_disc_type_list", type: "music", bgImage: UIImage(named: "recommend_bg")))
list.append(.init(id: "2", title: "私人雷达", desc: "探索另类音乐宝藏", icon: "cm4_disc_type_radio", type: "radar", bgImage: UIImage(named: "leida_bg")))
list.append(.init(id: "3", title: "私人FM", desc: "最懂你的音乐电台", icon: "cm4_disc_type_alb", type: "fm", bgImage: UIImage(named: "fm_bg")))
list.append(.init(id: "4", title: "我喜欢的音乐", desc: "最懂你的音乐电台", icon: "cm4_disc_type_product", type: "fm", bgImage: UIImage(named: "love_bg")))
list.append(.init(id: "5", title: "歌单推荐", desc: "精选人气歌单", icon: "cm4_disc_type_act", type: "playlist", bgImage: UIImage(named: "list_bg")))
return list
}
static func getModeList() -> [GKWYWidgetMode] {
return getList().map { (data) -> GKWYWidgetMode in
.init(identifier: data.id, display: data.title, subtitle: data.desc, image: nil)
}
}
static func dataWith(mode: GKWYWidgetMode) -> GKWYData {
var data: GKWYData? = nil
for m in getList() {
if m.id == mode.identifier {
data = m
}
}
return data!
}
}
修改GKWYIntent里面的IntentHandler.swfit文件，实现GKWYWidgetConfigurationIntentHandling，其中的GKWYWidgetMode是上面添加WidgetMode后默认生成的
class IntentHandler: INExtension, GKWYWidgetConfigurationIntentHandling {
func provideModeArrOptionsCollection(for intent: GKWYWidgetConfigurationIntent, with completion: @escaping (INObjectCollection<GKWYWidgetMode>?, Error?) -> Void) {
var list = [GKWYWidgetMode]()
for data in GKWYData.getList() {
if intent.modeArr != nil {
var exist = false
for mode in intent.modeArr! {
if mode.identifier == data.id {
exist = true
}
}
// 没有才去添加
if !exist {
list.append(.init(identifier: data.id, display: data.title, subtitle: data.desc, image: nil))
}
}else {
list.append(.init(identifier: data.id, display: data.title, subtitle: data.desc, image: nil))
}
}
completion(.init(items: list), nil)
}
func defaultModeArr(for intent: GKWYWidgetConfigurationIntent) -> [GKWYWidgetMode]? {
return GKWYData.getModeList()
}
override func handler(for intent: INIntent) -> Any {
return self
}
}
再次运行小组件，就会出现下面的效果
根据用户配置修改界面显示
我们修改GKWYDataLoader里面的request方法如下，其中的requestRecommend是以前的请求推荐音乐的方法
static func request(modeArr: [GKWYWidgetMode], completion: @escaping ([GKWYData]) -> Void) {
var list = [GKWYData]()
let mode = modeArr.first
// 如果第一个是推荐内容，则请求接口
if mode?.identifier == "1" {
// 获取数据成功后再回调
requestRecomment(data: GKWYData.getList().first!) { (data) in
list.append(data)
for (index, value) in modeArr.enumerated() {
// 前面已经处理过第一个数据，这里不用再添加
if index != 0 {
list.append(GKWYData.dataWith(mode: value))
}
}
completion(list)
}
}else {
for menu in modeArr {
list.append(GKWYData.dataWith(mode: menu))
}
completion(list)
}
}
只有用户选择每日音乐推荐的时候才请求接口，其他情况展示默认图片，用户选择歌单推荐后的效果如下：
至此，网易云小组件增加用户编辑功能就已经完成了。
最后
通过这篇文章，我们学会了如何给小组件增加用户编辑功能，接下来将会从小组件的尺寸入手，给网易云小组件增加中尺寸和大尺寸的界面展示
---敬请期待
参考资料
iOS14 Widget小组件开发实践4——用户属性配置
网易云音乐 iOS 14 小组件实战手册
iOS14-桌面小插件 IntentConfiguration
