whatsApp皮肤配置流程
文章目录
- 1. 皮肤包相关简介
- 1.1 怎么拷贝皮肤包到手机?
- 1.2 怎么制作新的皮肤包?
- 1.2.1 皮肤包中文件的映射关系?
- 1.2.1.1 question1 : 配置中怎么划分换肤主界面?
- 1.2.1.2 question2 : 配置中怎么关联`指定界面的指定控件区域`?
- 1.2.1.3 question3 : 配置中怎么关联`背景图片`?
- 1.2.1.5 question5 : 配置中怎么关联`背景svga动画`?
- 1.2.1.6 question6 : 配置中怎么关联`颜色`?
- 2. 分界面配置
- 2.1. 配置EULA第一次登陆的第一个界面
- 2.1.1. 配置全底图
- 2.1.2. 配置同意并继续按钮
- 2.2. 配置HomeActivity登陆完成后的主显示界面
- 2.2.1. 配置全底图
- 2.2.2. 配置手机信号栏的背景
- 2.2.3. 配置whatApp标题所在栏背景和文本色
- 2.2.4. 配置tab切换的背景和文本色(文本色特殊处理)
- 2.2.5. 配置tab 第一列(对话)下的list列表项的内部文本色(左上角主title+右上角时间+左下角子titile+群组新消息提醒+整体背景图)
- 2.2.6. 配置tab 第二三列(动态,通话)下的list列表项的内部文本色(我的动态+点击以添加动态)
- 2.2.7. 配置底部的一些提示文本颜色
- 2.2.8. 配置底部的float按钮
- 2.2.9. 强制覆盖图标
- 2.2.9.1 `相机图标`
- 2.2.9.2 `搜索菜单图标`
- 2.2.9.3 `搜索菜单图标`
- 2.3. 配置Conversation会话聊天的界面
- 2.3.1. 配置手机信号栏的背景
- 2.3.2. 配置标题栏背景
- 2.3.3. 配置会话壁纸
- 2.3.4.1 `toolbar上的几个按钮`
- 2.3.4.2 `底部输入栏`
- 2.3.4.3 `底部麦克风`
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
:麦克风的居中图标
示例换肤效果如下(黄色框选部分):
whatsApp皮肤配置流程相关推荐
- mysql主从配置流程
一.mysql主从配置原理 1.master将操作记录写到二进制日志中(binary log)中: 2.slave IO 线程将master的binary log events读写到它的中继日志(re ...
- mysql的bean配置_jsp+tomcat+mysql+sevlet+javabean配置流程
jsp+tomcat+mysql+sevlet+javabean配置流程 2010-5-9文字大小:大中小 作者:2007年跨越鸿沟.网址:http://blog.csdn.net/stupidwu/ ...
- Linux下svn搭建配置流程
Linux下svn搭建配置流程 一. 源文件编译安装.源文件共两个,为: 1. 下载subversion源文件 subversion-1.6.1.tar.gz http://d136 ...
- Phonegap win7下环境配置流程
2019独角兽企业重金招聘Python工程师标准>>> Phonegap win7下环境配置流程 注意:phonegap的配置有很多种,我这个只是其中一种. 一.准备工作: 1.A ...
- mysql+phpmyadmin配置流程
mysql+phpmyadmin配置流程: 环境:Apache+php5+mysql5 下载包:phpMyAdmin-2.11.9.4-all-languages-utf-8-only.tar ...
- oracle rac war配置,Oracle RAC安装配置流程
系统部分 1.建立用户 2.设定IP 3.每个节点的IP解析 4.SSH的配置 为用户等效性配置SSH(在所有节点上执行) 在安装Oracle RAC 10g期间,OUI需要把文件复制到集群中的其他主 ...
- Gitorious基本配置流程
一. GitHub.Gitorious对比: Gitorious与GitHub二者主要功能一样,都是git的版本管理仓库. 区别: 1. Gitorious比GitHub更早诞生: 2. Gitori ...
- Linux下svn 安装搭建配置流程
Linux下svn搭建配置流程 一. 源文件编译安装.源文件共两个,为: 1. 下载subversion源文件 subversion-1.6.1.tar.gz http://d136 ...
- webpack基本打包配置流程
项目搭建以及webpack打包配置流程 创建文件夹EC(文件夹和文件名根据需求自定义) 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.ht ...
最新文章
- HDU - 1520 Anniversary party [树形dp]
- C++里如何使用功能键(F1、F2·····)进行操纵?
- spring boot 邮件端口_不会吧,SpringBoot还能发送邮件发送邮件?快来看看如何操作吧
- Linux服务器 | 服务器模型与三个模块、两种并发模式:半同步/半异步、领导者/追随者
- (转)使用C#开发ActiveX控件
- linux快速cd多层目录,linux 下 cd - cd ~- 和多目录切换技巧(示例代码)
- python极简讲义 pdf_Python极简讲义:一本书入门数据分析与机器学习
- 现代大学英语精读第二版(第一册)学习笔记(原文及全文翻译)——16A - Who Shall Dwell?(生的机会留给谁?)
- 利用SPSS对数据转置和数据整理
- 【读书笔记】 - 《你只是看起来很努力》
- 小布机器人怎么断网_华硕“小布”智能机器人上手体验:造型呆萌可爱 全年龄段适用...
- 【原创】Moon在2005的辉煌
- SCI投稿全攻略—起飞站
- Hibernate4注解方法
- 超导量子计算机原型机,超导量子计算原型机“祖冲之号”有多强?戳链接带你了解“量子世界”...
- C语言之求两个整数之和
- 微信公众账号与网站信息对接
- 大数据分析所需要的十大技术
- 京东招聘数字人方向算法实习生
- 2012最新超全个性签名,走过路过不要错过哦!
热门文章
- 重装系统软件哪个好用?懒人重装系统方法推荐
- 【企业后备人才管理体系】企业人才梯队建设的管理策略
- 远东酒店拓展亚洲业务,在日本开设第一家酒店
- Wndows 主进程(Rundll32)已停止工作
- [论文学习]ORB: an efficient alternative to SIFT or SURF
- 计算机减法函数word,谁说Excel才能运算?Word计算功能同样强大,公式函数都不在话下-excel减法函数...
- qq炫舞手游显示无法连接版本服务器,炫舞手游无法连接版本服务器怎么办_QQ炫舞手游3.21无法连接版本服务器解决方法_游戏吧...
- 【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现
- @Transactional需要注意的问题
- win10 安装 ubuntu18.04双系统(以及英伟达驱动安装和各种设置)