KLWP（Kustom Live Wallpaper）和 KWGT（Kustom Widget）是 Android 平台上的两款 APP，KLWP 用来设计动态壁纸，KWGT 用来设计小部件。

KLWP

第一次接触到 KLWP 要从红莲の狮子制作的 EVA Desktop Reborn V2 说起。狮子后来又制作了 SH06D EVA限定UI V2.1 ，利用 KLWP 复刻了夏普与《EVA:Q》合作推出的 SH-06D NERV 特别式样版手机的 UI，到现在也即将发布 V2.5 版的更新，一路也见证了手机主流屏幕比例的变迁。等到 2.5 正式发布后，再着重介绍这款应用。

EVA Desktop V2/SH06D V2.1/SH06D V2.5

KWGT

不像 KLWP 可以接管整个桌面的内容，KWGT 只负责制作桌面小部件（MIUI 中称作小工具），效果如下图：

Weather Colck/Ornate Widget1/Ornate Widget21

上图中的后两个小部件可以在 Ornate KWGT 的预设中找到，这里以 Weather Colck 的制作过程为例进行演示，着重介绍：

如何利用「形状」创建蒙版切割「图像」作为背景。
如何利用「文本」通过网络调用第三方 API 获取天气数据。
如何利用「公式」控制「图像」的透明度，实现根据天气的不同显示不同的天气图标。

添加小部件

安装 KWGT，双指捏合或长按桌面进入到小部件列表，在 Kustom Widget 下选择小部件的大小，这里选择 4x2。

新建预设

点击小部件，进入到 KWGT，点击右上角的「新建」图标，创建一个空白预设。

制作背景

背景全局变量

我们需要一个背景图片承载小部件上的信息，还希望能够比较方便地更换背景图片，所以要在「全局变量」标签栏下新建「位图」，命名为“背景”，用于在预设内任何位置调用这张图片。

背景项目

直接将背景图片显示出来不够美观，接下来需要利用蒙版对背景图片进行裁切，以得到圆形的切角，所以要在「项目」标签栏下新建「重叠组」，命名为“背景组件”，存放蒙版和背景图像。

在“背景组件“中新建「形状」，命名为”蒙版“。进入”蒙版“，在「形状」标签栏下选择「形状」为「矩形」，并设置「圆角」为 35 度；在「图层」标签栏下选择「遮罩」为”剪切下一个组件“。

返回“背景组件“，新建「图像」，点击「位图」右侧的复选框，点击右上角的「全局变量」按钮，设置图片地址引用全局变量，选择全局变量为“背景”。

时间项目

有了背景，就可以把时间显示在上面。在「项目」标签栏下新建「文本」，命名为“时间”，编辑文本内容如下：

时间

1	$df(hh:mm)$

这样 KWGT 便可以获取系统时间，并以文本形式显示在小部件上。

此外，还可以在「时间」的「触摸」标签栏下添加「单击」动作，启动「时钟」应用程序，这样在与小部件交互时可以直接打开时钟应用。

日期项目

日期也同样是利用文本进行展示。为了实现将 年份/月份/日期 与 星期几 展示在两行效果，需要先在「项目」标签栏下新建「堆叠组」，命名为“日期组件”，在「日期组件」中再添加两个「文本」，命名为“日期”和“星期”，编辑文本内容如下：

日期

1	$df(yyyy/MM/dd)$

星期

1	$df(EEEE)$

在「日期组件」的「触摸」标签栏下添加「单击」动作，启动「日历」应用程序。

天气项目

KWGT 内置的天气提供商为国外的天气源，访问速度和数据精度可能都不如国内的天气源。这里以和风天气第 7 版 API 为例子，演示如何获取第三方 API 提供的数据。

和风天气第 7 版 API 获取实时天气：

1 2	https://devapi.heweather.net/v7/weather/now?key=[key]&location=[城市ID] https://devapi.heweather.net/v7/weather/now?key=[key]&location=[经度],[纬度]

返回的实时天气数据：

{
	"code": "200",
	"updateTime": "2020-08-23T20:26+08:00",
	"fxLink": "http://hfx.link/2az1",
	"now": {
		"obsTime": "2020-08-23T20:05+08:00",
		"temp": "24",
		"feelsLike": "27",
		"icon": "101",
		"text": "多云",
		"wind360": "358",
		"windDir": "北风",
		"windScale": "1",
		"windSpeed": "3",
		"humidity": "90",
		"precip": "0.6",
		"pressure": "997",
		"vis": "4",
		"cloud": "100",
		"dew": "22"
	},
	"refer": {
		"sources": [
			"Weather China"
		],
		"license": [
			"no commercial use"
		]
	}
}

实时天气数据说明，其中需要重点关注的是温度 now.temp ，天气 now.text 以及天气图标 now.icon ：

code	API状态码，具体含义请参考状态码	200
updateTime	当前API的最近更新时间	2013-12-30T01:45+08:00
fxLink	该城市的天气预报和实况自适应网页，可嵌入网站或应用	http://hfx.link/ae45
now.obsTime	实况观测时间	2013-12-30T01:45+08:00
now.temp	实况温度，默认单位：摄氏度	21
now.feelsLike	实况体感温度，默认单位：摄氏度	23
now.icon	当前天气状况和图标的代码，图标可通过天气状况和图标下载	100
now.text	实况天气状况的文字描述，包括阴晴雨雪等天气状态的描述	晴
now.wind360	实况风向360角度	305
now.windDir	实况风向	西北
now.windScale	实况风力等级	3
now.windSpeed	实况风速，公里/小时	15
now.humidity	实况相对湿度，百分比数值	40
now.precip	实况降水量，默认单位：毫米	1.2
now.pressure	实况大气压强，默认单位：百帕	1020
now.vis	实况能见度，默认单位：公里	10
now.cloud	实况云量，百分比数值	23
now.dew	实况露点温度	12
refer.sources	原始数据来源，可能为空
refer.license	数据许可证

获取实时天气需要提供地理位置信息，可以选择提供 LocationID 或经纬度。举例说明，北京的 LocationID 为 101010100，经度为 116.40529，维度为 39.904987。我们可以将地理位置信息写死在天气源中，但这样不够灵活，因此推荐下面这种方法。

KWGT 可以在设置中选择首要位置的获取方式为自动（GPS 定位）或是手动（输入 北京市, CN 后搜索），这两种方式都可以得到一个经纬度信息，拿到这个经纬度信息我们就能灵活地组成天气源。值得说明的是，KWGT 自动获取位置拿到的经纬度信息可能并不准确，如果使用了代理，显示的可能是代理服务器所在的地址，更推荐手动输入。

如果不确定 KWGT 自动获取到的经纬度信息是否正确，可以使用和风天气城市搜索服务 API 查询对应的城市：

1	https://geoapi.heweather.net/v2/city/lookup?key=[key]&location=[经度],[纬度]

返回的城市数据：

{
	"status": "200",
	"location": [
		{
			"name": "朝阳",
			"id": "101010300",
			"lat": "39.92148972",
			"lon": "116.48641205",
			"adm2": "北京",
			"adm1": "北京",
			"country": "中国",
			"tz": "8.0",
			"type": "city",
			"rank": "15",
			"fxLink": "http://hfx.link/2az1"
		}
	],
	"refer": {
		"sources": [
			"heweather.com"
		],
		"license": [
			"commercial license"
		]
	}
}

在「全局变量」标签栏下新建「文本」，命名为“天气源”，用来组装获取实时天气的链接，编辑文本内容如下：

1	https://devapi.heweather.net/v7/weather/now?key=[key]&location=$li(lon)$,$li(lat)$

在「全局变量」标签栏下新建「文本」，命名为“天气图标”，用来解析实时天气信息中天气图标的代码，编辑文本内容如下：

1	$wg(gv(天气源), json, ..icon)$

在「项目」标签栏下新建「堆叠组」，命名为“天气组件”。在「天气组件」中添加一个「堆叠组」，命名为“天气组”，在「天气组」中添加两个「文本」，命名为“天气”和“温度”。编辑文本内容如下：

天气

1	$wg(gv(天气源), json, ..text)$

温度

1	$wg(gv(天气源), json, ..temp)$°C

在「天气组件」中添加一个「重叠组」，命名为“天气图标”，用来存放从和风天气天气图标库下载来的天气图标。在「天气图标」中添加「图像」，用天气图标的代码命名，选择位图为对应天气图标，并对位图的「不透明」选项启用「公式」，公式内容如下：

不透明

1	$if(gv(天气图标ID)=ID,100,0)$

以“阵雨”天气为例，其对应的天气图标 ID 为 300，该图像的「不透明」公式如下：

1	$if(gv(天气图标ID)=300,100,0)$

因为选用的是和风天气 S1 版图标的单色版（灰色），在小部件中的显示效果不好。为了将天气图标显示为白色，需要启用「图像」的过滤器为「变亮」，值给到 100，即可呈现出白色效果。

对这 61 种天气图标进行如上配置后，即可根据当前天气显示出对应的图标。

和风天气天气图标库 https://github.com/heweather/WeatherIcon

和风天气天气图标介绍 https://dev.heweather.com/docs/start/icons

参考资料
天气预报和实况 https://dev.heweather.com/docs/api/weather
城市信息搜索 https://dev.heweather.com/docs/api/geo

Hi SANNAHA

KLWP+KWGT定制手机桌面