UI组件化--干掉shape终极一战

}

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代码单独运行的效果了

组件架构

---

组件可以分为2类：工具型、业务类型，2个类型的组件迭代思路差异非常的大，工具型组件，只要单点做到极致就ok了，整体比较简单，复用性也比较强，而业务型组件就会稍显复杂，既要考虑复用性，也要考虑可扩展性，下面分别介绍这2个类型组件的实现思路

工具型

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

业务型

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

组件实现

---

下面以FlatButton为例介绍组件实现方式