讯飞输入法皮肤修改指北（一）

想修改个讯飞输入法皮肤，结果翻遍酷安只找到一篇，只好自己摸几篇粗浅的修改教程。一篇应该写不完，分成几次来写，应该不会鸽吧。

因为也是小白一枚，全靠自己摸索出来的，所以难免有错漏，而且讲得不深，动画之类的内容可能也不会涉及（看我心情），小白可以凑合着看看。

首先上官方论坛的教程（可以在阅读本文之前先大致读一遍）：https://pan.baidu.com/s/18K8SfgfsxX_55Rhc33EFPQ提取码: d2dr

这里就要吐槽讯飞了，皮肤改动自由度小也就算了，连个详细点的官方说明文件都没有。。。简陋的一批。

工具：文件管理器（推荐TM管理器2）、电脑、PS、一个方便阅读ini文件的IDE（可选）

一、认识输入法文件

首先你要有一款要修改的皮肤，没有的话去皮肤商城下载一款。

打开文件管理器：iFlyIME-skin-theme，你会看到一个及以上的后缀为it的文件，这就是输入法皮肤文件。

查看：点击文件- zip查看，点击 preview. png即可查看皮肤预览。

将这个 it文件传输到你的电脑上。重命名后缀为 zip并解压。你将看到如下内容:

preview. png/ preview. jpg：皮肤的预览图

info. ini:皮肤的关键信息配置文件 

font. ttf:皮肤所用的字体，甚至可能不止一个

* music文件夹：保存有音效的皮肤的音乐文件

* icon_ music. png, icon_ anim. gif:这是在皮肤商城每个皮肤预览图左下角的标志（不用管，删掉也没事）1080文件夹： 

image. ini:各种 UI图片的配置文件

style. ini：配置各个界面的背景、颜色等等，是皮肤最重要的配置文件

* anim. ini和 anim- style. ini:动画效果配置文件

* offset. ini和 offset_ land. ini:各组件位置偏移量，提高自由度（打*的文件或文件夹可能会没有，关系不大）

res文件夹：保存所有 UI图片

二、认识 info. ini

顾名思义， info文件保存的是皮肤的基本信息。

这个配置文件里注释挺齐全的，也没什么好讲，可以自己调一下键盘透明度，如果皮肤本身不支持自定义工具栏也可以在这里修改。

如果修改的皮肤要和原皮肤同时保存在手机里，唯一标志 ID那行也要照注释改成自己的，以免冲突。

三、修改 UI图片

如果只是想修改一下某些图标的样子，基本上不需要修改配置文件，直接替换掉res文件里对应的图片即可。例如以某皮肤为例：

打开它的res文件夹可以看到：

因为特色鲜明，各张图片对应的功能键其实还是比较清楚的。

可以看出输入法的背景图片是bg.jpg，我们把这张图片换成自己想要的图片就可以实现修改背景图片的目的。

其他界面也是同样的操作，替换时保证图片尺寸一致、文件名一致即可，除此之外如果是带圆角的图片请仔细阅读下文中关于Scale的内容。

详细的高阶图片规范文件可以参照官方文档：https://pan.baidu.com/s/1FZ2I1SGrfktoZalydrGKgg提取码: 824k

当然如果只是单纯替换图片的话，这份官方文档可以不看（也不建议看）。

但是很多皮肤的UI图片事实上没有这么清晰，如果要清楚知道哪张图片属于哪个功能区还需要进一步阅读image.ini文件。

这个文件类似于我们书本的目录，标记了每一张图片的来源，同时注释也比较齐全。

整体画风是这样的：

看到第3和4行，我们可以知道1号图片来源是bg.png，也就是我们在res文件夹里看到的一张图片，根据第2行注释，我们还知道1号图片是用来作为输入法大背景图片的。

Type值不用管（因为我也没搞懂）。有大佬知道的话可以说说。

再看下去，我们知道261号图片的来源图也是bg.png，事实上有些图片都是可以重复利用的，比如26个字母键的按键图片都是一样的话，并不需要保存26张图片。

再看到18行这段，这是输入法工具栏的背景，但是与上面几段不同的是这里出现了一行Scale=10,10,1070,138。

这就要讲到图片的拉伸区域（重点），它的作用是防止图片（尤其是圆角图片在拉伸过程中变形）。

我们可以看到在图片放大的同时，圆角也被放大了；同理，图片横向压缩的话，圆角会变成椭圆角。如果各个按键因为大小不同，纵横比不同（竖屏和横屏状态下），圆角个个不同，界面就会很难看。 

为此，给出的解决方案就是设定拉伸区域 只拉伸中间部分，边缘部分则在拉伸以后直接拼接上去，这样就可以保证边缘圆角不变形了。

Scale的4个数值就是标定上图这四条像素位置的，它们分别表示左/上/右/下4条线。

如何测得这4条线的像素位置：可以用PS打开图片，点左侧工具栏“移动工具”---->点击图片---->图片中央会出现可移动圆点---->移动圆点即可在上方工具栏看到像素信息。

左右两个数值看X值，上下两个数值看Y值。

将它们填入Scale的四个值中就可以了。

这次就先写到这里，借助官方文档和配置文件的注释，你应该可以借助注释完整通过替换图片来实现皮肤的二改了。

关于image.ini和其他内容，下次再讲吧。

注意：一定要注意中英文标点，不要用成中文符号！！！

也欢迎酷友关注我的酷安账号