正文

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

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

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

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

本文目錄:

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

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

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

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

二、小米ui主題如何開發(fā)

1、下載編輯器

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

2、注意事項：

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

#創(chuàng)建主題包

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

請點擊輸入圖片描述

#編輯器使用

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

請點擊輸入圖片描述

注意：

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

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

請點擊輸入圖片描述

插入一個解鎖功能

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

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

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

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

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

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

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

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

常用參數(shù)名

對應參數(shù)

釋義

橫向對齊（或 X 方向對齊） left、 center、right 居左居中，居右

縱向對齊（或 Y 方向對齊） top、 center、bottom 頂部居中，底部

可見性 0 或 1 0 不可見，1 可見，可用表達式

透明度 0~255 0 為透明度為 0，255 為透明度 100%，可用表達式

顏色 #ffffff 可從 ps 里吸取對應的顏色值

2、其他界面模塊的修改

請點擊輸入圖片描述

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

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

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

#主題包結構

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

#代碼與工具

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

#一、Sublime Text

#安裝 sublime

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

#安裝插件

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

安裝方法，點擊菜單欄的 view，然后點擊 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:// + 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)絡被墻），可以手動下載插件包安裝。

點擊這里下載 Package Control

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

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

首先我們安裝一個中文插件

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

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

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

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

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

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

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

其他推薦插件

SublimeLinter，SublimeLinter 可以自動校驗語法中的錯誤，安裝完 SublimeLinter 后還需要安裝 SublimeLinter-xmllint，這樣就可以對 xml 語法進行錯誤校驗了。

#二、Notepad++

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

#安裝插件

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

請點擊輸入圖片描述

#查錯功能：

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

請點擊輸入圖片描述

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

請點擊輸入圖片描述

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

#代碼美化：

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

快捷鍵：

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

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

沒有美化前：

請點擊輸入圖片描述

美化后：

請點擊輸入圖片描述

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

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

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