首页»版块 兴趣街区 爱主题 华为手表GT&荣耀手表表盘主题制作教程

华为手表GT&荣耀手表表盘主题制作教程

    [复制帖子标题和链接]

19.8万676

荣耀粉丝383293  LV10  发表于 2019-7-3 16:21:09 属地未知 来自:浏览器
本帖最后由 自在的流星 于 2019-7-4 09:55 编辑

      未标题-4d.jpg

      首先庆祝watchGT全球销量突破200万!和咱们用同款表的同志们已经遍布五湖四海了嘿{:6_143:}

b5a8f2ef983b445ebda883936afb7067.jpeg

       长续航高颜值,这些优点让华为手表在同类竞品里几乎毫无对手,但是随着用户基数越来越大,自定义表盘的数量太少的这个问题也越来越凸现,很多小伙伴都希望能有符合自己要求的表盘,功能多的不够好看,好看的功能不全等等,这些问题及需求也都汇集到了产品经理的手中。       终于!在最近的手表更新终于加上了大家千呼万唤始出来的表盘市场功能!!目前在beta版本已经上线了上传测试表盘功能,官方也发布了表盘制作工具和指导文档,后续也会有专门的表盘商城,论坛里现在也有很多动手能力强的小伙伴上传了很多各式各样的表盘主题分享,可是很多想学习制作的小伙伴不知道如何制作表盘,不知道该如何入手,那么没关系,这里流星便从官方文档中深入浅出的讲解,当你耐心看完帖子,学会之后你也可以自己做出专属自己酷炫又拉风的表盘~{:6_139:}

未标题-1.jpg

首先下载表盘制作的必备工具和制作指导和样例,推荐先对样例来进行修改练手,之后在从零开始制作表盘,大神也是一步一步成长来滴{:6_153:}
   
游客,如果您要查看本帖隐藏内容请评论


未标题-2.jpg

表盘尺寸目前分两种
注意:荣耀与华为手表的屏幕尺寸与分辨率不同,虽然可以导入,但是会出现显示不全的bug等等问题
一、分辨率为390*390
支持的手表为HONOR手表、华为运动手表GT雅致款
capture_20190702150028728.png

二、分辨率为454*454
支持的手表为华为运动手表GT、华为运动手表GT活力款

capture_20190702150028728.jpg

未标题-3.jpg

       表盘文件为后缀为hwt的文件,其本质上是zip格式的压缩文件,与华为emui主题文件构成类似,如果有主题基础的童鞋们学起来会快很多。
       一个基本的表盘主题文件内部必须的文件及图片资源存储位置如下图。可以下载表盘样例,解压出来试试手。
capture_20190702145157384.bmp
表盘主题内的文件分为三类:
1、表盘描述文件:详细描述表盘的各种参数和开发者相关信息
2、表盘预览图:这个很好理解,为表盘最终效果图,方便用户查看。
3、表盘配置文件:表盘的各类控件代码
4、表盘图片素材:比如表盘的指针图片、背景图片、数字图片等等。用于给表盘配置文件调用。

一、表盘描述文件description.xml及watch_face_info.xml文件
批注 2019-07-02 151310.png

描述文件可以直接套用表盘样例里的xml文件,修改里面的参数即可
主题分辨率分为两种:HWHD01代表390*390(适配荣耀、GT雅致款)、HWHD02代表454*454(适配GT、GT活力款)

二、表盘预览图preview目录
Preview目录内的图片全为JPG格式
Preview目录下的预览图可以在表盘市场展示,可以在手机上上浏览,需要两张,分别为:
批注 2019-07-02 152530.png

cover.jpg:尺寸为960 * 960,jpg格式
icon_small.jpg:尺寸为390 * 390,jpg格式

三、表盘资源切图src目录


切片内的图片全为PNG格式
切片图片资源目录,里面存放表盘用到的所有png图片文件,图片文件的命名要采用A100_001.png、A100_002.png、A100_003.png 、……这样的格式次序命名,其中A100_001.png必须为对应尺寸的表盘缩略图:454规格表盘是250*250, 390规格表盘是216*216
例:24小时表盘资源切图
批注 2019-07-02 153655.png
四、表盘配置文件watch_face_config.xml结构

配置文件代码简单可分为三块
未标题-2.jpg
绿色框为基本代码,不可修改
黄框内为设置dpi属性,即屏幕分辨率,可识别输入为390及454
红框内为一个简单的控件节点Widget,每个表盘内都有多个Widget,每个Widget都是一个图层,实现单一的模块功能。比如步数、时针、分针、心率等等,其显示的顺序是基于XML定义的顺序,写在文件前面的在图层的最下方,由下往上一层一层的堆叠显示
上图代码的定义,是通过第一个Widget控件显示背景图“A100_002.png,然后第二个控件显示的步数信息在这张背景图A100_002.png上,两个控件的层叠效果如下:
未标题-3.jpg

Widget控件目前支持8种控件,如下:

IMAGE静态图,如背景图、图标等
TEXTUREMAPPER图片旋转,如时分秒针等
CIRCLE圆形进度用于步数、卡路里等的目标完成进度显示
LINE线形进度条,用于步数、卡路里等的目标完成进度显示
TEXTAREAWITHONEWILDCARD动态文本框,用于显示变化的文字,如步数、心率等的数值
BOX背景框,用于显示背景色
SELECTIMAGE图片播放随着订阅的数据类型的数据改变,显示不同的图片,可用于天气、日期、星期等播放
TEXTAREAWITHTWOWILDCARD带连接符的动态文本框,如:XX:XX格式的时间显示,XX/XX格式的日期显示
补充说明:
批注 2019-07-02 155854.png

1、不同图层可用这些8种控件组合来展现
2、每个控件节点根据不同的控件类型,都至少有一个不同类型的子节点
3、所有类型的子节点都必须有一个label属性和type属性,分别用于用于描述这个控件具体是和什么元素相关,以及描述控件是静态还是动态

其中表盘坐标的坐标体系如下
批注 2019-07-02 160103.png

未标题-4.jpg

当主题的所有图片和xml文件都已经准备好后,便可以进行打包制作成品
批注 2019-07-02 160444.png
步骤一:下载表盘打包工具(参考帖子附件)

步骤二:打包,将表盘设计文件夹(如:fortuna_watch_24hours,绝对路径中不能有中文字符)拖动到打包工具TemplateWatch.exe上,即可在TemplateWatch.exe同级目录下生成表盘文件com.huawei.watchface和一个output文件夹

步骤三:查看压缩包,output文件夹中的.hwt文件为最终的表盘压缩包,如24-hour_Time.hwt,压缩包的文件名为description.xml的title字段(空格自动用_替换)
未标题-5.jpg

7464591eb97a3e25f299c947417dfd0.png

1步:将打包好的表盘.hwt保存到手机中(资源包后缀名为.hwt,如24-hour_Time.hwt,资源包命名不能包含中文,只能包含字符、数字);

第2步:安装并登陆华为运动健康APPbeta版本:HiHealthApp9.0.5.305-china-beta.apk;(帖子附件中可下载)

第3步:APP扫码绑定手表,进入【我的】-【我的设备】-【表盘市场】,加载已保存到手机的表盘资源包,并选择安装到手表上;

4步:在手表上查看表盘效果;     
未标题-6.jpg

         来自流星的一点提示:制作主题最重要的便是开始制作时便养成好习惯,一步一步按照步骤和控件规范来,不能图快,不然后续修改bug会让你怀疑人生,主题千万条,规范第一条,制作不标准,修改两行泪{:6_145:}      
      好了,到这里制作表盘的基本教程已经结束了,看完之后大家学会了么?如果大家看完这个帖子能够学会简单的表盘制作,那么便完成了我写这篇帖子的初衷了,最后,祝大家都能做出自己心水的表盘~{:6_150:}

评论676
荣耀粉丝38360157  LV10  发表于 2019-7-3 16:31 属地未知 来自:LYA-AL00
板凳
荣耀粉丝38360157  LV10  发表于 2019-7-3 16:31 属地未知 来自:LYA-AL00
地板继续
荣耀粉丝16412385 玩机达人  发表于 2019-7-3 16:41 属地未知 来自:荣耀Note10
支持支持
荣耀粉丝16412385 玩机达人  发表于 2019-7-3 16:41 属地未知 来自:荣耀Note10
再支持
荣耀粉丝80477522  LV7  发表于 2019-7-3 17:00 属地未知 来自:CLT-TL00
看看
1303101550  LV10  发表于 2019-7-3 18:43 属地未知 来自:浏览器
真牛!!
荣耀粉丝64372663  LV10  发表于 2019-7-3 19:37 属地未知 来自:浏览器

手滑了  LV6  发表于 2019-7-3 20:15 属地未知 来自:荣耀Play
哇偶⊙ω⊙感觉好专业
荣耀粉丝1137726  LV7  发表于 2019-7-3 20:47 属地未知 来自:荣耀V9
谢谢分享!
您需要登录后才可以评论 登录 | 立即注册
简体中文 - China
快速回复 返回顶部 返回列表