小米主题设计教程

主题教程（2.10.30）一、MIUI主题首先，我们手机的UI是由很多部分组成的，如锁屏、通知栏、桌面壁纸、图标等等。如果我们把手机比喻成一个房子，上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。那我们可以认为原生的android系统就是一个毛坯房，MIUI是在这之上的一个简装，自定义主题就是你自己给房子做的装修。MIUI提供主题自定义功能，其实就相当于帮你请了一个工程队，你可以用从众多装修方案（主题包）中选择自己喜欢的效果，最后交给工程队实施。而装修方案可大可小，大至全屋翻新，小到只换一盏灯。目前MIUI会自带两个主题包，达人们也可以设计自己的主题包，大家就可以借用达人们共享出来的设计。二、准备工作主题测试机器工欲善其事必先利其器，做题之前首先得有一部能刷MIUI的手机作为测试机。MIUI现有支持v4的机型分成按分辨率，可分成两类480p（480*854和480*800）与720p（720*1280），分辨率对以后的主题制作有这影响，见后面详述。480p的机子有：小米手机1/1S（自带MIUI）、HTCDesireS、HTCIncredibleS、SamsungI9100、华为Honor、索爱LT18i、GoogleNexusS720P的机子有：小米手机2（自带MIUI）、GoogleGalaxyNexus>GalaxySIIII9300、GoogleGalaxyNexus>华为AscendD1、索尼LT26i、HTCOneX、LGLU6200附上刷机教程连接/download.html注意：在针对新版主题客户端的测试方案上线之前，主题制作者只能在2.10.26开发版或之前版本进行测试设计界面制作主题之前可先根据官方提供的主题界面模板，对主题界面进行设计，然后再进行切图，将设计稿切片，分成各个小部分，用与主题制作。主题制作软件的安装官方主题工具：/thread-642823TT.html使用此工具需要javaM境的支持，未安装的同学请下载：http：///themeeditor/jre62.8.3aajfe.zip解压得jre6文件夹，将其放到到MIUIThemeEditor目录下（图1所示）。

windows下运行，“run-windows.bat2.linux下运行，“run-linux.sh”3.macos运行，"mand”图1三、主题制作1.主题工具的使用打开主题工具后可点击文件新建主题（图2）,或选择打开主题模板点击下载制作模板：v4主题模板.mtz（25.15MB,下载次数：52673）

点击下载补全界面模板：下载图2解压主题包：拖拽后缀名为mtz格式的主题文件，置于主题工具上（如图3）,等待一段时间，便会有一个与mtz文件名称相同的文件夹陈升，这便是解包操作。图3打开主题以后可看到（图4）主题名称、制作者、设计者，以及主题版本等信息，此为必填项目，ui版本选择为4.0，点击下方保存主题按钮主题文件夹内就会生成description.xml文件，来记录下这些信息。

图4主题打包mtz:点击工具下方打包即可生成mtz格式主题文件。点击打包并导入手机可将主题打包并导入手机并应用，前提必须开启手机的USB调试，并安装手机驱动，驱动可通过豌豆荚、qq手机管家等androidpc管理软件进行安装，能连上这类管理软件即代表手机驱动安装完成。图片替换不同分辨率的手机，其图片素材尺寸以及素材存放的位置也有所不同。如图5所示

以桌面图标为例，480p图标文件放在drawablehdpi,720p则为drawablexhdpi，其他模块的文件位置存放位置也与之相似。桌面图标替换：打开主题工具，先在左边选择要替换的图标，然后点击图片选择对应的图标进行替换，也可使用拖拽的方式，将要替换的图标直接拖至其上方，完成替换。（见图6）图6图标除了直接替换对应的图片外，还可以通过几张特定的图片来控制图标风格风格（主要用于第三方图标的风格统一），icon_border.png为最上面的一层；icon_mask.png控制图标显示大小形状，黑色区域显示图标形状；icon_pattern.png为不变色背景，icon_background.png变色背景，会根据图标颜色生成各种颜色背景。如图7所示，

icon.patternicon_maskiconborder此处iconbackgroundiconborder图;*可以为透明或当与iconpattern相同的一张图但不可不放』图7主题图片素材当中还有一种重要的图片格式，叫做9.png。这种格式的图片是安卓平台上新创的一种拉伸却不失真的图片，这种图片主要用于一些尺寸不固定的图片，或者上面的是上面的内容区与需要特殊控制的图片，比如短信气泡，输入文字框等。这种图片的文件名会是xxx.9.png这种格式，用主题工具解包以后，所生成的9.png图片其上下左右各会有1像素黑边，如图8所示1号黑色条位置控制图片横向拉伸区域，就是左图纵向绿色区域2号黑色条位置控制图片纵向拉伸区域，就是左图横向绿色区域3号黑色条位置控制输入框内文字显示的上下位置，即右图紫色区域上下边界4号黑色条位置控制输入框内文字显示的左右边距，即右图紫色区域左右边界

图8黑边可以在ps内直接画上，也可通过主题工具内附带的软件进行编辑（如图9）。在使用画黑边时如果失误多选了部分，可按住shift!，再点击即可擦掉，最后按ctrl+s保存。需要注意的是9.png图片必须画上黑边，不然在应用图片的时候，即使放了对应的图片手机上也不会显示。用ps画黑边的时候需要注意，必须用纯黑色，不能有色差。可替换资源路径列表（可拖敢〉:res!irawable_hdpitextfield_activated_holo_light.9.png,396x94□I=正在输入状态「打开11删除〔L编辑图片^•海信宜二图9主题工具中的模块介绍主题内基本模块Com.android.contacts通讯录以及拨号Com.android.fileexplorer文件管理器Com.android.mms短信Cviders.downloads.ui下载管理Com.android.settings设置Com.android.systemui通知栏以及任务管理器Com.android.updater系统更新Com.miui.antispam防打扰Com.miui.backup备份Com.miui.home桌面Cworkassistant流量监控framework-miui-resMIUI全局framework-resAndroid原生全局以上模块为主题工具内带有图解的模块MIUI全局和Android原生全局内主要存放文件是会在各种界面都会调用到的东西，比如按钮，弹窗，进度条等等，如在当前模块没有想要修改的素材时，可以去全局找。接下来以对短信模块的修改为例子，简单的说说使用如何使用主题工具对主题进行编辑。点击模块，若当前无此模块可将手机连上电脑，通过手机导入素材。图10选择要替换的图片，右边区域会显示图片存放的路径，以及默认素材图片尺寸，图10的中的黑圈中的数字就是默认素材的尺寸。将从设计稿内提取的素材替换进去，然后使用主题工具内提供的9.png工具，画上内容区与拉伸区。替换完成后点击打包并导入手机，测试替换效果。简单锁屏的制作Ah£D5CJ^.VAs£sv

A!及«.蜩®理fctt-，—laA<itak，：BF■■曰口rlUTFEY

Al4]:-»相^苗招!w—15EOL#^.hn-EAM

A!tf4:tf^slil—&9.sl*T4MtHa<n™M-E*i-rpLUS*

KI算凶耕却福尊—wAErE■明TMFf%qTTi4;01■■占—c/EZr.^邕flyiM-afrsdTMvA-llnQdllfl昌fwA・M■中Fpfiv-,•.ThFvA、moudLH+32DJq~^oiI口pr・c'ki911-9OIHI4J&4wlcEuyn■匚l-REflncIKi.iDi1日V内：第善眺阳整-»Lflsisss^?AvutfprJlrlIXXDjffVAy3wsa!S^^^J.IJ-aa^aH-»dMHa^QT后SOVH*-AAUO3HV-AI—抑暮擀*1-vAfcp5«^BE-sv!il-v=^m=u5cssil>・Ertl矍MSP^UHflumwA-o,止DT“«」”IRu'yl.'Dn'aDqrl-Daqr・・I?E』！；gTrIvDp-JDJamktHE『巨<.・|'匚4<1£:1占皆T.G移A—*£t禁性II1-1-1■TEqJQIF*A，X-SJU4口liEPTr%「-*!T<Tff--&-J-luh■Tt厦=!■>£■■■王VA!钿«甘—春nyarl-mTQ^Udwu-i■崖、w-crt^Elk昌WESaiYAyT?E™T1tq==-a^iae'*ut・siisvAunHP5n53n-H.MH-mQ^VAaftstsE&E-u&GQ-.:kuA-EJn』Rrhq・&hmiFsrtl=IKtowflv册gg^.'tf;■绪kev岸fflmsl;:HK.IuiH・E・HoT:ouSHMWUrinvA!s^sl・v盘敏卅柘|二占、=M£a8EI&MH^EO0aii=LMheov-^iik*ln:l-lv髭！举.弥■J-^XGIiM-ra-3^vh^-c&Qa-ksM—5-u-^A-IUNn・dmel—qe—m^oehv”—如.囹■-■.事UE—$T■斟谢：，Ac^^r£l..v^■.■ITrkMM;蛔VHXIdori^u-vbFL'VIJD里D5WraprA'wnmmi^sglEfkc'MDDTebi-lssTlwdlllEIKJireqltl-p&lnJE.&l-inkgjl-pJ±plEEIEEL>£x-iE—r4

舟；事»询建帮s—fk»ul£=!^

isMMEPnc，r・u«1KJrJJ:rm<M-・*NFIFAn1・«‘H-pF・l>5T38=.NIEAVJ眉块男08:3010月26日星期五起始区域百变锁屏在主题包里的lockscreen/advance目录下，manifest.xml文件是描述脚本，以上代码为简单的iphone锁屏的代码，所谓的解锁就是将解锁起始点移动到解锁区域的过程，在这个解锁过程中可以沿着运动轨迹（图中的白线path）进行，也可完全自由的运动，当解锁起始点完全包含在结束区域时解锁完成。XY坐标为图片左上角的点，因为miui支持不同分辨率，所以在写坐标时需要注意，当图片以屏幕底部对齐时，其/坐标，需要以这种形式书写：y="#screen_height89"，意思其y坐标是以屏幕高度减去图片距离屏幕底部的高度。附上百变锁屏综合教程/share/link?shareid=114192&uk=1090759843theme_values.xml文件说明主题文件内除了图片以外，还有theme_values.xml，这个主要用于控制当前模块下的文字颜色，提示文字等信息。里面的颜色代码与普通的十六进制颜色代码不同，是在还在前面增加了2位用于控制文字透明度，可在主题工具中点击切换编辑模式查看当前模块的theme_values.xml文件

瀚氓技设割叫寸从电J施祥也从手M导出Iti陆慎块顼劫撇煎薨二打开薰村屈J眉块男08:3010月26日星期五起始区域编tfithef■噌—Wftlwxral所同翎值其它cEjrpt_ldF"工£Lmk_hi■叵kgrntmd*Ef?西RhwLoe(Ef7c3O3Ci1M盹c^lortl1W您甘p'fniind邛瞅泌4皿•其它E占L”VLd.fiJf_e41dTSODEfffff1«其它coLor€F5rj!t_k*tffir^EliOick_M_pn*E毋K如北m盹calsrory_dcifi*Ef7B漏E1M其它TESrFJMlTJiE*E£B«5^>tK#*ff7T831*炫胞^dldtf■h臼■:rd.心打JtEflTKJ®1«其它edLornM&±,y_UE#iiHEfEfrODOIDS盹cqLdfRBiDry_Kv*il»Ef33333S1M比它M«k1M昵cAerrti■■*fffiWW1茵dhlbAb■&Etiien_bar_STitehj-iddirig16OKOOQ