文章目录
- 1. 皮肤包相关简介
- 2. 分界面配置
- 2.1. 配置EULA第一次登陆的第一个界面
- 2.2. 配置HomeActivity登陆完成后的主显示界面
- 2.3. 配置Conversation会话聊天的界面
1. 皮肤包相关简介
皮肤包实际为一个特殊的zip
文件, 皮肤设计者自测时使用的皮肤包名称固定为waDesign.skin
, 下载地址如下:
链接:https://pan.baidu.com/s/1rlPkClo0cD1R6lomz7YVtg
提取码:kfj6
将waDesign.skin
放在手机的内部存储/waModule/目录
下,运行waPlus
就可以看到换肤效果
1.1 怎么拷贝皮肤包到手机?
拷贝皮肤包到手机的方式有多种,这里简单介绍两种:
-
通过USB连接手机, 然后
选择传输文件(MTP)
, 如果没有弹出选择框,一般在手机的下拉框中存在选择。
之后就可以在电脑的资源管理器中找到内部存储/waModule/目录
, 将waDesign.skin
拷贝覆盖就可以了:
-
手机安装 爱莫助手, 在PC上打开http://web.airmore.cn/, 使用手机扫描登陆即可上传文件,如下所示:
1.2 怎么制作新的皮肤包?
对于皮肤设计者来说,唯一需要关心的是,用什么样的
颜色
,或图片
,或svga动画
来填充
指定界面的指定控件区域
!!!,也就是替换下面的
drawable
文件夹中图片,svga
文件中动画,colors.xml
中颜色值
重点划三次:
皮肤设计者只需替换drawable
文件夹中图片, svga
文件中动画,colors.xml
中颜色值,就可以达到换肤效果!!!
皮肤设计者只需替换drawable
文件夹中图片, svga
文件中动画,colors.xml
中颜色值,就可以达到换肤效果!!!
皮肤设计者只需替换drawable
文件夹中图片, svga
文件中动画,colors.xml
中颜色值,就可以达到换肤效果!!!
将waDesign.skin
解压缩后,找到assets
目录展开,看到的子目录及映射关系如下:
规则如下:
-
drawable
文件夹: 用于放置图片, 一般建议使用webp
或png
图片,也可以使用.9.webp
或.9.png
图。 -
values
文件夹:colors.xml
文件用于配置颜色, 配置颜色一般使用0x
或#
开头,6位或8位,例如:#ffff0000
,#ffffff
。 -
svga
文件: 用于放置svga
文件。 -
skinparamlist.xml
:主配置文件,我们在skinparamlist.xml
配置每个控件使用的颜色或图片, 关联drawable
文件夹中的图片或colors.xml
的颜色。
1.2.1 皮肤包中文件的映射关系?
做为皮肤设计者,可以通过下面示例简单了解下皮肤包配置和各文件之间的映射关系
1.2.1.1 question1 : 配置中怎么划分换肤主界面?
skinparamlist.xml
:主配置文件划分了三个界面换肤,理论上是支持更多界面换肤, 但考虑到设计者的时间成本,暂时只配置了这三个界面, 如下所示:
<skinparamlist>
<type area="EULA"> <!--第一次登陆的第一个界面-->
</type>
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
</type>
<type area="Conversation"> <!--点击进入会话聊天的界面-->
</type>
</skinparamlist>
area
指定了当前正在配置指定界面的控件列表皮肤。
area="EULA"
对应whatsApp
原生界面如下:
area="HomeActivity"
或 area="1"
(旧版配置) 对应whatsApp
原生界面如下:
area="Conversation"
或 area="2"
(旧版配置) 对应whatsApp
原生界面如下:
1.2.1.2 question2 : 配置中怎么关联指定界面的指定控件区域
?
举一个例子说明下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
<type area="EULA"> <!--第一次登陆的第一个界面-->
<!--配置全底图-->
<SkinParams>
<widgetResName>content</widgetResName>
<widgetClassName>ContentFrameLayout</widgetClassName>
</SkinParams>
</type>
...
</skinparamlist>
前面提到了area
当前正在配置的指定界面, 而它的子项<SkinParams>
中的widgetResName
+widgetClassName
用来确定这个界面中的指定控件区域
,下面都会以效果图加显示来表示出来(注意右边红框的位置):
对于皮肤设计者来说,通过
widgetResName
及widgetClassName
在当前文档中搜索关键字,找到对应的控件区域, 明白皮肤是作用在这个控件区域上,就足够了, 如下图所示:
1.2.1.3 question3 : 配置中怎么关联背景图片
?
继续对上面的例子加以扩展,我们想给EULA
这个界面中的widgetResName = content + widgetClassName = ContentFrameLayout
这个指定控件区域
加一个背景图
,可以这样写xml配置:
<skinparamlist>
<type area="EULA"> <!--第一次登陆的第一个界面-->
<!--配置全底图-->
<SkinParams>
<widgetResName>content</widgetResName>
<widgetClassName>ContentFrameLayout</widgetClassName>
<resBgType>drawable</resBgType>
<resBgName>eula_content</resBgName>
</SkinParams>
</type>
</skinparamlist>
其中resBgType = drawable
表示使用drawable
文件夹中的图片。
而resBgName = eula_content
表示会查找drawable
文件夹中的eula_content.webp
或eula_content.png
或eula_content.9.webp
或eula_content.9.png
图片。
我们在drawable
文件夹下放一张eula_content.webp
图片, 关联关系如下图:
将改后的waDesign
文件夹重新打包成zip,并改名为waDesign.skin
, 放置到手机的内部存储/waModule/目录
下进行测试:
换肤效果如下:
重新打包成zip时,
切记不要带上最外层文件夹
, 另外如果不需要测试,建议删除waDesign.skin
,不然会每次启动waPlus都会默认优先加载waDesign.skin
。
1.2.1.5 question5 : 配置中怎么关联背景svga动画
?
继续对上面的例子加以扩展,我们想给EULA
这个界面中的widgetResName = content + widgetClassName = ContentFrameLayout
这个指定控件区域
加一个背景图后,再加一个svga动画
,可以这样写xml配置:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
<type area="EULA"> <!--第一次登陆的第一个界面-->
<!--配置全底图-->
<SkinParams>
<widgetResName>content</widgetResName>
<widgetClassName>ContentFrameLayout</widgetClassName>
<resBgType>drawable</resBgType>
<resBgName>eula_content</resBgName>
<svgaBgName>eulasvga_content</svgaBgName>
</SkinParams>
</type>
...
</skinparamlist>
svgaBgName= eulasvga_content
表示会查找svga
文件夹中的eulasvga_content.svga
文件。
我们在svga
文件夹下放一张eulasvga_content.svga
图片, 关联关系如下图:
重新打包,换肤效果如下:
1.2.1.6 question6 : 配置中怎么关联颜色
?
继续对上面的例子加以扩展,这次我们想给EULA
这个界面中的widgetResName = content + widgetClassName = ContentFrameLayout
这个指定控件区域
指定一个背景色
(不再使用背景图),可以这样写xml配置:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
<type area="EULA"> <!--第一次登陆的第一个界面-->
<!--配置全底图-->
<SkinParams>
<widgetResName>content</widgetResName>
<widgetClassName>ContentFrameLayout</widgetClassName>
<resBgType>color</resBgType>
<resBgName>eula_content</resBgName>
<svgaBgName>eulasvga_content</svgaBgName>
</SkinParams>
</type>
...
</skinparamlist>
其中resBgType = color
表示使用colors.xml
中的颜色配置。
我们在colors.xml
中配置一个大红色#FFFF0000
(ARGB格式), 关联关系如下图:
重新打包,换肤效果如下:
另外还有<resTextColorName>
用于指定当前控件的文本颜色
, 也是直接关联colors.xml
,就不再复述了。
2. 分界面配置
下面分界面介绍每个界面可配置皮肤的控件位置
重点再划三次:
皮肤设计者只需替换drawable
文件夹中图片, svga
文件中动画,colors.xml
中颜色值,就可以达到换肤效果!!!
皮肤设计者只需替换drawable
文件夹中图片, svga
文件中动画,colors.xml
中颜色值,就可以达到换肤效果!!!
皮肤设计者只需替换drawable
文件夹中图片, svga
文件中动画,colors.xml
中颜色值,就可以达到换肤效果!!!
2.1. 配置EULA第一次登陆的第一个界面
下面所有的<SkinParams>
都位于 <type area="EULA">
中。
2.1.1. 配置全底图
widgetResName = content + widgetClassName = ContentFrameLayout
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
<type area="EULA"> <!--第一次登陆的第一个界面-->
<!--配置全底图-->
<SkinParams>
<widgetResName>content</widgetResName>
<widgetClassName>ContentFrameLayout</widgetClassName>
<resBgType>drawable</resBgType>
<resBgName>eula_content</resBgName>
<svgaBgName>eulasvga_content</svgaBgName>
</SkinParams>
</type>
...
</skinparamlist>
示例换肤效果如下:
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
drawable
目录下的eula_content.webp
文件来实现不同的背景。 - 改变
svga
目录下的eulasvga_content.svga
文件来实现不同的动画。 - 改变
resBgType = color
以使用颜色配置背景。
2.1.2. 配置同意并继续按钮
widgetResName = content + widgetClassName = ContentFrameLayout
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
<type area="EULA"> <!--第一次登陆的第一个界面-->
...
<!--配置同意并继续按钮-->
<SkinParams>
<widgetResName>eula_accept</widgetResName>
<widgetClassName>Button</widgetClassName>
<resBgType>color</resBgType>
<resBgName>eula_eula_accept</resBgName>
<resTextColorName>eulatext_eula_accept</resTextColorName>
</SkinParams>
</type>
...
</skinparamlist>
我们把背景设置为#80FFFFFF
(半透明白色),文本色设计成#FFFF0000
(红色), colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="eula_eula_accept">#80FFFFFF</color>
<color name="eulatext_eula_accept">#FFFF0000</color>
</resources>
示例换肤效果如下:
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中eula_eula_accept
的值来实现不同背景颜色。 - 改变
colors.xml
中eulatext_eula_accept
的值来实现不同文本颜色。 - 改变
resBgType = drawable
并使用图片配置背景。
2.2. 配置HomeActivity登陆完成后的主显示界面
下面所有的<SkinParams>
都位于 <type area="HomeActivity">
中。
2.2.1. 配置全底图
widgetResName = root_view+ widgetClassName = FrameLayout
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
<!--配置全底图-->
<SkinParams>
<widgetResName>root_view</widgetResName>
<widgetClassName>FrameLayout</widgetClassName>
<resBgType>drawable</resBgType>
<resBgName>home_root_view</resBgName>
<svgaBgName>homesvga_root_view</svgaBgName>
<isTransparentAllChild>true</isTransparentAllChild>
</SkinParams>
</type>
...
</skinparamlist>
需要我们在drawable
文件夹下放入home_root_view.webp
, 在svga
文件夹下放入homesvga_root_view.svga
我们放入的示例home_root_view.webp
如下图:
homesvga_root_view.svga
如下效果:
示例换肤效果如下:
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
drawable
文件夹中home_root_view.webp
文件来实现不同的背景。 - 改变
svga
中homesvga_root_view.svga
文件来实现不同的动画效果。 - 改变
resBgType = color
并使用颜色配置背景。
2.2.2. 配置手机信号栏的背景
widgetResName = statusBarBackground+ widgetClassName = View
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
...
<!--配置手机信号栏的背景-->
<SkinParams>
<widgetResName>statusBarBackground</widgetResName>
<widgetClassName>View</widgetClassName>
<resBgType>color</resBgType>
<resBgName>home_statusbarbackground</resBgName>
</SkinParams>
</type>
...
</skinparamlist>
我们把背景设置为#99000000
(半透明黑色), colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="home_statusbarbackground">#99000000</color>
</resources>
示例换肤效果如下(黄色圈出的区域):
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中home_statusbarbackground
的值来实现不同背景颜色。 - 改变
resBgType = drawable
并使用图片配置背景。
2.2.3. 配置whatApp标题所在栏背景和文本色
widgetResName = toolbar+ widgetClassName = BidiToolbar
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
...
<!--配置whatApp标题所在栏背景和文本色-->
<SkinParams>
<widgetResName>toolbar</widgetResName><!--控件id-->
<widgetClassName>BidiToolbar</widgetClassName>
<resBgType>color</resBgType>
<resBgName>home_toolbar</resBgName>
<resTextColorName>hometext_toolbar</resTextColorName>
</SkinParams>
</type>
...
</skinparamlist>
我们把背景设置为#80000000
(半透明黑色), whatsApp
的文本色设计成#FFFF0000
(红色), colors.xml
配置如下:
<resources>
...
<color name="home_toolbar">#80000000</color>
<color name="hometext_toolbar">#FFFF0000</color>
</resources>
示例换肤效果如下(黄色圈出的区域):
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中home_toolbar
的值来实现不同背景颜色。 - 改变
colors.xml
中hometext_toolbar
的值来实现不同文本颜色。 - 改变
resBgType = drawable
并使用图片配置背景。
2.2.4. 配置tab切换的背景和文本色(文本色特殊处理)
widgetResName = tabs+ widgetClassName = HomePagerSlidingTabStrip
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
...
<!--配置tab切换的背景-->
<SkinParams>
<widgetResName>tabs</widgetResName>
<widgetClassName>HomePagerSlidingTabStrip</widgetClassName>
<resBgType>color</resBgType>
<resBgName>home_tabs</resBgName>
</SkinParams>
</type>
...
</skinparamlist>
我们把背景设置为#80000000
(半透明黑色), 而tab
页的文本需要特别处理,直接使用resTextColorName
设置是无效的, 因为whatApp
在tab页切换时会每次都动态去设置颜色,所以这里我们要用到一个新的特性,叫强制同名覆盖
。
逆向whatsApp
发现,它使用了homeActivityTabActive
对应选中tab
的文本色,homeActivityTabInactive
对应未选中tab
的文本色。
而我们要做的就是在colors.xml
里加 入homeActivityTabActive
+homeActivityTabInactive
强制同名覆盖原生的颜色。
我们这里给tab选中设置#FFEB3B
(深黄色),未选中设置#80FFEB3B
(淡黄色)。
colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="home_tabs">#80000000</color>
<!--home对话的tab文本颜色,tab选中和tab未选中,替换-->
<color name="homeActivityTabActive">#FFEB3B</color>
<color name="homeActivityTabInactive">#80FFEB3B</color>
</resources>
示例换肤效果如下(黄色圈出的区域):
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中home_tabs
的值来实现不同背景颜色。 - 改变
colors.xml
中homeActivityTabActive
的值来实现tab选中时的文本颜色。 - 改变
colors.xml
中homeActivityTabInactive
的值来实现tab未选中时的文本颜色。 - 改变
resBgType = drawable
并使用图片配置背景。
虽然皮肤设计者不需要了解,但这里还是捎带提一句:
强制同名覆盖
意味着homeActivityTabActive
和homeActivityTabInactive
的名字和类型(color
)是不能被改变的。因为要和whatApp
内部使用的保持完全一致。而像
home_tabs
其实是可以改名的,叫home_tabs_abcdef
都没问题,只要对应在colors.xml
中有
home_tabs_abcdef
定义即可。
2.2.5. 配置tab 第一列(对话)下的list列表项的内部文本色(左上角主title+右上角时间+左下角子titile+群组新消息提醒+整体背景图)
widgetResName = conversations_row_contact_name+ widgetClassName = TextEmojiLabel
:左上角主title,对应控件区域如下:
widgetResName = conversations_row_date+ widgetClassName = WaTextView
:右上角时间,对应控件区域如下:
widgetResName = single_msg_tv+ widgetClassName = TextEmojiLabel
:左下角子titile,对应控件区域如下:
widgetResName = msg_from_tv+ widgetClassName = TextEmojiLabel
:群组新消息提醒,对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
...
<!-- 配置tab 第一列(对话)下的list列表项的内部文本色(左上角主title+右上角时间+左下角子titile++群组新消息提醒)-->
<SkinParams>
<widgetResName>conversations_row_contact_name</widgetResName>
<widgetClassName>TextEmojiLabel</widgetClassName>
<resTextColorName>hometext_conversations_row_contact_name</resTextColorName>
</SkinParams>
<SkinParams>
<widgetResName>conversations_row_date</widgetResName>
<widgetClassName>WaTextView</widgetClassName>
<resTextColorName>hometext_conversations_row_date</resTextColorName>
</SkinParams>
<SkinParams>
<widgetResName>single_msg_tv</widgetResName>
<widgetClassName>TextEmojiLabel</widgetClassName>
<resTextColorName>hometext_single_msg_tv</resTextColorName>
</SkinParams>
<SkinParams>
<widgetResName>msg_from_tv</widgetResName>
<widgetClassName>TextEmojiLabel</widgetClassName>
<resTextColorName>hometext_msg_from_tv</resTextColorName>
</SkinParams>
</type>
...
</skinparamlist>
我们这里给文本都设设置#FFFFFFFF
, colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
.....
<color name="hometext_conversations_row_contact_name">#FFFFFFFF</color>
<color name="hometext_conversations_row_date">#FFFFFFFF</color>
<color name="hometext_single_msg_tv">#FFFFFFFF</color>
<color name="hometext_msg_from_tv">#FFFFFFFF</color>
</resources>
示例换肤效果如下(黄色圈出的区域):
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中hometext_conversations_row_contact_name
的值来实现左上角主title文本颜色 - 改变
colors.xml
中conversations_row_date
的值来实现右上角时间的文本颜色。 - 改变
colors.xml
中hometext_single_msg_tv
的值来实现左下角子titile的文本颜色。 - 改变
colors.xml
中hometext_msg_from_tv
的值来实现群组新消息提醒的文本颜色。
新增:
widgetResName = contact_row_container+ widgetClassName = RelativeLayout
, list项的整体背景图, 对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
...
<!--配置tab下的list列表项背景-->
<SkinParams>
<widgetResName>contact_row_container</widgetResName>
<widgetClassName>RelativeLayout</widgetClassName>
<resBgType>drawable</resBgType>
<resBgName>home_contact_row_container</resBgName>
</SkinParams>
</type>
...
</skinparamlist>
home_contact_row_container.webp
如下为半透明的白色遮罩:
示例换肤效果如下(黄色圈出的半透明的白色遮罩):
上述换肤配置是针对列表中所有项生效的
2.2.6. 配置tab 第二三列(动态,通话)下的list列表项的内部文本色(我的动态+点击以添加动态)
widgetResName = contact_name+ widgetClassName = TextEmojiLabel
:我的动态,对应控件区域如下:
widgetResName = date_time+ widgetClassName = WaTextView
:点击以添加动态,对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
...
<!-- 配置tab 第二列(动态)下的list列表项的内部文本色(我的动态+点击以添加动态)-->
<SkinParams>
<widgetResName>contact_name</widgetResName>
<widgetClassName>TextEmojiLabel</widgetClassName>
<resTextColorName>hometext_contact_name</resTextColorName>
</SkinParams>
<SkinParams>
<widgetResName>date_time</widgetResName>
<widgetClassName>WaTextView</widgetClassName>
<resTextColorName>hometext_date_time</resTextColorName>
</SkinParams>
</type>
...
</skinparamlist>
我们这里给我的动态的文本设置#FFFFFFFF
, 点击以添加动态的文本设置#99FFFFFF
, colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
......
<color name="hometext_contact_name">#FFFFFFFF</color>
<color name="hometext_date_time">#99FFFFFF</color>
</resources>
示例换肤效果如下(黄色圈出的区域):
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中hometext_contact_name
的值来实现我的动态文本颜色 - 改变
colors.xml
中hometext_date_time
的值来实现点击以添加动态的文本颜色。
第三列的通话记录和第二列是同一份控件,所以配置完第二列,同时也配置完了第三列
2.2.7. 配置底部的一些提示文本颜色
底部还有一些提示文本,需要找到它们,并更改文本颜色, 这是我目前发现的一些,它们在不同的状态条件下才会显示出来
widgetResName = conversations_row_tip_tv+ widgetClassName = WaTextView
:点按对话显示更多选项文本颜色,对应控件区域如下:
widgetResName = welcome_calls_message+ widgetClassName = WaTextView
:点击下方的 跟whatsApp 联系人开始通话,对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
...
<!--配置底部的一些提示文本颜色-->
<SkinParams>
<widgetResName>conversations_row_tip_tv</widgetResName>
<widgetClassName>WaTextView</widgetClassName>
<resTextColorName>hometext_conversations_row_tip_tv</resTextColorName>
</SkinParams>
<SkinParams>
<widgetResName>welcome_calls_message</widgetResName>
<widgetClassName>WaTextView</widgetClassName>
<resTextColorName>hometext_welcome_calls_message</resTextColorName>
</SkinParams>
</type>
...
</skinparamlist>
colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="hometext_conversations_row_tip_tv">#99FFFFFF</color>
<color name="hometext_welcome_calls_message">#99FFFFFF</color>
</resources>
因为是条件触发的,所以只在以前的手机上测试过,这里就不上图了。
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中hometext_conversations_row_tip_tv
的值来实现点按对话显示更多选项文本颜色文本颜色 - 改变
colors.xml
中hometext_welcome_calls_message
的值来实现点击下方的 跟whatsApp 联系人开始通话的文本颜色。
2.2.8. 配置底部的float按钮
widgetResName = fab+ widgetClassName = FloatingActionButton
:底部的float按钮,对应控件区域如下:
它是由两部分组成,背景色+中间的小图
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="HomeActivity"> <!--登陆完成后的主显示界面-->
...
<!-- 配置底部的float按钮-->
<SkinParams>
<widgetResName>fab</widgetResName>
<widgetClassName>FloatingActionButton</widgetClassName>
<resBgType>color</resBgType>
<resBgName>home_fab</resBgName>
</SkinParams>
</type>
...
</skinparamlist>
home_fab
这里是指定背景色,我们给一个颜色值#FFFFA308
(米黄色), colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="home_fab">#FFFFA308</color>
</resources>
中间的小图采用强制同名覆盖
的方式, 这次强制同名覆盖
是覆盖whatsApp
的对应同名图片资源
这里不再是assets
目录,而是res
目录,皮肤设计者需要提供hdpi
,xhdpi
,xxhdpi
三种图片尺寸(whatsApp
内部也是三种图片尺寸)
每种尺寸提供ic_action_compose.png
+ ic_action_new_call.png
+ ic_camera_status_compose.png
三张图, 这三张图对应在三个tab页下float按钮不同的小图设置, 如下图所示
示例换肤效果如下(黄色圈出的区域):
第一列:
第二列:
第三列:
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中home_fab
的值来改变float按钮文本颜色。 - 改变
ic_action_compose.png
+ic_action_new_call.png
+ic_camera_status_compose.png
来改变float按钮中间小图。
在原生的
watchApp
中有三种尺寸,hdpi
,xhdpi
,xxhdpi
,所以我们要换图,就必须所有尺寸都要换掉,不然可能在某些手机上图片会显示异常(较大或较小)
2.2.9. 强制覆盖图标
2.2.9.1 相机图标
皮肤设计者 可替换以下来实现不同效果的换肤:
- 替换
waDesign\res\drawable-hdpi-v4
和waDesign\res\drawable-xxhdpi-v4
中的ic_cam_white.png
实现换肤。
测试替换图如下:
显示效果如下(左上角黄色框出部分):
2.2.9.2 搜索菜单图标
皮肤设计者 可替换以下来实现不同效果的换肤:
- 替换
\waDesign\res\drawable-hdpi-v4
,\waDesign\res\drawable-xhdpi-v4
,\waDesign\res\drawable-xxhdpi-v4
中的ic_action_search.png
实现换肤。
测试替换图如下:
显示效果如下(右上角黄色框出部分):
2.2.9.3 搜索菜单图标
皮肤设计者 可替换以下来实现不同效果的换肤:
- 替换
\waDesign\res\drawable-hdpi-v4
,\waDesign\res\drawable-mdpi-v4
,\waDesign\res\drawable-xhdpi-v4
,\waDesign\res\drawable-xxhdpi-v4
中的moreoverflow.png
实现换肤。
测试替换图如下:
显示效果如下(右上角黄色框出部分):
2.3. 配置Conversation会话聊天的界面
下面所有的<SkinParams>
都位于 <type area="Conversation">
中。
2.3.1. 配置手机信号栏的背景
widgetResName = statusBarBackground+ widgetClassName = View
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="Conversation"> <!--点击进入会话聊天的界面-->
<!--配置手机信号栏的背景-->
<SkinParams>
<widgetResName>statusBarBackground</widgetResName>
<widgetClassName>View</widgetClassName>
<resBgType>color</resBgType>
<resBgName>conv_statusbarbackground</resBgName>
</SkinParams>
</type>
...
</skinparamlist>
colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="conv_statusbarbackground">#FF26212B</color>
</resources>
示例换肤效果如下(黄色圈出的区域):
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中conv_statusbarbackground
的值来改变背景色。 - 改变
resBgType=drawable
来设置背景图。
2.3.2. 配置标题栏背景
widgetResName = toolbar+ widgetClassName = BidiToolbar
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="Conversation"> <!--点击进入会话聊天的界面-->
...
<!--配置标题栏背景-->
<SkinParams>
<widgetResName>toolbar</widgetResName>
<widgetClassName>BidiToolbar</widgetClassName>
<resBgType>color</resBgType>
<resBgName>conv_toolbar</resBgName>
</SkinParams>
</type>
...
</skinparamlist>
colors.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="conv_toolbar">#FF3D3445</color>
</resources>
示例换肤效果如下(黄色圈出的区域):
皮肤设计者 可替换以下来实现不同效果的换肤:
- 改变
colors.xml
中conv_toolbar
的值来改变背景色。 - 改变
resBgType=drawable
来设置背景图。
2.3.3. 配置会话壁纸
widgetResName = conversation_background+ widgetClassName = WallPaperView
对应控件区域如下:
skinparamlist.xml
配置如下:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
...
<type area="Conversation"> <!--点击进入会话聊天的界面-->
...
<!-- 配置会话壁纸-->
<SkinParams>
<widgetResName>conversation_background</widgetResName>
<widgetClassName>WallPaperView</widgetClassName>
<resBgType>drawable</resBgType>
<resBgName>conv_conversation_background</resBgName>
<svgaBgName>convsvga_conversation_background</svgaBgName>
</SkinParams>
</type>
...
</skinparamlist>
需要我们在drawable
文件夹下放入conv_conversation_background.webp
, 在svga
文件夹下放入conv_conversation_background.svga
我们放入的示例conv_conversation_background.webp
如下图:
我们放入的示例convsvga_conversation_background.svga
如下图:
示例换肤效果如下:
2.3.4.1 toolbar上的几个按钮
皮肤设计者 可替换以下来实现不同效果的换肤:
conv_back.png
:
ic_action_videocall
:
ic_action_call.png
:
示例换肤效果如下:
2.3.4.2 底部输入栏
皮肤设计者 可替换以下来实现不同效果的换肤:
ib_new_round.9
.png:框选背景,点9图
ib_emoji.png
:
ib_attach.png
:
ib_camera.png
:
示例换肤效果如下:
皮肤设计者 可通过skinparamlist.xml
的resTextColorName
和resTextColorHintName
改变输入文本的颜色和文本Hint的颜色:
<?xml version="1.0" encoding="utf-8"?>
<skinparamlist>
<type area="Conversation"> <!--点击进入会话聊天的界面-->
<!-- 配置底部输入文本颜色-->
<SkinParams>
<widgetResName>entry</widgetResName>
<widgetClassName>MentionableEntry</widgetClassName>
<resTextColorName>convtext_entry</resTextColorName>
<resTextColorHintName>convtexthint_entry</resTextColorHintName>
</SkinParams>
</type>
</skinparamlist>
示例换肤效果如下:
2.3.4.3 底部麦克风
皮肤设计者 可替换以下来实现不同效果的换肤:
input_circle.png
:麦克风的外框
input_mic_white.png
:麦克风的居中图标
示例换肤效果如下(黄色框选部分):