iOS开发 widget构建详解及实现代码

2020-01-18 17:17:29于海丽

iOS开发之widget实现

前言

    iOS extension的出现,方便了用户查看应用的服务,比如用户可以在Today的widgets中查看应用的简略信息,然后点击进入相关的应用界面。
暂且不表网络上现有的widget文章,本篇文章主要说明本人具体实现widget的步骤,希望能够帮助到需要实现widget的同行朋友。

iOS开发,widget实现,widget,widget实现实例

图1 Today的widget展示----以支付宝为例说明

文章将依次从以下几个问题着手,进行详细说明:
1、如何为现有的工程添加widget;
2、如何绘制UI;
3、如何调起app;
4、如何与host app共享数据。

添加Today Extension

iOS开发,widget实现,widget,widget实现实例

图2 添加today的target

   如图,为现有的工程添加Today Extension,命名这里不赘述了,大家都懂的。

iOS开发,widget实现,widget,widget实现实例

图3 添加today之后的工程目录

    这是添加Today Extension之后的工程目录。
    到这里,为现有的工程添加Today Extension算是完成了,运行程序就可以看到类似图1的简单的效果了,很简单哈。

绘制UI

    与网上发表文章的童鞋们一样,我也是个代码控(装B一下),习惯用纯代码来绘制Today的UI。

iOS开发,widget实现,widget,widget实现实例

图4 删除默认创建的MainInterface并修改Info.plist

    这里,删除默认创建的MainInterface.storyboard,并按图4所示修改Info.plist文件。(当然,习惯使用storyboard的童鞋可以略过,直接操作storyboard即可)

iOS开发,widget实现,widget,widget实现实例

图5 设置widget展示视图的大小

    首先,设置widget展示视图的大小。关于widget的背景色,以及具体展示的内容大家按需绘制,这里暂且不表。

iOS开发,widget实现,widget,widget实现实例

图6 设置widget视图距离左侧边界距离为0