小米主题设计教程

主题教程

(2.10.30)

一、MIUI主题

首先，我们手机的UI是由很多部分组成的，如锁屏、通知栏、桌面壁纸、图标等等。如果我们把手机比喻成一个房子，上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。那我们可以认为原生的android系统就是一个毛坯房，MIUI是在这之上的一个简装，自定义主题就是你自己给房子做的装修。

MIUI提供主题自定义功能，其实就相当于帮你请了一个工程队，你可以用从众多装修方案（主题包）中选择自己喜欢的效果，最后交给工程队实施。而装修方案可大可小，大至全屋翻新，小到只换一盏灯。目前MIUI会自带两个主题包，达人们也可以设计自己的主题包，大家就可以借用达人们共享出来的设计。

二、准备工作

1.主题测试机器

工欲善其事必先利其器，做题之前首先得有一部能刷MIUI的手机作为测试机。MIUI现有支持v4的机型分成按分辨率，可分成两类480p（480*854和480*800）与720p（720*1280），分辨率对以后的主题制作有这影响，见后面详述。

480p的机子有：

小米手机1/1S (自带MIUI)、HTC Desire S、HTC Incredible S、Samsung I9100、华为Honor、索爱LT18i 、Google Nexus S

720P的机子有：

小米手机2(自带MIUI)、Google Galaxy Nexus、Galaxy S III I9300、Google Galaxy Nexus、华为Ascend D1、索尼LT26i、HTC One X、LG LU6200

附上刷机教程连接/download.html

注意：在针对新版主题客户端的测试方案上线之前，主题制作者只能在2.10.26开发版或之前版本进行测试

2.设计界面

制作主题之前可先根据官方提供的主题界面模板，对主题界面进行设计，然后再进行切图，将设计稿切片，分成各个小部分，用与主题制作。

3.主题制作软件的安装

官方主题工具：/thread-642823-1-1.html

使用此工具需要java环境的支持，未安装的同学请下载：

/themeeditor/jre6_2.8.3_aajfe.zip

解压得jre6文件夹，将其放到到MIUIThemeEditor目录下(图1所示)。

1.windows下运行,“run-windows.bat“

2.linux下运行,“run-linux.sh”

3.mac os运行,“mand”

图1

三、主题制作

1.主题工具的使用

打开主题工具后可点击文件新建主题（图2），或选择打开主题模板

点击下载制作模板：v4主题模板.mtz(25.15 MB, 下载次数: 52673)

点击下载补全界面模板：下载

图2

解压主题包：拖拽后缀名为mtz格式的主题文件，置于主题工具上（如图3），等待一段时间，便会有一个与mtz文件名称相同的文件夹陈升，这便是解包操作。

图3

打开主题以后可看到（图4）主题名称、制作者、设计者，以及主题版本等信息，此为必填项目，ui版本选择为4.0，点击下方保存主题按钮主题文件夹内就会生成description.xml文件，来记录下这些信息。

图4

主题打包mtz：点击工具下方打包即可生成mtz格式主题文件。点击打包并导入手机可将主题打包并导入手机并应用，前提必须开启手机的USB调试，并安装手机驱动，驱动可通过豌豆荚、qq手机管家等android pc管理软件进行安装，能连上这类管理软件即代表手机驱动安装完成。

2.图片替换

不同分辨率的手机，其图片素材尺寸以及素材存放的位置也有所不同。如图5所示

图5

以桌面图标为例，480p图标文件放在drawable-hdpi，720p则为drawable-xhdpi，其他模块的文件位置存放位置也与之相似。

桌面图标替换：打开主题工具，先在左边选择要替换的图标，然后点击图片选择对应的图标进行替换，也可使用拖拽的方式，将要替换的图标直接拖至其上方，完成替换。（见图6）

图6

图标除了直接替换对应的图片外，还可以通过几张特定的图片来控制图标风格风格（主要用于第三方图标的风格统一），icon_border.png为最上面的一层；icon_mask.png控制图标显示大小形状，黑色区域显示图标形状；icon_pattern.png为不变色背景，

icon_background.png变色背景，会根据图标颜色生成各种颜色背景。如图7所示，

图7

主题图片素材当中还有一种重要的图片格式，叫做9.png。这种格式的图片是安卓平台上新创的一种拉伸却不失真的图片，这种图片主要用于一些尺寸不固定的图片，或者上面的是上面的内容区与需要特殊控制的图片，比如短信气泡，输入文字框等。这种图片的文件名会是xxx.9.png这种格式，用主题工具解包以后，所生成的9.png图片其上下左右各会有1像素黑边，

如图8所示

1号黑色条位置控制图片横向拉伸区域，就是左图纵向绿色区域

2号黑色条位置控制图片纵向拉伸区域，就是左图横向绿色区域

3号黑色条位置控制输入框内文字显示的上下位置，即右图紫色区域上下边界

4号黑色条位置控制输入框内文字显示的左右边距，即右图紫色区域左右边界

图8

黑边可以在ps内直接画上，也可通过主题工具内附带的软件进行编辑（如图9）。在使用画黑边时如果失误多选了部分，可按住shift键，再点击即可擦掉，最后按ctrl+s保存。需要注意的是9.png图片必须画上黑边，不然在应用图片的时候，即使放了对应的图片手机上也不会显示。用ps画黑边的时候需要注意，必须用纯黑色，不能有色差。

图9

3.主题工具中的模块介绍

主题内基本模块

Com.android.contacts 通讯录以及拨号