车载导航应用中基于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中进行主题控件制做：

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定制，以及其余各项拓展定制能力等。
关注高德技术，找到更多出行技术领域专业内容