自定义控件其实很好的体现了java的特性：继承，封装；通过继承View/ViewGroup/View相关派生类，以拥有其方法特性，然后对部分方法加以重写以达到自定义效果，需要的话再封装相关的方法属性提供给外部调用。而我们自定义控件无非就是希望控件按照我们的意愿绘制/摆放成指定的效果，所以一般需要对onDraw/onLayout方法重写；而摆放layout前需要先测量一下控件的大小，必要时再重写个onMeasure方法。android对View和ViewGroup定位比较明确，ViewGroup专门用于将多个不能再拆分的View组合在一起，View就专职绘制，所以ViewGroup默认不会调用onDraw方法（需要调用的话需要先setWillNotDraw(false)将不绘制标记清除），而View中onLayout是空方法。
下面将通过一个需求来大致了解自定义组合控件
需求背景：
多个地方需要使用风格一致的tab切换，要求点击tab切换时，背景高亮颜色做一个动画从前一个tab跑到后一个tab， 每个tab的宽度是相等的。
1.首先这个自定义控件类TabView需要继承自ViewGroup或者ViewGroup派生类（比如LinearLayout RelativeLayout等），这里我们继承自ConstraintLayout。
2.ViewGroup都会有3个构造方法默认需要我们实现，默认调用super中的构造方法，自定义就需要进行定制化初始化，这里我们调用本类中的构造方法，全都调用TabView(Context context, AttributeSet attrs, int defStyleAttr)；
public TabView(Context context) {
this(context, null);
}
public TabView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TabView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initTab(attrs);
}
3.自定义属性
可以加载xml布局作为该控件，但是我们tab标签个数和标签文本不是固定的，用代码加载会比较合适。可以定义一个自定义属性用于确认tab标签个数和文本。
在values下新建attrs.xml，自定义TabView的新属性，这里名字要与类型一致。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TabView">
<attr name="tab_items" format="string"/>
<attr name="start_color" format="color"/>
<attr name="end_color" format="color"/>
</declare-styleable>
</resources>
4.通过自定义属性初始化控件。分析需求需要n个TextView作为Tab，同时需要一个背景颜色控件（直接用View），onMeasure和onLayout只需要处理几个tab控件，背景控件根据需要实时更新x位置即可
private void initTab(AttributeSet attr) {
setBackgroundResource(R.drawable.white_shape_type_selection_bg);
Context context = getContext();
mColorList = getResources().getColorStateList(R.color.selector_tab_text_color);
mBgAnimView = new View(context);
mBgAnimView.setBackgroundResource(R.drawable.shape_type_selection_lite_bg);
addView(mBgAnimView, 0);
mBgAnimView.setVisibility(GONE);
mDefaultPadding = getResources().getDimensionPixelSize(R.dimen.tab_layout_default_padding);
mItemTextSize = getResources().getDimensionPixelSize(R.dimen.tab_layout_default_text_size);
// 通过TypedArray拿到自定义的属性集合，再获取其各个属性
TypedArray attributes = context.obtainStyledAttributes(attr, R.styleable.TabView);
// 注意这里的名字为拼接的
String tabItems = attributes.getString(R.styleable.TabView_tab_items);
mStartColor = attributes.getColor(R.styleable.TabView_start_color, getResources().getColor(R.color.tab_layout_text_default_color));
mEndColor = attributes.getColor(R.styleable.TabView_end_color, Color.WHITE);
// 使用完属性后一定要回收
attributes.recycle();
if (!TextUtils.isEmpty(tabItems)) {
// 这里默认用|来分隔各个tab文本，xml中属性string需要下划线分隔
String[] items = tabItems.split("\\|");
setItems(items);
// 默认选中第一个tab
setSelectItem(0);
}
}
public void setItems(String[] items) {
ViewGroup.LayoutParams layoutParams = getLayoutParams();
boolean isExactly = false;
if (layoutParams != null && layoutParams.height > mDefaultPadding) {
isExactly = true;
}
if (items != null && items.length != 0) {
for (int i = 0; i < items.length; i++) {
TextView textView = new TextView(getContext());
initItemView(textView, isExactly);
textView.setText(items[i]);
textView.setGravity(Gravity.CENTER);
mViews.add(i, textView);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, isExactly ? layoutParams.height : LayoutParams.WRAP_CONTENT);
textView.setLayoutParams(params);
textView.setOnClickListener(this);
addView(textView);
}
}
}
public void setSelectItem(int selectIndex) {
if (selectIndex >= 0 && selectIndex < mViews.size() && mCurrSelectIndex != selectIndex) {
mCurrSelectIndex = selectIndex;
mLastSelectIndex = selectIndex;
updateBgAnimLocation();
}
}
5.重写onMeasure和onLayout方法来确认控件摆放位置。需要先测量控件总宽度平均分配个n个tab，控件高度最多和最高的tab一样高。onLayout时水平逐个摆放tab就可以
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int size = mViews.size();
int height = 0;
int width = MeasureSpec.getSize(widthMeasureSpec);
if (size > 0) {
float perWidth = width * 1.0f / size;
// 宽度平均分配
if (mPerWidth != perWidth) {
mPerWidth = (int) perWidth;
for (TextView view : mViews) {
view.getLayoutParams().width = mPerWidth;
}
}
if (getMeasuredHeight() != 0) {
for (TextView view : mViews) {
if (view.getMeasuredHeight() > height) {
height = view.getMeasuredHeight();
}
}
}
}
super.onMeasure(widthMeasureSpec, height == 0 ? heightMeasureSpec : MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int layoutSize = mViews.size();
if (layoutSize < 1) {
return;
}
int left = 0;
int right = left;
for (int i = 0; i < layoutSize; i++) {
View child = mViews.get(i);
if (i == layoutSize - 1) {
right = r - l;
left = r - l - mPerWidth;
} else {
right += mPerWidth;
}
child.layout(left, 0, right, b - t);
left = right;
}
updateBgAnimViewIfNeed(t, b);
}
private void updateBgAnimViewIfNeed(int t, int b) {
// mBgAnimView只需要layout一次，layout前先初始化其高度
if (mBgAnimView.getHeight() != b - t) {
mBgAnimView.setLayoutParams(new LayoutParams(mPerWidth, b - t));
mBgAnimView.layout(0, 0, mPerWidth, b - t);
updateBgAnimLocation();
}
}
// 切换tab时更新mBgAnimView气泡到目标tab位置
private void updateBgAnimLocation() {
if (mCurrSelectIndex >= 0 && mCurrSelectIndex < mViews.size()) {
TextView view = mViews.get(mCurrSelectIndex);
for (int i = 0; i < mViews.size(); i++) {
if (i != mCurrSelectIndex && mViews.get(i).isSelected()) {
mViews.get(i).setSelected(false);
}
}
view.setSelected(true);
mBgAnimView.setX(view.getX());
mBgAnimView.setVisibility(VISIBLE);
}
}
6.动画效果也顺便给一个, 每次做动画切换tab时，动态的计算fromView，toView，用一个属性动画ValueAnimator从0-100，映射至fromView和toView之间的距离，按更新百分比计算mBgAnimView移动的位置，同时该百分比和tab文字颜色渐变一致。颜色计算的工具类这里也贴出来了。
private void startChangeSelectAnimation(@NonNull final TextView fromView, @NonNull final TextView toView, final int index) {
if (fromView == toView) {
return;
}
if (mValueAnimator != null && mValueAnimator.isRunning()) {
mValueAnimator.cancel();
}
final float startX = mBgAnimView.getX();
final float distance = toView.getX() - startX;
mValueAnimator = ValueAnimator.ofFloat(0, 100);
mValueAnimator.addUpdateListener(animation -> {
float animatedValue = (float) animation.getAnimatedValue();
float fraction = animatedValue / 100f;
toView.setTextColor(Utils.evaluateColor(fraction, mStartColor, mEndColor));
fromView.setTextColor(Utils.evaluateColor(1 - fraction, mStartColor, mEndColor));
mBgAnimView.setX(fraction * distance + startX);
});
mValueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
if (mAnimListener != null) {
mAnimListener.onStart();
}
}
@Override
public void onAnimationEnd(Animator animation) {
if (mListener != null) {
mListener.OnItemClickAnimEnd(toView, index, mIsAnimCancel);
}
if (!mIsAnimCancel) {
mBgAnimView.setX(toView.getX());
}
fromView.setTextColor(mColorList);
toView.setTextColor(mColorList);
toView.setSelected(true);
fromView.setSelected(false);
mIsAnimCancel = false;
if (mAnimListener != null) {
mAnimListener.onEnd();
}
}
@Override
public void onAnimationCancel(Animator animation) {
mIsAnimCancel = true;
if (mAnimListener != null) {
mAnimListener.onCancel();
}
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
mValueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
mValueAnimator.setDuration(200);
mValueAnimator.start();
}
public class Utils {
/**
* 颜色渐变计算
*/
public static int evaluateColor(float fraction, int startValue, int endValue) {
int startA = (startValue >> 24) & 0xff;
int startR = (startValue >> 16) & 0xff;
int startG = (startValue >> 8) & 0xff;
int startB = startValue & 0xff;
int endA = (endValue >> 24) & 0xff;
int endR = (endValue >> 16) & 0xff;
int endG = (endValue >> 8) & 0xff;
int endB = endValue & 0xff;
return (startA + (int) (fraction * (endA - startA))) << 24
| (startR + (int) (fraction * (endR - startR))) << 16
| (startG + (int) (fraction * (endG - startG))) << 8
| (startB + (int) (fraction * (endB - startB)));
}
}
使用控件时非常简单, 只要给出tab_items标签并以下划线分隔即可。
或者初始化TabView时直接拿到TabView对象调用其setItems方法，将tab_items设置给它。
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="20dp"
tools:context=".MainActivity">
<com.vachel.tabviewdemo.view.TabView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tab_items="tab1|tab2|tab3|tabtab|tab5"/>
</android.support.constraint.ConstraintLayout>
效果的如下： demo地址https://github.com/vachel7/TabView
image.png
