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

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

组件架构

---

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

工具型

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

业务型

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

组件实现

---

下面以FlatButton为例介绍组件实现方式，其它组件实现思路类似。在实现前，我们先看下视觉稿

按钮样式特别多，实现方式也可以有很多种，现有工程也给出了实现方案，具体如下：

第一步：分别定义noraml下的shape和pressed的shape，如果enable = false，还得再定义一个dissable的shape

normal (ui_standard_bg_btn_corner_28_ripple)

<?xml version="1.0" encoding="utf-8"?>

<ripple xmlns:android=“http://schemas.android.com/apk/res/android”

android:color=“@color/button_pressed_cover”>

<item

android:drawable=“@drawable/ui_standard_bg_btn_corner_28_enable”>

pressed(ui_standard_bg_btn_corner_28_disable)

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android=“http://schemas.android.com/apk/res/android”

android:shape=“rectangle”>

<gradient

android:angle=“0”

android:endColor=“@color/button_disable_end”

android:startColor=“@color/button_disable_start”

android:useLevel=“false”

android:type=“linear” />

第二步：定义selector

selector(ui_standard_bg_btn_corner_28)

<?xml version="1.0" encoding="utf-8"?>

第三步：使用

<TextView

…

android:background=“@drawable/ui_standard_bg_btn_corner_28”

android:textColor=“@color/white”/>

这样按钮的背景按压就实现了，如果在此基础上，文字也需要按压态，那么就重复上面的步骤，对颜色再创建一个选择器，当实现完上面UI定义的样式后，工程中的画风如下：

我是谁，我在哪里，这该怎么玩，长得都差不多，基本没有开发体验，复用性、扩展性都非常的差，如果来个UI大改版，又得从头再来一次。那怎么解决上面的问题呢，答案是定义按钮通用能力，业务上层再实现，按这个思路做，需要删除上面所有shape、selector，然后自定义控件，我们都知道，上面定义的shape、selector xml文件，android系统最终都是会解析生成对应的对象，所以我们借鉴一下系统代码，实现起来就so easy

看下这个shape xml

<shape xmlns:android=“http://schemas.android.com/apk/res/android”

android:shape=“rectangle”>

<gradient

android:angle=“0”

android:endColor=“@color/button_disable_end”

android:startColor=“@color/button_disable_start”

android:useLevel=“false”

android:type=“linear” />

解析后的对象为GradientDrawable

public void setOrientation(Orientation orientation)

public void setColors(@Nullable @ColorInt int[] colors)

public void setCornerRadii(@Nullable float[] radii)

public void setStroke(int width, @ColorInt int color)

…

也就是说，xml中定义的属性，代码中都可以实现，除了GradientDrawable，还会用到RippleDrawable实现水波纹，同理文字颜色选择器代码中对应的为ColorStateList，有了上面铺垫，具体实现如下：

第一步：定义自定义属性

第二步：核心实现逻辑

private fun setBackgroundCompat() {

val stateListDrawable = createStateListDrawable()

val pL = paddingLeft

val pT = paddingTop

val pR = paddingRight

val pB = paddingBottom

background = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && isRippleEnable) {

val rippleDrawable = RippleDrawable(createRippleColorStateList(), stateListDrawable, null)

rippleDrawable

} else {

stateListDrawable

}

setPadding(pL, pT, pR, pB)

}

private fun createStateListDrawable(): StateListDrawable {

var normalDrawable = StateListDrawable()

normalDrawable.addState(

intArrayOf(android.R.attr.state_pressed),

createPressedDrawable()

)

normalDrawable.addState(

intArrayOf(android.R.attr.state_focused),

createPressedDrawable()

)

normalDrawable.addState(

intArrayOf(-android.R.attr.state_enabled),

createDisableDrawable()

)

normalDrawable.addState(

intArrayOf(android.R.attr.state_selected),

createPressedDrawable()

)

normalDrawable.addState(intArrayOf(), createNormalDrawable())

return normalDrawable

}

private fun createRippleColorStateList(): ColorStateList {

val stateList = arrayOf(intArrayOf(android.R.attr.state_pressed), intArrayOf(android.R.attr.state_focused), intArrayOf(android.R.attr.state_activated), intArrayOf())

val normalColor = backgroundStyle.getColorRippleNormalFallback()

val pressedColor = backgroundStyle.getColorRipplePressedFallback()

val stateColorList = intArrayOf(

pressedColor,

pressedColor,

pressedColor,

normalColor

)

return ColorStateList(stateList, stateColorList)

}

第三步：UI组件实现

xml中使用

<com.snapsolve.uikit.flatbutton.FlatButton

app:fb_colorNormalText=“@color/uikit_color_white”

app:fb_colorPressedText=“@color/uikit_color_white”

app:fb_colorNormalEnd=“#FF9800”

app:fb_colorNormalStart=“#FF0000”

app:fb_colorPressedEnd=“#4CAF50”

app:fb_colorPressedStart=“#009688”

app:fb_colorRippleNormal=“#303F9F”

app:fb_colorRipplePressed=“#FF4081”

app:fb_cornerRadius=“24dp”

app:fb_gradientOrientation=“left_right”

app:fb_isRippleEnable=“true”

…

/>

代码中使用

fb_radius_in_code.setBackgroundStyle {

this.colorNormal = resources.getColor(R.color.uikit_color_FF4081)

this.colorPressed = resources.getColor(R.color.uikit_color_9C27B0)

this.colorRippleNormal = resources.getColor(R.color.uikit_color_FF4081)

this.colorRipplePressed = resources.getColor(R.color.uikit_color_9C27B0)

最后附上：我们之前因为秋招收集的二十套一二线互联网公司Android面试真题 （含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总）

面试成功其实是必然的，因为我做足了充分的准备工作，包括刷题啊，看一些Android核心的知识点，看一些面试的博客吸取大家面试的一些经验，下面这份PDF是我翻阅了差不多1个月左右一些Android大博主的博客从他们那里取其精华去其糟泊所整理出来的一些Android的核心知识点， 全部都是精华中的精华，我能面试到现在资深开发人员跟我整理的这本Android核心知识点有密不可分的关系，在这里本着共赢的心态分享给各位朋友。

这份PDF囊括了JVM，Java集合，Java多线程并发，Java基础，生命周期，微服务， 进程,Parcelable 接口，IPC，屏幕适配,线程异步,ART，架构，Jetpack，NDK开发，计算机网络基础，类加载器，Android 开源库源码分析，设计模式汇总，Gradle 知识点汇总…

由于篇幅有限，就不做过多的介绍，大家请自行脑补
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
（含BAT、小米、华为、美团、滴滴）和我自己整理Android复习笔记（包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总）

[外链图片转存中…(img-npWM7Lgt-1715537644045)]

面试成功其实是必然的，因为我做足了充分的准备工作，包括刷题啊，看一些Android核心的知识点，看一些面试的博客吸取大家面试的一些经验，下面这份PDF是我翻阅了差不多1个月左右一些Android大博主的博客从他们那里取其精华去其糟泊所整理出来的一些Android的核心知识点， 全部都是精华中的精华，我能面试到现在资深开发人员跟我整理的这本Android核心知识点有密不可分的关系，在这里本着共赢的心态分享给各位朋友。
[外链图片转存中…(img-d80MkgL6-1715537644048)]

这份PDF囊括了JVM，Java集合，Java多线程并发，Java基础，生命周期，微服务， 进程,Parcelable 接口，IPC，屏幕适配,线程异步,ART，架构，Jetpack，NDK开发，计算机网络基础，类加载器，Android 开源库源码分析，设计模式汇总，Gradle 知识点汇总…

由于篇幅有限，就不做过多的介绍，大家请自行脑补
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！