正文

ui分享主題（it分享主題）

發(fā)布時(shí)間：2023-04-28 00:40:39 稿源：創(chuàng)意嶺閱讀： 946

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui分享主題的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計(jì)相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、手機(jī)UI到底是什么它和手機(jī)主題一樣嗎
2、小米u(yù)i主題如何開發(fā)
3、如何做出優(yōu)秀的UI界面
4、用VIVO\NEX的各位，請問哪個(gè)UI主題最好

ui分享主題（it分享主題）

一、手機(jī)UI到底是什么它和手機(jī)主題一樣嗎

User interface的簡寫，翻譯過來是用戶界面。詳細(xì)的東西你可以查找百度百科。簡單的說，UI就是你打開手機(jī)后所見到的所有界面元素。包括，狀態(tài)欄，各項(xiàng)圖標(biāo)，界面切換速度，各種小掛件等等。手機(jī)主題是將這些要素做適度的更改，就好比給一個(gè)人換了一套新衣服，更好看了。通俗地講，主題是包含在UI內(nèi)的，但是主題一般無法將所有的UI要素囊括，比如圖標(biāo)位置，切換速度等。有一個(gè)職業(yè)是UI設(shè)計(jì)師，就是搞界面設(shè)計(jì)優(yōu)化的。蘋果，小米MIUI就是UI設(shè)計(jì)的典范，而這就是建立在主題之上。

二、小米u(yù)i主題如何開發(fā)

1、下載編輯器

解壓后 Windows 下執(zhí)行根目錄下的 MIUINewThemeEditor.exe 即可打開編輯器，mac 下執(zhí)行編輯器子目錄（類似 19.5.31_1559298827 的文件夾，不同版本文件夾名稱不一樣）MIUINewThemeEditor.jar 文件打開編輯器
mac 系統(tǒng)需提前安裝 java 環(huán)境。

2、注意事項(xiàng)：

編輯器在連接手機(jī)時(shí)需要開啟 USB 調(diào)試，開啟 USB 調(diào)試方法：
開啟 USB 調(diào)試需要先開啟開發(fā)者選項(xiàng)，開啟開發(fā)者選項(xiàng)方法：設(shè)置-我的設(shè)備-全部參數(shù)，連續(xù)點(diǎn)擊 MIUI 版本（至少 7 次，直到提示：您已處于開發(fā)者模式，無需進(jìn)行此操作）
開啟手機(jī) USB 調(diào)試方法：設(shè)置-更多設(shè)置-開發(fā)者選項(xiàng)，開啟 USB 調(diào)試，第一次連接到電腦時(shí)，手機(jī)會彈出允許 USB 調(diào)試的彈窗，選擇允許后電腦與手機(jī)的 usb 調(diào)試就建立好了，后續(xù)無需再次開啟（注意，再手機(jī)的安全中心進(jìn)行手機(jī)優(yōu)化后，系統(tǒng)可能會把 USB 調(diào)試模式關(guān)閉，如果關(guān)閉了，請按照上面的步驟重新開啟 USB 調(diào)試）。
編輯器無法應(yīng)用主題、打不開可能的原因
檢查手機(jī)是否打開了 USB 調(diào)試，檢查步驟：系統(tǒng)設(shè)置–全部設(shè)置–開發(fā)者選項(xiàng)–usb 調(diào)試（開），
打開任務(wù)管理器查看是否有多個(gè) adb 進(jìn)程，建議卸載或關(guān)閉其他占用 adb 的進(jìn)程，或在主題編輯器菜單里點(diǎn)擊“修復(fù) adb”（僅 win 下可用）
驅(qū)動程序未安裝，下載手機(jī)驅(qū)動程序，可點(diǎn)擊這里下載 miflash 來安裝驅(qū)動。安裝方法：打開 miflash，點(diǎn)擊左上角的 Driver 按鈕即可自動安裝，安裝完驅(qū)動后如果你不需要了可以直接刪除 miflash
更換 USB 線纜或接口
編輯器 plugin 目錄下是否包含你添加的插件，若 plugin 目錄不包含添加過的插件會合成失敗，可以通過檢查主題包內(nèi) plugin_config.xml 文件來查看添加過的插件。
手寫的 manifest 文件有語法錯(cuò)誤。某行代碼內(nèi)添加了兩個(gè)相同的屬性，比如一行代碼內(nèi)寫了兩個(gè) X 坐標(biāo)。或者屬性之間原本需要空格分開的缺少空格，都會導(dǎo)致插件應(yīng)用失敗。
連接手機(jī)后，若是第一次打開編輯器或新建主題，需要等待一點(diǎn)時(shí)間，并非卡機(jī)
添加了插件后，應(yīng)用失敗
其他情況排查步驟如下：
MAC 下使用
先安裝 MAC 版 java 環(huán)境。
由于 mac 安全設(shè)置，第一次直接執(zhí)行 MIUINewThemeEditor.jar 可能不被系統(tǒng)允許，你可以右鍵選擇打開，在彈出的窗口中選擇打開編輯器，后續(xù)即可雙擊直接打開了。
編輯器目錄結(jié)構(gòu)不可有空格等特殊字符，最好不要放在中文目錄下

#創(chuàng)建主題包

新建主題點(diǎn)擊“新建”按鈕，會彈出一個(gè)主題信息的彈窗（如圖），填完所有信息點(diǎn)擊確定即可開始正式的制作主題之旅啦~

請點(diǎn)擊輸入圖片描述

#編輯器使用

新建主題之后，編輯器進(jìn)入編輯界面，如圖，頂部為菜單欄，左側(cè)側(cè)邊欄可選擇編輯的模塊。

請點(diǎn)擊輸入圖片描述

注意：

菜單欄的刷新按鈕，一般用于修改了內(nèi)置插件時(shí)重建緩存用，否則修改了內(nèi)置插件不會生效，插件的制作教程詳見
菜單簡介點(diǎn)擊左上角菜單，彈出一個(gè)列表。重點(diǎn)需要了解幾個(gè)功能，前提是編輯器能正常把主題應(yīng)用到手機(jī)上：
導(dǎo)出主題包：這個(gè)是上傳至主題商店的唯一文件格式（.mtz）,所有主題完成之后都需要導(dǎo)出主題包。
同步圖標(biāo)/模塊：線下編輯器的素材有限，如果在編輯器中找不到手機(jī)上顯示的圖標(biāo)或者素材，可以直接同步圖標(biāo)/素材，然后去相應(yīng)的模塊找即可。
編輯信息：主要是更改主題版本，當(dāng) UI 版本為 V11 的時(shí)候，編輯器會展示 MIUI11 系統(tǒng)的界面和素材。，當(dāng) UI 版本為 V12 的時(shí)候，編輯器會展示 MIUI12 系統(tǒng)的界面和素材。

1、創(chuàng)建第一個(gè)鎖屏

請點(diǎn)擊輸入圖片描述

插入一個(gè)解鎖功能

點(diǎn)擊第編輯器左側(cè)側(cè)邊欄的鎖型圖標(biāo)，在插件選擇區(qū)選擇鎖屏框架，然后添加一個(gè)上劃解鎖框架，點(diǎn)擊插入按鈕
點(diǎn)擊編輯器左下角手機(jī)形狀按鈕，即可應(yīng)用主題到手機(jī)。
解鎖一次，然后息屏再開屏，重新回到鎖屏。你會發(fā)現(xiàn)手機(jī)底部有兩個(gè)小圖標(biāo)。這時(shí)候解鎖插件應(yīng)用就成功了。

操作完上面的步驟以后，我們發(fā)現(xiàn)鎖屏其他部分全是黑的，沒關(guān)系，因?yàn)檫@個(gè)時(shí)候你只是添加了一個(gè)解鎖控件，其他控件都還沒加呢。添加其他插件

添加一張壁紙和一個(gè)時(shí)鐘控件，分別選擇【主題壁紙-百變鎖屏壁紙-下劃切換壁紙】和【百變鎖屏-鎖屏?xí)r鐘-橫向圖片時(shí)鐘】插入
應(yīng)用主題后鎖屏界面就出現(xiàn)了一張壁紙和一個(gè)時(shí)鐘。
我們可以用同樣的方法給鎖屏添加一個(gè)負(fù)一屏控件或則其他控件，就跟搭積木一樣，一個(gè)鎖屏就構(gòu)建出來了。

上面操作完成后我們發(fā)現(xiàn)之前添加的解鎖框架底部的兩個(gè)小圖標(biāo)不見了，原因是你新添加的壁紙把他給蓋住了，如上圖所示，我們需要對插件的圖層進(jìn)行調(diào)整插件的圖層管理

在編輯器右側(cè)的圖層管理區(qū)，先選擇要調(diào)整孫旭的插件，然后點(diǎn)擊底部上上下箭頭按鈕，即可調(diào)整插件的順序
我們嘗試把下滑切換壁紙調(diào)整到最頂上，重新應(yīng)用主題壁紙就不對鎖屏其他元素進(jìn)行遮擋了。
在編輯器中圖層越往上的插件，在鎖屏實(shí)際顯示中則越往下，要想不被其他插件蓋住，則在編輯器中把插件調(diào)整到另一個(gè)插件的下面即可

我們還可以對添加的進(jìn)行個(gè)性化定制，替換其中的圖片資源，修改模塊的各項(xiàng)參數(shù)，使插件的樣式更符合我們的設(shè)計(jì)需求插件的個(gè)性化定制

進(jìn)入?yún)?shù)編輯器，參數(shù)編輯區(qū)可選圖片資源編輯和參數(shù)編輯，我們可以替換插件里的圖片資源，也可以修改插件的參數(shù)，例如調(diào)整插件的坐標(biāo)、色彩等
需要注意的是是圖片序列的圖片資源，因?yàn)樾薷牡牟皇菃为?dú)一張圖片,而是多張圖片組成的圖片序列。替換時(shí)需要把需要替換的圖片以’xx_0.jpg’ ‘xx_1.jpg’ ‘xx_2.jpg’ 這樣的規(guī)則命名（后面的數(shù)字及格式與原資源素材相同），然后拉進(jìn)編輯器如圖紅色框選區(qū)域即可替換對應(yīng)資源，非圖片序列的圖片替換時(shí)無需特殊命名，只需要格式一致即可。

插件中常用參數(shù)的修改可參考下表

常用參數(shù)名

對應(yīng)參數(shù)

釋義

橫向?qū)R（或 X 方向?qū)R） left、 center、right 居左居中，居右

縱向?qū)R（或 Y 方向?qū)R） top、 center、bottom 頂部居中，底部

可見性 0 或 1 0 不可見，1 可見，可用表達(dá)式

透明度 0~255 0 為透明度為 0，255 為透明度 100%，可用表達(dá)式

顏色 #ffffff 可從 ps 里吸取對應(yīng)的顏色值

2、其他界面模塊的修改

請點(diǎn)擊輸入圖片描述

添加界面模塊
點(diǎn)擊右側(cè)側(cè)邊欄的星星按鈕，即可進(jìn)入編輯器界面編輯功能（星星按鈕只在效率模式有，專家模式會把各模塊獨(dú)立展現(xiàn)）
選擇深色模板或淺色模板（淺色模板開發(fā)中，暫不可用），人后通過右側(cè)的參數(shù)編輯器就可以對界面的圖片和顏色進(jìn)行修改了
切換到專家模式后，各界面在側(cè)邊欄分為獨(dú)立按鈕，點(diǎn)擊不同按鈕進(jìn)入到對應(yīng)界面進(jìn)行修改

注：效率模式為編輯器中制作界面的全新方式，效率模式內(nèi)置了一套完整的深色主題模板，模板內(nèi)已經(jīng)內(nèi)置了制作一套深色主題所需要的所有資源，相關(guān)顏色值也已打包進(jìn)模板中，通過模板外漏的相關(guān)接口，只需少量修改即可完成界面部分的制作，大大提高制作一套主題的效率。

點(diǎn)九圖的定義與繪畫
請點(diǎn)擊輸入圖片描述
請點(diǎn)擊輸入圖片描述
上圖報(bào)錯(cuò)是因點(diǎn)九圖繪畫不規(guī)范導(dǎo)致，點(diǎn)九圖是 Android 開發(fā)中用到的一種特殊格式的圖片，文件名以”.9.png“結(jié)尾，這種圖片能告訴程序，圖像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。
通過指定.9 拉伸與顯示區(qū)域即可實(shí)現(xiàn)在素材拉伸后不會降低顯示效果；例如一個(gè)圓角矩形直接放大會變模糊、通過繪制.9 后就能保證只拉伸圓角內(nèi)的區(qū)域，從而達(dá)到最佳的顯示效果；
具體請查看：點(diǎn)九詳解。

#主題包結(jié)構(gòu)

clock_2x4 桌面時(shí)鐘
com.miui.home 桌面
com.android.contacts 撥號與聯(lián)系人
com.android.mms 短信
com.android.settings 設(shè)置
com.android.systemui 通知欄
framework-miui-res MIUI 全局
framework-res 安卓原生全局
icons 桌面圖標(biāo)
lockscreen 鎖屏
miwallpaper 百變壁紙
wallpaper 壁紙
description.xml 主題描述文件
以上是目前常用的主題包目錄結(jié)構(gòu)，包括但不限于這些；由于系統(tǒng)迭代較快，建議大家按照官方主題編輯器模板已有的模板進(jìn)行制作即可。

#代碼與工具

maml 編寫工具常用的有：（Sublime Text、Notepad++），啟動快，插件多，加上 maml 語法自動補(bǔ)全后用起來很方便，推薦大家使用。

#一、Sublime Text

#安裝 sublime

下載地址直接百度，下面提供 maml 需用到的插件的安裝方法。

#安裝插件

首先安裝 Package Control，Package Control 插件本身是一個(gè)為了方便管理插件的插件，安裝了這個(gè)就可以添加各種插件了。

安裝方法，點(diǎn)擊菜單欄的 view，然后點(diǎn)擊 Show Console(或者直接輸入 ctrl + `)，然后在底部彈出的輸入框中輸入如下代碼后按 enter 鍵，過一會就裝好了。

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.cn/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

如果安裝失?。ňW(wǎng)絡(luò)被墻），可以手動下載插件包安裝。

點(diǎn)擊這里下載 Package Control

安裝方法，點(diǎn)擊 Preferences（首選項(xiàng)）----Browse packages（瀏覽插件）會打開插件的目錄，然后進(jìn)去該目錄的上一級文件夾，找到 Installed Packages 文件夾將下載的 Package Control.sublime-package 放在 Installed Packages 目錄中，這樣 Package Control 就安裝好了。

安裝好 Package Control 就可以用它來安裝各種插件了。

首先我們安裝一個(gè)中文插件

點(diǎn)擊 Preferences（首選項(xiàng)），然后點(diǎn)擊 Package Control，彈出的輸入框中選擇 Install Package ，然后輸入 chinese，選擇第一個(gè) ChineseLocalization，這樣就會自動安裝好中文插件，sublime 界面就變成中文的了。

如果報(bào)錯(cuò)（網(wǎng)絡(luò)被墻），我們也可以用前面安裝 Package Control 的方法手動下載安裝

點(diǎn)擊這里下載中文插件，下載完后照樣拷貝到前面的 Installed Packages 目錄中，拷貝進(jìn)去以后，點(diǎn)擊菜單欄中的 help，選擇 Language，然后選擇簡體中文就 ok 了。

安裝完中文插件我們就可以安裝 maml 自動補(bǔ)全文件了

點(diǎn)擊這里下載自動補(bǔ)全文件,下載完后解壓文件，然后點(diǎn)擊 Preferences（首選項(xiàng)）----Browse packages（瀏覽插件）打開插件的目錄，把解壓的 Maml 文件夾放到剛剛打開的這個(gè)文件夾下（Packages 目錄），我們點(diǎn)擊 sublime 右下角的 Plain Text（默認(rèn)狀態(tài)顯示 Plain Text，如果選擇了其他語言或者當(dāng)前打開其他語言的話會顯示其他語言），然后選擇 XML，這樣我們就切換到 XML 語言下了，在 XML 語言下 Maml 自動補(bǔ)全會自動生效，我們先輸入一個(gè)尖括號< 然后再輸入要輸入的標(biāo)簽名 Maml 語法補(bǔ)全就會自動喚起。

再推薦一個(gè)自己修改的 sublime 主題，模仿 vscode 的 Palenight 主題，顯示效果非常不錯(cuò)

點(diǎn)擊這里下載主題，下載完后拷貝到之前放 maml 插件的 Packages 目錄中，拷貝進(jìn)去以后，點(diǎn)擊菜單欄中的首選項(xiàng)，分別選擇主題和配色方案，然后都選擇 Palenight 就行了。

其他推薦插件

SublimeLinter，SublimeLinter 可以自動校驗(yàn)語法中的錯(cuò)誤，安裝完 SublimeLinter 后還需要安裝 SublimeLinter-xmllint，這樣就可以對 xml 語法進(jìn)行錯(cuò)誤校驗(yàn)了。

#二、Notepad++

下載地址百度即可，下方介紹maml用到的插件安裝方法。

#安裝插件

首先安裝，點(diǎn)擊菜單欄中的“插件”然后點(diǎn)擊“插件管理”，然后搜索：XML Tools 勾選后點(diǎn)擊右上角安裝按鈕即可，如圖。

請點(diǎn)擊輸入圖片描述

#查錯(cuò)功能：

安裝完成后軟件會重啟一下，打開之后點(diǎn)擊菜單欄的“插件”，然后鼠標(biāo)放到“XML Tools上面的Enable XML syntax auto-check”即可開啟自動查錯(cuò)，如圖：

請點(diǎn)擊輸入圖片描述

打開之后當(dāng)我們編輯代碼沒有寫規(guī)范時(shí)就會提示，例如標(biāo)簽沒有斜杠結(jié)尾的、少了雙引號的，當(dāng)你點(diǎn)擊保存時(shí)就會彈窗提示你多少行有問題，如圖：

請點(diǎn)擊輸入圖片描述

上圖當(dāng)中的Time標(biāo)簽中src屬性少了一個(gè)雙引號，彈窗就提示在第6行當(dāng)中。所以在書寫代碼時(shí)大家記得代碼標(biāo)簽的大小寫和標(biāo)點(diǎn)符號一定要規(guī)整。不然可能導(dǎo)致手機(jī)顯示不正?；蛘咂渌麊栴}。（某些時(shí)候也不會提示具體多少行，所以大家寫時(shí)候可以寫一段保存一次，比較能保證代碼的保存和是否存在書寫不規(guī)范的問題）

#代碼美化：

在日常書寫中有不少設(shè)計(jì)師寫的代碼會沒有一個(gè)規(guī)整的排序，顯示的很亂，但是代碼多的時(shí)候挨個(gè)去調(diào)會非常費(fèi)事費(fèi)力，那么在note++中安裝上面的插件后我們可以試用快捷鍵就能一鍵美化。

快捷鍵：

將代碼格式化成一行：Ctrl+Alt+Shift+L

將代碼美化規(guī)整：Ctrl+Alt+Shift+B

沒有美化前：

請點(diǎn)擊輸入圖片描述

美化后：

請點(diǎn)擊輸入圖片描述

上面圖2中的效果只需要執(zhí)行：Ctrl+Alt+Shift+B 即可美化排列。

其他更多的功能和玩法大家就自己研究lo?。?！加油 ^_^

網(wǎng)頁鏈接詳情點(diǎn)擊這里。這是制作的詳細(xì)教程