查看: 49655|回复: 13

【主题教程】教你如何解包添加更多第三方图标和配置方法

[复制链接]

【主题教程】教你如何解包添加更多第三方图标和配置方法

发表于 2020-9-21 10:49:21 显示全部楼层 49655 13
近期有很多做主题的设计师在编辑器上上传第三方图标的时候,经常遇到无法成功的问题,这个有可能是编辑器还不够完善的原因,需要待后续持续的更新迭代升级。除了在第三方编辑器上上传第三方图标之外,我们也可以自己手动解包主题文件在添加第三方图标。

在学习本教程之前,需要您学下好如何对主题文件进行解压和打包,学习好后才能够来学习此教程。

【主题教程】学会主题文件本地化正确解包和打包   =====点击传送学习===>【传送门】



5.gif



1、解包主题文件,同时解包ICONS文件模块

1.png

(解压主题theme文件获得的文件)



2.png

(解压ICONS模块获得的文件)



2、了解ICON模块,以及配置文件结构

通过第一步发解压,我们可以看到一个ICONS模块解压后,获得的是一个res资源文件夹,以及一个allApps.xml的配置文件。到这里我们可以大概的理解为,当我们添加一个图标的时候(无论是系统还是第三方)都需要在放好素材资源之后,在allApps.xml里面配置,这样才能够将图标文件和手机上的APP应用连接起来。

(1)打开res文件夹进入到具体的图标资源内了解放置位置

3.png


通过上面的截图,我们可以知道,我们的图标文件是需要放置到这个位置,因此我们在添加第三方图标的时候我们需要将icon文件,放置到【icons---res---drawable-xxhdpi】文件夹下面。

(2)正确命名第三方图标的文件名称

为了能够更好的规范化命名,我们可以基于官方提供的主题模块,在allApps.xml里面查询一些已经有的文件名称。例如下面打开allApps.xml的样子。

4.png



allApps.xml里面的代码解释:

<!-- 安医生 -->:这个是注释的意思,通过<!--  XXX -->这样的形式包裹起来的内容,将不会被执行,可以用来当做说明,大家打开看到就知道这段代码的意思。
<icon name="ic_launcher_anyisheng_doctoran.png" :这里的icon name 是指你的icon的命名,这个地方其实可以根据自己的需要自行命名的,没有太大的限制一定要命名为某个名字,但为了整体更好看,我们建议是以下面这种形式进行名称:【launcher_应用包名.png】这样的形式。(其中的包名,是指应用的package名称)

package="com.anyisheng.doctoran"/>:这里的packa是指应用的包名,应用的包名可以通过第三方软件查询到,例如你搜索安装一个【包名查看工具】就可以查询到应用的包名是多少。

通过上面的学习,我们可以明白2点:(1)命名一个icon文件可以用launch_包名.png的形式命名,(2)包名可以通过第三方工具查询到。

(3)将命名好的第三方文件配置和到allApps.xml文件中

通过第二点,我们将文件命名好后,我们需要在allApps.xml里面进行配置,这样我们就可以将图标和手机APP连接起来。

我们将allApps.xml文件打开后,我们在任何一个位置(推荐在末尾)另起一行,然后用以下格式填写进去。

模板如下:
  1.     <!--应用名称 -->
  2.     <icon name="launcher_包名.png" package="包名"/>
复制代码


设计师需要将应用名称,以及包名通过第三方工具查询后,填写进去。我们以QQ阅读为例,填写结果如下。

  1.     <!-- QQ阅读 -->
  2. <icon name="launcher_qq_reader.png" package="com.qq.reader"/>
复制代码
(为什么我看到有一些icon name前面加了个ic_launcher,其实这个ic_是OPPO特定的命名方式,设计师在用本地添加的方式时可不添加。)

(4)将文件添加好后,重新打包回去ICONS模块

我们将res以及allApps.xml文件全选后,打包为一个zip文件(一定要zip,rar是不行的),如下方式。

5.png



将打包后的icons.zip文件,重新命名,去掉.zip,成为一个icons文件,如下:

6.png


将icons文件拿到主题文件根目录,同时删除icons文件夹,最终得到的文件结构如何:

7.png



将主题根目录下的文件全选,打包为一个XXX.zip文件,并将文件重命名为XXX.theme文件,到此第三方图标就添加完毕了。

(5)总结,第三方图标添加配置过程

【解压主题文件】---【解压ICONS模块】---【根据包名和建议方式命名图标文件】---【将图标放置到res-drawable-xxhdpi文件夹下】---【在allApps.xml下配置添加的第三方图标】---【打包icons文件夹为icons.zip】---【修改icons.zip为icons】---【复制icons到主题根目录,删除icons文件夹】---【打包主题为XXX.theme文件】---【拿到手机上测试效果】


附件将提供官方主题模块里面的allApps.xml文件,同时分享设计师群,群友分享的930个第三方图标资源,方便大家绘制图标可直接查询包名和命名方式。


【官方模板】allApps.zip (11.8 KB, 下载次数: 131901)
您需要登录后才可以回帖 登录 | 立即注册

以上教程部分相关示例图片来自设计师群,设计师:_寞非_言,特此感谢!
另外补充在编辑器上上传第三方ICON的一些操作方法:


1、做好第三方ICON图标
2、根据编辑器上第三方图标命名的---【命名规则请点击规则说明查看】查看图标命名
3、将命名运用到绘制好的ICon上
4、上传第三方ICON图标
5、最后完成其他素材上传,并导出测试
发表于 2020-9-21 10:52:40 回复

使用道具 举报

好麻烦
发表于 2020-10-2 22:44:45 回复

使用道具 举报


您好,这个文件的配置一般是一次的,配置一次之后,后面基本都可以直接复用,除非有新增加。
发表于 2020-10-9 10:09:32 回复

使用道具 举报

其他平台都是系统直接包名=包名.png,这样就不需要这样手动配置了
发表于 2020-12-10 17:00:15 回复

使用道具 举报


其实这种本地解包的方式,命名上面可以自己定义的,就如你这边说的包名.png,这种其实也是可以的。
发表于 2020-12-10 17:15:53 回复

使用道具 举报


官方大大你好,我也是在包名这块卡壳了,如果我直接定义成【包名.png】不会不合规范把?
因为手头上的图标已经是用了【包名.png】去命名了,且已经适配了差不多600+,单独再修改一份感觉工作量巨大
发表于 2020-12-12 15:22:11 回复

使用道具 举报


正常来说不会的,你只需要在配置文件里面对应上即可。本地添加在icon命名上可以自己去定义。
发表于 2020-12-14 09:37:53 回复

使用道具 举报


好的谢谢大大的回复
发表于 2020-12-17 15:46:25 回复

使用道具 举报

你好,我通过官方主题编辑器制作主题,在上传第三方图标时多次出现图片命名错误(实际无误)的情况,于是就导出主题包(经测试适配可生效),然后按照教程,通过本地解包打包的方式将第三方图标添加到主题包中,再导入手机里测试,结果只生效了遮罩,图标样式还是默认主题的,请问这是什么原因?
发表于 2021-6-13 14:13:13 回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册