EMUI 3.0 widget设计说明

EMUI 3.0 widget设计说明

3.0上桌面widget的文件结构如下：

图片1.png

Weather widget:

游客，如果您要查看本帖隐藏内容请评论

3.0桌面widget更大程度增加了设计师发挥的空间，让widget的设计更加灵活。主要可实现的有下面几点：

1、widget上各元素大小、位置可自定义布局，布局改为相对布局（百分比）。

以weather widget为例，widget资源文件包外有个单独的xml文件，控制widget上元素的位置。

部分代码截图如下：

图片2.png

以图为例，左边为默认天气widget效果，右边的设计效果3.0换肤包上也可实现：

图片3.png (

图片4.png

2、widget圆角可自定义大小。

每个widget文件包内有两个资源如下：

5.jpg

左边的资源四周都留有了空白的像素，软件通过读取空白像素的值来对背景图进行裁切，控制widget在整个网格内的显示大小。

右边的资源主要是裁切四个圆角用，改资源大小必须为偶数才可生效。

以图为例，左边为默认gallery widget效果，右边的设计效果3.0换肤包上也可实现：

6.jpg )

3、需要读取图片资源类widget，可自定义显示大小。

以music widget为例，专辑封面图片既可以满背景显示（左图），也可以自定义大小和位置（右图）。

7.jpg

在xml文件里面，有一行代码：flag="1"，flag标识歌曲图片是否需要裁圆角，1标识需要裁圆角，其他标识不需要裁圆角（程序会取第一个flag的值作为标识是否需要裁剪图片）

8.jpg (7.52 KB, 下载次数: 3)
下载附件  保存到相册
——这两行代码控制图片的大小。

也可以通过改mask的资源来控制是否要裁切圆角。

4、widget支持多规格拖拽变化。

以JAZZ桌面布局为例：

Weather widget：5x1（默认）、5x2

Gallery widget：3x1（默认）、根据网格无限拖拽

Music widget：2x1（默认）、2x2、3x1、3x2

以Music widget为例，对应的xml 里面代码就会包括上面四种规格

5、widget支持桌面网格切换。

要求widget资源如描边等需要用点九资源来实现。非点九资源会出现拉伸或压缩。

如果布局同默认桌面widget是一致的，则不需要改xml文档，只需替换对应资源即可。

谢谢分享

谢谢分享

学习学习！

谢谢分享

good    very

感谢分享

来看看。。。。。

Thank you!

有些看不懂