lib库实现UI定制化

背景

随着公司项目越来越多，会使用到公共的UI组件，那么将组件抽离出来独立成一个lib库是有必要的。但是，不同的项目存在一定的差异化是不可避免的，这时候，如何在提高公共组件可复用性又可实现UI差异？那么UI定制化就是本文的重点。

组件模块化

组件模块化根据粒度大小，将其分为：控件模块化和功能模块化。

控件模块化，就是将某个控件抽离出来，它仅仅用来显示效果，不包括业务逻辑；

相对的，功能模块化，就是包含了业务逻辑，一个较完整的功能模块。

控件模块化

控件模块化中的UI定制，和Android中自定义View一样，在res/attr.xml文件下声明一个declare-styleable

<declare-styleable name="YLCalendar">    <attr name="todayBorderColor" format="color"/>    <attr name="todayShape">        <enum name="circle" value="0"/>        <enum name="rectangle" value="1"/>    </attr>    <attr name="todayFill" format="boolean"/>    <attr name="todayTextColor" format="color"/>    <attr name="todayTextSize" format="dimension"/>    <!--公历字体颜色-->    <attr name="solarTextColor" format="color" />    <!--农历字体颜色-->    <attr name="lunarTextColor" format="color" />    <!--不在当月日期的颜色-->    <attr name="hintColor" format="color" /></declare-styleable>

然后在自定义view中去获取属性值

public abstract class CalendarViewPager extends ViewPager{    public CalendarViewPager(Context context, AttributeSet attrs) {        super(context, attrs);        initAttr(context,attrs);    }    private void initAttr(Context context, AttributeSet attrs){        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.YLCalendar);        ...        ta.recycle();    }}

最后在引用自定义view时，给它配置属性值

<com.yealink.calendar.calendar.MWCalendar    android:id="@+id/mWCalendar"    android:layout_width="match_parent"    android:layout_height="match_parent"    style="@style/YLCalendarStyle"></com.yealink.calendar.calendar.MWCalendar>

其中YLCalendarStyle包含了R.styleable.YLCalendar的属性项

<style name="YLCalendarStyle">    <!--今天绘制形状：圆形、矩形-->    <item name="todayShape">circle</item>    <!--今天形状是否实心-->    <item name="todayFill">true</item>    <!--今天字体颜色-->    <item name="todayTextColor">@android:color/white</item>    <!--今天字体大小-->    <item name="todayTextSize">@dimen/solarTextSize</item></style>

这是将控件进行封装，将一些属性暴露出来，然后使用的时候通过xml进行动态设置。

功能模块化

功能模块与控件模块UI定制的不同之处在于，功能模块已经将控件进行组合显示，并包含了一些业务逻辑操作，因此它无法像控件那样通过xml进行引用，外界只能通过接口调起该功能模块，因此它的UI定制将通过另外一种方式。

第一种方式：通过theme主题
在attr.xml文件下声明属性

<resources>    <!--标题栏背景色-->    <attr name="titleBarBackground" format="color"/>    <!--状态栏高度-->    <attr name="statusBarHeight" format="dimension"/></resources>

和之前的styleable属性不同，它不在declare-styleable节点，而是在根节点直接声明。接着使用的时候，如下：

<LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <View        android:id="@+id/status_bar"        android:layout_width="match_parent"        android:layout_height="?attr/statusBarHeight"        android:background="?attr/titleBarBackground"/></LinearLayout>

可以看到，通过?attr进行引用，它标示预定义样式，属性值会随着主题而改变。
最后定制UI的时候，可以在应用的主题theme进行赋值，如下：

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">    ...    <item name="statusBarHeight">0dp</item>    <item name="titleBarBackground">@color/app_primary_white</item></style>

第二种方式：通过style样式

这种方式和控件模块有点相似，只是它不是通过xml配置。在res/attr.xml文件下声明一个declare-styleable

<declare-styleable name="YlAlbum">    <!--状态栏和标题栏颜色-->    <attr name="statusBarColor" format="color"/>    <!--是否显示标题栏左边按钮文字“返回”-->    <attr name="showTitleBarLeftText" format="boolean"/>    <!--要显示的图片格式-->    <attr name="imageFormat">        <flag name="jpg" value="1"/>        <flag name="jpeg" value="2"/>        <flag name="png" value="4"/>        <flag name="bmp" value="8"/>        <flag name="gif" value="16"/>        <flag name="all" value="31"/>    </attr>    <attr name="sendButtonText" format="string"/></declare-styleable>

接着在style.xml定义一个style，配置属性值

<style name="YlAlbumStyle">    <!--状态栏和标题栏颜色-->    <item name="statusBarColor">@color/album_lib_status_bar_color</item>    <!--是否显示标题栏左边按钮文字“返回”-->    <item name="showTitleBarLeftText">false</item>    <!--要显示的图片格式-->    <item name="imageFormat">gif|jpg|jpeg|bmp|png</item>    <!--发送按钮显示的文字内容-->    <item name="sendButtonText">@string/album_lib_send</item></style>

style中的属性项都是来于declare-styleable（上面的YlAlbum）

最后在代码中读取属性值，并使用。

private void initAttributes(){    int styleID = getIntent().getIntExtra("styleID",R.style.YlAlbumStyle);    TypedArray typedArray = obtainStyledAttributes(styleID,R.styleable.YlAlbum);    Attrs.statusBarColor = typedArray.getColor(R.styleable.YlAlbum_statusBarColor,getResources().getColor(R.color.album_lib_status_bar_color));    Attrs.showTitleBarLeftText = typedArray.getBoolean(R.styleable.YlAlbum_showTitleBarLeftText,true);    Attrs.imageFormat = typedArray.getInt(R.styleable.YlAlbum_imageFormat,Attrs.ImageFormat.ALL.getFlag());    Attrs.sendButtonText = typedArray.getText(R.styleable.YlAlbum_sendButtonText);    typedArray.recycle();}

主要是通过getTheme().obtainStyledAttributes方法读取styleable的属性值，代码中使用这些属性值。

总结

UI定制有三种形式：
1. 自定义view通过xml配置
2. 通过在xml预定义?/attr，配置theme主题
3. 通过自定义style，代码中读取style属性值

第一种相对较灵活，在xml引用自定义view时即可配置属性值；第二种，由于是跟随主题，而一个activity或者application只配置一次主题，导致项目中只能使用一套UI；第三种，可以动态的使用不同的style，定制不同的UI，且属性项是在一个declare-styleable内，较集中，方便管理。因此，一般来说，控件模块化使用第一种方式，功能模块化使用第三种方式。