小米主題設(shè)計(jì)教程

主題教程（2.10.30）一、MIUI主題首先，我們手機(jī)的UI是由很多部分組成的，如鎖屏、通知欄、桌面壁紙、圖標(biāo)等等。如果我們把手機(jī)比喻成一個(gè)房子，上述的部分可想象成房子的門、窗、地板、吊燈、座椅等。那我們可以認(rèn)為原生的android系統(tǒng)就是一個(gè)毛坯房，MIUI是在這之上的一個(gè)簡(jiǎn)裝，自定義主題就是你自己給房子做的裝修。MIUI提供主題自定義功能，其實(shí)就相當(dāng)于幫你請(qǐng)了一個(gè)工程隊(duì)，你可以用從眾多裝修方案（主題包）中選擇自己喜歡的效果，最后交給工程隊(duì)實(shí)施。而裝修方案可大可小，大至全屋翻新，小到只換一盞燈。目前MIUI會(huì)自帶兩個(gè)主題包，達(dá)人們也可以設(shè)計(jì)自己的主題包，大家就可以借用達(dá)人們共享出來(lái)的設(shè)計(jì)。二、準(zhǔn)備工作主題測(cè)試機(jī)器工欲善其事必先利其器，做題之前首先得有一部能刷MIUI的手機(jī)作為測(cè)試機(jī)。MIUI現(xiàn)有支持v4的機(jī)型分成按分辨率，可分成兩類480p（480*854和480*800）與720p（720*1280），分辨率對(duì)以后的主題制作有這影響，見后面詳述。480p的機(jī)子有：小米手機(jī)1/1S（自帶MIUI）、HTCDesireS、HTCIncredibleS、SamsungI9100、華為Honor、索愛LT18i、GoogleNexusS720P的機(jī)子有：小米手機(jī)2（自帶MIUI）、GoogleGalaxyNexus>GalaxySIIII9300、GoogleGalaxyNexus>華為AscendD1、索尼LT26i、HTCOneX、LGLU6200附上刷機(jī)教程連接/download.html注意：在針對(duì)新版主題客戶端的測(cè)試方案上線之前，主題制作者只能在2.10.26開發(fā)版或之前版本進(jìn)行測(cè)試設(shè)計(jì)界面制作主題之前可先根據(jù)官方提供的主題界面模板，對(duì)主題界面進(jìn)行設(shè)計(jì)，然后再進(jìn)行切圖，將設(shè)計(jì)稿切片，分成各個(gè)小部分，用與主題制作。主題制作軟件的安裝官方主題工具：/thread-642823TT.html使用此工具需要javaM境的支持，未安裝的同學(xué)請(qǐng)下載：http：///themeeditor/jre62.8.3aajfe.zip解壓得jre6文件夾，將其放到到MIUIThemeEditor目錄下（圖1所示）。

windows下運(yùn)行，“run-windows.bat2.linux下運(yùn)行，“run-linux.sh”3.macos運(yùn)行，"mand”圖1三、主題制作1.主題工具的使用打開主題工具后可點(diǎn)擊文件新建主題（圖2）,或選擇打開主題模板點(diǎn)擊下載制作模板：v4主題模板.mtz（25.15MB,下載次數(shù)：52673）

點(diǎn)擊下載補(bǔ)全界面模板：下載圖2解壓主題包：拖拽后綴名為mtz格式的主題文件，置于主題工具上（如圖3）,等待一段時(shí)間，便會(huì)有一個(gè)與mtz文件名稱相同的文件夾陳升，這便是解包操作。圖3打開主題以后可看到（圖4）主題名稱、制作者、設(shè)計(jì)者，以及主題版本等信息，此為必填項(xiàng)目，ui版本選擇為4.0，點(diǎn)擊下方保存主題按鈕主題文件夾內(nèi)就會(huì)生成description.xml文件，來(lái)記錄下這些信息。

圖4主題打包mtz:點(diǎn)擊工具下方打包即可生成mtz格式主題文件。點(diǎn)擊打包并導(dǎo)入手機(jī)可將主題打包并導(dǎo)入手機(jī)并應(yīng)用，前提必須開啟手機(jī)的USB調(diào)試，并安裝手機(jī)驅(qū)動(dòng)，驅(qū)動(dòng)可通過豌豆莢、qq手機(jī)管家等androidpc管理軟件進(jìn)行安裝，能連上這類管理軟件即代表手機(jī)驅(qū)動(dòng)安裝完成。圖片替換不同分辨率的手機(jī)，其圖片素材尺寸以及素材存放的位置也有所不同。如圖5所示

以桌面圖標(biāo)為例，480p圖標(biāo)文件放在drawablehdpi,720p則為drawablexhdpi，其他模塊的文件位置存放位置也與之相似。桌面圖標(biāo)替換：打開主題工具，先在左邊選擇要替換的圖標(biāo)，然后點(diǎn)擊圖片選擇對(duì)應(yīng)的圖標(biāo)進(jìn)行替換，也可使用拖拽的方式，將要替換的圖標(biāo)直接拖至其上方，完成替換。（見圖6）圖6圖標(biāo)除了直接替換對(duì)應(yīng)的圖片外，還可以通過幾張?zhí)囟ǖ膱D片來(lái)控制圖標(biāo)風(fēng)格風(fēng)格（主要用于第三方圖標(biāo)的風(fēng)格統(tǒng)一），icon_border.png為最上面的一層；icon_mask.png控制圖標(biāo)顯示大小形狀，黑色區(qū)域顯示圖標(biāo)形狀；icon_pattern.png為不變色背景，icon_background.png變色背景，會(huì)根據(jù)圖標(biāo)顏色生成各種顏色背景。如圖7所示，

icon.patternicon_maskiconborder此處iconbackgroundiconborder圖;*可以為透明或當(dāng)與iconpattern相同的一張圖但不可不放』圖7主題圖片素材當(dāng)中還有一種重要的圖片格式，叫做9.png。這種格式的圖片是安卓平臺(tái)上新創(chuàng)的一種拉伸卻不失真的圖片，這種圖片主要用于一些尺寸不固定的圖片，或者上面的是上面的內(nèi)容區(qū)與需要特殊控制的圖片，比如短信氣泡，輸入文字框等。這種圖片的文件名會(huì)是xxx.9.png這種格式，用主題工具解包以后，所生成的9.png圖片其上下左右各會(huì)有1像素黑邊，如圖8所示1號(hào)黑色條位置控制圖片橫向拉伸區(qū)域，就是左圖縱向綠色區(qū)域2號(hào)黑色條位置控制圖片縱向拉伸區(qū)域，就是左圖橫向綠色區(qū)域3號(hào)黑色條位置控制輸入框內(nèi)文字顯示的上下位置，即右圖紫色區(qū)域上下邊界4號(hào)黑色條位置控制輸入框內(nèi)文字顯示的左右邊距，即右圖紫色區(qū)域左右邊界

圖8黑邊可以在ps內(nèi)直接畫上，也可通過主題工具內(nèi)附帶的軟件進(jìn)行編輯（如圖9）。在使用畫黑邊時(shí)如果失誤多選了部分，可按住shift!，再點(diǎn)擊即可擦掉，最后按ctrl+s保存。需要注意的是9.png圖片必須畫上黑邊，不然在應(yīng)用圖片的時(shí)候，即使放了對(duì)應(yīng)的圖片手機(jī)上也不會(huì)顯示。用ps畫黑邊的時(shí)候需要注意，必須用純黑色，不能有色差。可替換資源路徑列表（可拖敢〉:res!irawable_hdpitextfield_activated_holo_light.9.png,396x94□I=正在輸入狀態(tài)「打開11刪除〔L編輯圖片^?海信宜二圖9主題工具中的模塊介紹主題內(nèi)基本模塊Com.android.contacts通訊錄以及撥號(hào)Com.android.fileexplorer文件管理器Com.android.mms短信Cviders.downloads.ui下載管理Com.android.settings設(shè)置Com.android.systemui通知欄以及任務(wù)管理器Com.android.updater系統(tǒng)更新Com.miui.antispam防打擾Com.miui.backup備份Com.miui.home桌面Cworkassistant流量監(jiān)控framework-miui-resMIUI全局framework-resAndroid原生全局以上模塊為主題工具內(nèi)帶有圖解的模塊MIUI全局和Android原生全局內(nèi)主要存放文件是會(huì)在各種界面都會(huì)調(diào)用到的東西，比如按鈕，彈窗，進(jìn)度條等等，如在當(dāng)前模塊沒有想要修改的素材時(shí)，可以去全局找。接下來(lái)以對(duì)短信模塊的修改為例子，簡(jiǎn)單的說說使用如何使用主題工具對(duì)主題進(jìn)行編輯。點(diǎn)擊模塊，若當(dāng)前無(wú)此模塊可將手機(jī)連上電腦，通過手機(jī)導(dǎo)入素材。圖10選擇要替換的圖片，右邊區(qū)域會(huì)顯示圖片存放的路徑，以及默認(rèn)素材圖片尺寸，圖10的中的黑圈中的數(shù)字就是默認(rèn)素材的尺寸。將從設(shè)計(jì)稿內(nèi)提取的素材替換進(jìn)去，然后使用主題工具內(nèi)提供的9.png工具，畫上內(nèi)容區(qū)與拉伸區(qū)。替換完成后點(diǎn)擊打包并導(dǎo)入手機(jī)，測(cè)試替換效果。簡(jiǎn)單鎖屏的制作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內(nèi)：第善眺陽(yáng)整-?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冊(cè)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眉?jí)K男08:3010月26日星期五起始區(qū)域百變鎖屏在主題包里的lockscreen/advance目錄下，manifest.xml文件是描述腳本，以上代碼為簡(jiǎn)單的iphone鎖屏的代碼，所謂的解鎖就是將解鎖起始點(diǎn)移動(dòng)到解鎖區(qū)域的過程，在這個(gè)解鎖過程中可以沿著運(yùn)動(dòng)軌跡（圖中的白線path）進(jìn)行，也可完全自由的運(yùn)動(dòng)，當(dāng)解鎖起始點(diǎn)完全包含在結(jié)束區(qū)域時(shí)解鎖完成。XY坐標(biāo)為圖片左上角的點(diǎn)，因?yàn)閙iui支持不同分辨率，所以在寫坐標(biāo)時(shí)需要注意，當(dāng)圖片以屏幕底部對(duì)齊時(shí)，其/坐標(biāo)，需要以這種形式書寫：y="#screen_height89"，意思其y坐標(biāo)是以屏幕高度減去圖片距離屏幕底部的高度。附上百變鎖屏綜合教程/share/link?shareid=114192&uk=1090759843theme_values.xml文件說明主題文件內(nèi)除了圖片以外，還有theme_values.xml，這個(gè)主要用于控制當(dāng)前模塊下的文字顏色，提示文字等信息。里面的顏色代碼與普通的十六進(jìn)制顏色代碼不同，是在還在前面增加了2位用于控制文字透明度，可在主題工具中點(diǎn)擊切換編輯模式查看當(dāng)前模塊的theme_values.xml文件

瀚氓技設(shè)割叫寸從電J施祥也從手M導(dǎo)出Iti陸慎塊頊劫撇煎薨二打開薰村屈J眉?jí)K男08:3010月26日星期五起始區(qū)域編tfithef■噌—Wftlwxral所同翎值其它c(diǎn)Ejrpt_ldF"工￡Lmk_hi■叵kgrntmd*Ef?西RhwLoe(Ef7c3O3Ci1M盹c^lortl1W您甘p'fniind邛瞅泌4皿?其它E占L”VLd.fiJf_e41dTSODEfffff1?其它c(diǎn)oLor€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