QMUI源码分析之QMUIRoundButton
2019-02-14 本文已影响252人
木乃伊459
核心类
-
QMUIRoundButton：继承自QMUIAlphaButton、AppCompatButton, 默认样式为QMUI.RoundButton -
QMUIRoundButtonDrawable:QMUIRoundButton的背景生成类 -
QMUIViewHelper: 辅助类，用于设置背景。
QMUIRoundButton
在 QMUIRoundButton 的每一个构造函数中都调用了 init(), 通过查看 init()发现核心是获取一个 Drawable 对象，并将其作为背景赋值给自身.
- QMUIRoundButtonDrawable.fromAttributeSet() 负责生成Drawable 对象
- QMUIViewHelper.setBackgroundKeepingPadding() 负责调用 view.setBackground(drawable).
private void init(Context context, AttributeSet attrs, int defStyleAttr) {
// 获取背景
QMUIRoundButtonDrawable bg = QMUIRoundButtonDrawable.fromAttributeSet(context, attrs, defStyleAttr);
// 设置背景
QMUIViewHelper.setBackgroundKeepingPadding(this, bg);
// 设置disable 时不改变透明度
setChangeAlphaWhenDisable(false);
// 设置press 时不改变透明度
setChangeAlphaWhenPress(false);
}
QMUIViewHelper
通过调用setBackgroundKeepingPadding() 来设置背景并保持原有的内边距
/**
* 设置默认边距与背景
* @param view
* @param drawable
*/
public static void setBackgroundKeepingPadding(View view, Drawable drawable) {
int[] padding = new int[]{view.getPaddingLeft(), view.getPaddingTop(), view.getPaddingRight(), view.getPaddingBottom()};
setBackground(view, drawable);
view.setPadding(padding[0], padding[1], padding[2], padding[3]);
}
/**
* 给View 设置背景 drawable
* @param view
* @param drawable
*/
@SuppressWarnings("deprecation")
@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
public static void setBackground(View view, Drawable drawable){
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
view.setBackground(drawable);
} else {
view.setBackgroundDrawable(drawable);
}
}
QMUIRoundButtonDrawable
QMUIRoundButtonDrawable 获取Drawable 对象
获取属性，并将属性赋值给一个QMUIRoundButtonDrawable对象且返回
public static QMUIRoundButtonDrawable fromAttributeSet(Context context, AttributeSet attrs, int defStyleAttr) {
// 通过TypedArray 对象获取在xml中定义的属性
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.QMUIRoundButton, defStyleAttr, 0);
// 获取带状态的背景颜色
ColorStateList colorBg = typedArray.getColorStateList(R.styleable.QMUIRoundButton_qmui_backgroundColor);
// 获取带状态的边框颜色
ColorStateList colorBorder = typedArray.getColorStateList(R.styleable.QMUIRoundButton_qmui_borderColor);
// 边框宽度
int borderWidth = typedArray.getDimensionPixelSize(R.styleable.QMUIRoundButton_qmui_borderWidth, 0);
// 圆角是否是短边的一半 默认为false
boolean isRadiusAdjustBounds = typedArray.getBoolean(R.styleable.QMUIRoundButton_qmui_isRadiusAdjustBounds, false);
// 获取圆角值 默认为0
int mRadius = typedArray.getDimensionPixelSize(R.styleable.QMUIRoundButton_qmui_radius, 0);
int mRadiusTopLeft = typedArray.getDimensionPixelSize(R.styleable.QMUIRoundButton_qmui_radiusTopLeft, 0);
int mRadiusTopRight = typedArray.getDimensionPixelSize(R.styleable.QMUIRoundButton_qmui_radiusTopRight, 0);
int mRadiusBottomLeft = typedArray.getDimensionPixelSize(R.styleable.QMUIRoundButton_qmui_radiusBottomLeft, 0);
int mRadiusBottomRight = typedArray.getDimensionPixelSize(R.styleable.QMUIRoundButton_qmui_radiusBottomRight, 0);
// 记得回收
typedArray.recycle();
QMUIRoundButtonDrawable bg = new QMUIRoundButtonDrawable();
// 设置背景颜色
bg.setBgData(colorBg);
// 设置边框颜色与宽度
bg.setStrokeData(borderWidth, colorBorder);
// 圆角带优先级为 单个圆角 > 四个圆角 > 圆角是否是短边的一半
if (mRadiusTopLeft > 0 || mRadiusTopRight > 0 || mRadiusBottomLeft > 0 || mRadiusBottomRight > 0) {
float[] radii = new float[]{
mRadiusTopLeft, mRadiusTopLeft,
mRadiusTopRight, mRadiusTopRight,
mRadiusBottomRight, mRadiusBottomRight,
mRadiusBottomLeft, mRadiusBottomLeft
};
bg.setCornerRadii(radii);
isRadiusAdjustBounds = false;
} else {
bg.setCornerRadius(mRadius);
if(mRadius > 0){
isRadiusAdjustBounds = false;
}
}
bg.setIsRadiusAdjustBounds(isRadiusAdjustBounds);
return bg;
}
设置背景与边框
通过以上步骤分解可以看出关键在于
1. 设置背景颜色
2. 设置边框颜色与宽度（以上两种要注意在android 5.0 以下需要手动工具状态设置对应的颜色）
只贴出了设置背景颜色的代码，设置边框颜色的代码类似
private boolean hasNativeStateListAPI() {
return Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP;
}
public void setBgData(@Nullable ColorStateList colors) {
// 版本 5.0以上 支持直接设置，5.0以下需要手动获取当前状态颜色再赋值
if (hasNativeStateListAPI()) {
super.setColor(colors);
} else {
mFillColors = colors;
final int currentColor;
if (colors == null) {
currentColor = Color.TRANSPARENT;
} else {
currentColor = colors.getColorForState(getState(), 0);
}
setColor(currentColor);
}
}
onStateChange()
对于Android 5.0 以下需要特殊处理，当状态改变时判断是否需要重新绘制对应状态的UI
/**
* @param stateSet
* @return true 表示状态改变需要改变UI，将会重绘，false 表示相反
*/
@Override
protected boolean onStateChange(int[] stateSet) {
boolean superRet = super.onStateChange(stateSet);
if (mFillColors != null) {
int color = mFillColors.getColorForState(stateSet, 0);
setColor(color);
superRet = true;
}
if (mStrokeColors != null) {
int color = mStrokeColors.getColorForState(stateSet, 0);
setStroke(mStrokeWidth, color);
superRet = true;
}
return superRet;
}
QMUI提供的默认样式
<style name="QMUI.RoundButton" parent="@style/Button">
<!--<item name="android:padding">0dp</item>--><!-- 不用 android:padding，而用各个方向分别指定 padding，方便子类覆盖 -->
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
<!-- 默认圆角是短边的一半 -->
<item name="qmui_isRadiusAdjustBounds">true</item>
<!-- 默认背景颜色为透明的 -->
<item name="qmui_backgroundColor">@color/qmui_s_transparent</item>
<!-- 默认边框宽度为 1dp -->
<item name="qmui_borderWidth">?attr/qmui_round_btn_border_width</item>
<!-- 默认边框颜色 -->
<item name="qmui_borderColor">?attr/qmui_round_btn_border_color</item>
<!-- 默认文字颜色 -->
<item name="android:textColor">?attr/qmui_round_btn_text_color</item>
</style>
总结
通过以上源码分析可以学习到的核心知识点有：
- 通过
extends的方式实现自定义View - 通过
TypedArray获取自定义属性值 - 通过自定义
Drawable来指定圆角、边框颜色、边框粗细、背景色 -
ColorStateList的初次相识，其实质就是对应于selector标签中的各种state_xxx参考链接
