車載導航應用中基於Sketch UI主題定製方案的實現

1.導讀

關於應用的主題定製，相信你們或多或少都有接觸，基本上，實現思路能夠分爲兩類:

內置主題（應用內自定義style）

外部加載方式(資源apk形式、壓縮資源、插件等)

其實，針對不一樣的主題定製實現思路，沒有絕對的好壞，每種實現方案都有其利弊，重要的是如何去權衡、選擇，根據實際的項目需求，痛點，制定一個符合實際項目需求，可以解決主題定製過程當中痛點的方案纔是好的方案。

因爲我和團隊一直是作車載導航應用開發，面向的對象是客戶。不一樣的客戶對於應用的UI或者主題是有不一樣需求的，也就是說針對不一樣客戶，不一樣渠道的版本，須要有不一樣的應用主題。

隨着項目的增多，若是沒有一個靈活，易管理，低成本的主題定製方案，那麼實現將變得很是困難。

2.過去主題定製的實現方案

針對須要定製的UI，研發增長對應的自定義主題控件；

佈局由這些自定義主題控件搭建而成；

UED修改對應主題控件xml中對應的色值實現主題的定製；

研發集成UED配置的文件，實現主題定製；

研發出包，UED進行主題定製還原度驗證。

基本思路就是界面中須要主題定製的UI，經過自定義主題控件實現，而自定義主題控件能夠經過替換佈局xml的方式實現主題色值等的替換，從而實現主題定製，但這種方案的缺點很是明顯：

成本高：主題定製須要UED手動去修改xml，但通常UED對於xml格式內容不是很瞭解，這樣無疑學習及修改爲本都很是高，其次也容易產生錯誤的修改，致使穩定性不好；

效率低：主題定製須要UED修改完xml後，發給研發，而後由研發替換xml，流程多，效率低；

維護難：以前的主題定製，沒有統一的東西管理，主題對於UED來講就是一堆的xml文件，很難進行維護；

複用性差：因爲主題定製是經過xml，若是主題控件修改了，xml也就跟着修改，主題的複用就很難實現。

3.新方案的設計與實現

從上圖中咱們能夠看出在主題定製的整個過程當中，UED參與了大部分的流程，只有在主題集成的時候，研發須要參與，其實說到底，UED纔是主題定製的Owner，對於主題定製最理想的狀態是研發提供必定的工具平臺，UED設計完主題後，能夠直接集成到應用內驗證迴歸，中間無需研發干預處理，整個主題定製流程都由UED走完。

3.1 方案要素

基於UED參與就能完成主題定製的理念，同時考慮項目對於主題定製的需求，在新主題定製方案的設計中，應當圍繞核心角色，服務好核心角色，以最大限度下降核心角色的成本，提升整個定製過程的效率，同時兼顧項目核心需求爲目標來設計、搭建新方案，如下是方案中應該關注的角色及要解決的關鍵問題：

主題定製主角：UED

UED、UI設計工具：Sketch

項目需求：

1. 不一樣項目的不一樣渠道有不一樣的主題定製需求
2. 出包時就有對應主題，無需下載
3. 項目週期短，須要能快速定製
4. 項目須要維護，主題也須要方便維護、管理

3.2 方案雛形

基於以上分析，主題定製的大致流程，方案以下：

首先，方案應當圍繞着UED建設，因爲UED是基於Sketch進行UI界面設計，所以若是主題定製也能基於Sketch，UED就能很方便的基於Sketch設計UI的同時也設計主題；

同時，不一樣的渠道會有不一樣的主題定製，而且須要快速定製，方便管理、維護，同時出包時就需內置主題，所以須要有一個主題管理平臺能管理，維護主題資源，而且支持主題複製，使得主題資源能基於現有項目的主題進行少許修改，就能造成一個新的主題；

接着，須要在Jenkins打包時，能根據不一樣的渠道打包不一樣的主題資源到apk中；

最後，須要將打包好的apk快速安裝到真機上進行還原度驗收。

最終主題定製方案也就基本成型，基於Sketch的UI主題定製方案：

4.方案詳解

基於Sketch的UI主題定製，主要分紅四大步驟：

• UED在Sketch中製做主題資源及上傳雲端（主題製做）

• UED在WEB主題平臺管理主題資源（主題管理）

• Jenkins拉取主題資源打包到應用（主題集成）

• 真機預覽效果（主題驗證）

以上流程主要針對主分支，第一次界面開發，針對後續不一樣項目的主題定製，只須要在WEB平臺中copy主題資源，而後進行對應的主題修改，便可快速定製出一套對應的主題出來。

如下詳細介紹主要關鍵步驟：

4.1 主題資源製做

主題資源製做通常在界面設計前就須要提早設計好，UED在Sketch中將主題控件設計好以後，咱們提供了一個快捷的主題輸入界面，方便UED能快速編輯對應控件的主題屬性，並一鍵上傳到雲端，以下所示，在Sketch中進行主題控件製做：

4.2 WEB主題平臺管理主題資源

WEB主題平臺，保存了項目中全部可定製的主題資源，包含主題控件、插畫、iconfont、文字大小等，在這裏能夠快速基於母版主題，copy出新的主題資源，而後進行個性化定製，或者基於其餘項目快速copy，主題的定製再也不是繁瑣、耗時的操做，而變成了直觀、易操做。

4.3 真機預覽

在WEB主題平臺編輯完主題資源後，經過Jenkins或服務器將主題資源打包到apk中，最後經過車機設備集羣管理平臺，將apk安裝到不一樣的真機上，實現真機預覽主題定製效果，UED可快速回歸還原度，發現問題，並快速在主題平臺上修復。

5.方案對比

針對業內幾種比較經常使用的主題定製方案與基於Sketch的UI主題定製方案進行了幾個方面的對比：

以上三個方案的對比:

內置主題：優勢在於實現簡單、配置方便，缺點是主題定製不靈活。

外部加載方案(apk):優勢在於擴展性很高，但因爲該方案須要在代碼中設置全部的可變資源，軟件實現週期較長，寫代碼時容易出錯。並且初版耗時較長，一旦界面佈局改變，須要較長的時間進行代碼的編寫。

基於Sketch的UI主題定製方案，它的優點在於：

基於UED的UI設計工具Sketch，能在設計UI的時候，同時設計主題資源，而且能快捷的預覽主題資源在總體界面上的顯示效果；

能夠經過Sketch插件的能力，快速將主題資源上傳到後臺，方便主題資源的統一管理及維護；

在後臺配置修改完主題資源還能迴流Sketch中進行查看。

這個方案的最大優點在於與UED的UI設計工具Sketch無縫的銜接在一塊兒，極大的提升了主題的製做效率及成本，使得UED可以獨立完成主題資源製做、管理、集成、應用、驗證，造成一個主題小閉環。

6.小結

該方案的特色在於與Sketch很好的結合在一塊兒，經過插件的能力，無縫的與雲端進行資源相互同步，能力的實現主要經過WEB主題平臺進行主題的管理、編輯，實現主題的快速複製，方便修改，而後再經過Jenkins的打包能力，實現主題的快速應用，最終實現UI主題定製。

能力建設完成後，以上的每一個環節，只須要UED參與就能完成不一樣項目的主題定製，極大減小了UED及研發的成本，大大提升了效率，同時在定製能力上，從只能定製顏色、圓角、大小等，到能支持插畫、iconfont定製，以及其餘各項拓展定製能力等。

關注高德技術，找到更多出行技術領域專業內容