whatsApp皮肤配置流程

最新推荐文章于 2020-12-08 11:00:39 发布

花熊

最新推荐文章于 2020-12-08 11:00:39 发布

阅读量1.3k

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/hgy413/article/details/102914896

版权

其他专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

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动画 来填充
whatsApp的指定界面的指定控件区域！！！，

也就是替换下面的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>