【iOS14】仿网易云桌面小组件(三)

上一篇文章【iOS14】仿网易云桌面小组件(二)介绍了从网络中请求数据并在小组件中动态显示,本篇文章将从为小组件增加编辑功能给大家介绍

通过本篇你将学到
1、创建IntentConfiguration为小组件增加可编辑功能
2、创建Intents Extension,增加动态编辑数据
3、根据用户配置修改界面显示,整体效果图如下


小组件编辑1

小组件编辑2

小组件编辑3

1、创建IntentConfiguration

右键GKWYWidget,New File 然后搜索intent,创建SiriKit Intent Definition File,这里命名为GKWYWidget,然后创建就会生成一个空的intentdefinition文件
然后点击左下角的New Intent,修改名字为WidgetConfiguration,如下

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) -> 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?, 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

你可能感兴趣的:(【iOS14】仿网易云桌面小组件(三))