华米Logo论坛

123下一页
返回列表 发新帖

[综合讨论] 华米运动手表表盘制作教程--自定义设计

  [复制链接]

2

主题

11

帖子

151

积分

玩机达人

Rank: 2

积分
151
发表于 2018-3-1 14:21 |显示全部楼层 | 阅读模式
本帖最后由 曦颜XY 于 2018-3-7 22:15 编辑


前者声明:

                    本文涉及素材等版权华米科技所有,如有不便,版主可删除帖子

引用:

                   小兔版主曾经分享过表盘的基本制作教程,并非能够涉及到自定义元素,本次我给大家简单介绍下如何自定义表盘制作
                   小兔版主教程链接:http://bbs.huami.com/thread-4936-1-1.html   http://bbs.huami.com/thread-4939-1-1.html

                   后面我分享了一个修改自定义的表盘,不会自定义可以对比下我的这个贴的原版和我修改的,就可以发现我添加了什么: http://bbs.huami.com/thread-14954-1-1.html         

教程开始:


         1.全部文件介绍:

                           

            <1>background是放置表盘背景 <2>datawidget是放数据项如里程、电量这些的自定义时选择时高亮图片
            <3>font是放置电子表数字样式图片的位置 <4>timedigital是放自定义表盘整个电子时间样式的预览图和高亮图片
            <5>background_list.xml是背景图片列表 <6>datawidget_list.xml表盘数据项定制可选列表
            <7>description.xml是表盘基本信息介绍 <8>preview.png表盘总预览图 <9>timedigital_list.xml是电子时间样式预览图列表
            <10>watchface.xml描述表盘中出现的控件元素,同时也定义表盘初始默认的元素

        2.四个文件夹的图片素材这是你自己定制的,需要PS功底,这个不会的我没办法了
           datawidget存放的高亮图片是根据你的表盘布局所制作的,官方给的wfz的素材不一定适用所有设计者的
           timedigital两张高亮图片也要注意
           素材的选择,请君注意版权哦

        3.xml文件的功能介绍:

          <1>background_list.xml
                 
                 如官方ROM开发者已注释:type为background, config为背景位置, 其中"@wfz/"开头表示图片位于wfz包内, "background/01.png"为路径
                 一般你只需要修改:config="@wfz/background/01.png ,你自己表盘背景的文件名,这都是随便的,例如xxx.png,你就改成
                 config="@wfz/background/xxx.png,你有几张背景就几个config="@wfz/background/

          <2>datawidget_list.xml,原本官方提供的wfz是缺少爬楼和天气项,本人已添加
                 
                数据项的种类已内置在手表系统中, 目前支持9种数据项, 对应的dataType分别如下:
                今日步数(datatype = 1), 今日里程(datatype = 2), 总里程(datatype = 3), 今日消耗(datatype = 4), 最近心律(datatype = 5),日期(datatype = 6), 天气温度(datatype = 8), 剩余电力(datatype = 10), 爬楼(datatype = 12) model为该数据项的样式,model详细见watchface.xml介绍

          <3>description.xml详情介绍见小兔版主的帖子

          <4>timedigital_list.xml定义类似background_list.xml,多了font="@wfz/font/01",就是电子数字样式的目录,同理background_list.xml

          <5>watchface.xml重点介绍,
                官方给予的代码及注释较长,我就不复制上来了,自己看xml
               

                #1.<WatchFaceItem type="statusbar" y="100" />,其中的y="100"表示的是你的充电的、飞行模式的小飞机图标等显示的位置,
                     数字大小从小到大则图标从上到下,这个根据你的表盘布局而合理调试,必须制作好调试一下,否则会出现图标重叠现象

                #2.<WatchFaceItem type="background" config="@wfz/background/01.png" configList="@wfz/background_list.xml" />
                     config="@wfz/background/01.png"是默认的背景是哪个,configList="@wfz/background_list.xml"背景图片的定义列表

                #3.<WatchFaceItem type="timedigital"........自己参考xml官方开发者的介绍即可

                #4.<WatchFaceItem type="datawidget"....有几行这个就代表你的表盘默认可以显示多少项,比如图中就是4行这个就只能显示4个了

                    (1)Model样式介绍:
                     官方给出的项目里是没有天气和爬楼的,我已经给出注释
                     datatype有9种,自己看xml,model为该数据项的显示形式, 默认为0,显示形式为圆形带进度条布局文字在中心, 这样的:
                                                                     

                                                                     model=1为横向显示,左侧图标右侧文字,这样:
                                                                     

                     其中时间为特殊,modle=0为左侧日期右侧星期:03-01 星期四  model=1为仅日期:03-01 model=2为仅星期:星期四 model=3为农历正月十四  model=4为年.月.日:2018.03.01

                   (2)修改方法:
                    <WatchFaceItem type="datawidget" id="3" x="160" y="229" dataType="8" model="1"mask="@wfz/datawidget/mask_3_fg.png"configList="@wfz/datawidget_list.xml" />

                    你需要修改id的数值,xy的值就是布局,这个你自己调试,dataType就是显示那一个数据项了,model看你喜好0或者1,mask值就是定义的高亮图片,这个上文已经介绍,configList数据可选列表

                    这里写入的dataType和model是表盘默认的项目,可切换的列表见datawidget_list.xml,里面详细介绍了dataType和model,自己看
                    注意: 时间样式的第四种即2018-03-01样式在你自定义时候是出不来的,即便你在datawidget_list.xml定义了6-4,系统还是我原因,不知
                              
写在后面:

                    我也是刚买这个表,对定制不是特别了解,可能上文有问题,请老司机勿喷
                喜欢我的关注我的微博:曦颜XY,谢谢
                版权:华米科技
附件下载:

本帖子中包含更多资源

您需要 小米登录微信登录才可以下载或查看

x
已有7人评分金钱 理由
执笔染心伤 + 10 很给力!
wongkamfei + 10 辛苦你了!
小兔 + 10 辛苦!很棒!
张!@ + 10 很给力!
bzbiao + 10 赞一个!
TXK + 10 感谢授人以渔!辛苦了!谢谢细致教学。赞!.
wangjie + 10 赞一个!

查看全部评分 总评分:金钱 +70 

回复

使用道具 举报

2

主题

6

帖子

104

积分

玩机达人

Rank: 2

积分
104
发表于 2018-3-2 14:53 |显示全部楼层
@曦颜XY,请问“日期”的字体大小和颜色可以自定义不,太小了,在手表上需要特意看才能看清楚? tks:)
回复 支持 1 反对 0

使用道具 举报

93

主题

3602

帖子

1万

积分

玩机之神

【个人主页】http://txk.ys168.com

Rank: 9Rank: 9Rank: 9

积分
11147
发表于 2018-3-1 15:21 |显示全部楼层
本帖最后由 TXK 于 2018-3-1 20:21 编辑

来迟了。。。
前5名,占位!

本帖子中包含更多资源

您需要 小米登录微信登录才可以下载或查看

x
回复 支持 1 反对 0

使用道具 举报

2

主题

11

帖子

151

积分

玩机达人

Rank: 2

积分
151
发表于 2018-3-1 14:21 |显示全部楼层
沙发我的
已有1人评分金钱 理由
TXK + 1 我最喜欢沙发了,可惜一点机会都没有!^_^.

查看全部评分 总评分:金钱 +1 

回复

使用道具 举报

1

主题

98

帖子

406

积分

玩机狂人

Rank: 3Rank: 3

积分
406
发表于 2018-3-1 14:35 |显示全部楼层
地板是我的
已有1人评分金钱 理由
TXK + 1 独秀同志,请把手放下!

查看全部评分 总评分:金钱 +1 

回复 支持 反对

使用道具 举报

21

主题

389

帖子

1567

积分

玩机之王

欢迎光临

Rank: 6Rank: 6

积分
1567
发表于 2018-3-1 17:25 |显示全部楼层
前5名,占位!
回复

使用道具 举报

67

主题

789

帖子

5512

积分

玩机之皇

Rank: 8Rank: 8

积分
5512
发表于 2018-3-1 18:40 |显示全部楼层
好帖!版主应该置顶此贴。好多新手想做表盘,苦于没有教程
回复 支持 反对

使用道具 举报

2

主题

11

帖子

151

积分

玩机达人

Rank: 2

积分
151
发表于 2018-3-2 12:42 |显示全部楼层
应该没多少人有时间设计了
回复 支持 反对

使用道具 举报

39

主题

1005

帖子

2796

积分

玩机之王

Rank: 6Rank: 6

积分
2796
发表于 2018-3-2 12:58 |显示全部楼层
我還已為 官方終於, 放出一個設計軟件出來......
回复 支持 反对

使用道具 举报

2

主题

11

帖子

151

积分

玩机达人

Rank: 2

积分
151
发表于 2018-3-2 15:08 |显示全部楼层
pigfan 发表于 2018-3-2 14:53
@曦颜XY,请问“日期”的字体大小和颜色可以自定义不,太小了,在手表上需要特意看才能看清楚? tks:) ...

暂时不支持呢
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录

本版积分规则

官方网站
Amazfit
华米科技
在线商城
天猫旗舰店
京东旗舰店
关于我们
关于我们
联系我们
关注我们
官方微博
官方微信
  • 400-000-6666
  • 华米科技客服热线
    周一至周日8:00-18:00
快速回复 返回顶部 返回列表