做网上商城网站设计/深圳网站设计制作

工程架构可以分为5层，分别是：基础控件、组合控件、业务UI组件、桥接、demo。

• 基础控件：提供原子能力，单点控件，比如层叠布局FlowLayout、骨架控件ShimmerLayout、按钮Flatbutton

• 组合控件：会依赖基础控件，比如Dialog、ImageSelector，这些控件UI会比较复杂，所以会用到FlatButton、ShimmerLayout等基础组件来提高开发效率

• 业务UI组件：这个就是我们真正要实现的UI组件，基于设计要求定制开发，在基础控件和组合控件上配置业务偏好，组合成业务组件，开发工作量比较小

• 桥接：业务层不感知UI组件的个数和依赖关系，业务层只依赖uikit，而UI组件的依赖管理收敛到uikit中，这样的好处就是，后续迭代只在uikit维护依赖关系即可

• Demo: 一个好的组件除了使用文档，还需要有直观的示例代码，demo可以直接集成到调试面板中

架构分层如下图：

一个好的架构应该层次分明、低耦合、高扩展，对组件的增删支持的足够友好，任何组件都能准确的找到对应的分层，并且不会改动到已有代码，所以review一下刚刚设计的架构，基本上满足需求，架构设计符合预期。架构设计好之后的步骤就是实施了，如何和现有的工程做结合呢，UI组件按阶段可以分为：开发阶段、稳定阶段，理想的开发模式为开发阶段在宿主工程中开发调试，但是放宿主工程中会带了编译慢的问题，组件开发和业务是接耦的，所以希望代码在宿主工程，demo和组件开发可以单独运行，当组件开发完成，到了稳定阶段，组件代码修改频率降低，同时加快编译速度，UIKit组件发布到远程maven仓库，最终uikit工程独立出来，单独迭代，下面是工程架构实现

UI组件和宿主打包编译

settings.gradle

includeIfAbsent ‘:uikit:uikit’

includeIfAbsent ‘:uikit:demo’

includeIfAbsent ‘:uikit:imgselector’

includeIfAbsent ‘:uikit:roundview’

includeIfAbsent ‘:uikit:widget’

includeIfAbsent ‘:uikit:photodraweeview’

includeIfAbsent ‘:uikit:flatbutton’

includeIfAbsent ‘:uikit:dialog’

includeIfAbsent ‘:uikit:widgetlayout’

includeIfAbsent ‘:uikit:statusbar’

includeIfAbsent ‘:uikit:toolbar’

common_business.gradle中一键依赖

apply from: rootProject.file(“library_base.gradle”)

dependencies {

.​…

implementation project(":uikit:uikit")

}

UI组件独立编译

uikit/shell/settings.gradle

include ‘:app’

includeModule(‘widget’,’…/’)

includeModule(‘demo’,’…/’)

includeModule(‘flatbutton’,’…/’)

includeModule(‘imgselector’,’…/’)

includeModule(‘photodraweeview’,’…/’)

includeModule(‘roundview’,’…/’)

includeModule(‘uikit’,’…/’)

includeModule(‘widgetlayout’,’…/’)

includeModule(‘dialog’,’…/’)

includeModule(‘statusbar’,’…/’)

includeModule(‘toolbar’,’…/’)

def includeModule(name, filePath = name) {

def projectDir = new File(filePath+name)

if (projectDir.exists()) {

include ‘:uikit:’ + name

project(’:uikit:’ + name).projectDir = projectDir

} else {

print(“settings:could not find module $name in path $filePath”)

}

}

UI组件lib的build.gradle中

if (rootProject.ext.is_in_uikit_project) {

apply from: rootProject.file(’…/uikit.gradle’)

} else {

apply from: rootProject.file(‘uikit/uikit.gradle’)

}

这样就实现了宿主工程UIKit代码单独运行的效果了

工具型组件迭代的思路就是不断的完善基础能力，尽可能的功能全面，在已有的能力上不断的支持新的功能，比较重要的就是兼容已有api，比较代表性的组件有FlatButton、Roun
dView、StatusBar，可以参考下FlatButton&RoundView迭代历程：

如何做好一个业务组件呢，实现可以是具象的，也可以是抽象的，好的组件设计应该是2者兼备，最底层的实现应该是足够抽象，而上层实现又应该是具象的，所以需要带着容器化的思路来实现，那么怎么个思路呢，如下图：