在Android应用中有很多标签一样的页面，这些页面是无法通过Google提供的View来完成，这个时候我们就需要自定义View来完成UI的开发,我们通常叫这样的布局叫流式布局。
流式布局其实是一个很基础的自定义View,主要考察的是我们测量(onMeasure())和定位(onLayout()的相关知识).
先上效果图
开发思路:
大体思路就是通过onMeasure()测量子View的宽高,来确认整个ViewGroup的宽度和高度,然后在判断ViewGroup宽高是属于哪个一个Model来进行具体的值的设置。onMeasure()之后我们就需要给每一个子View来确定在Activity的具体位置,这个时候我们通过onLayout()来给每一个子View设置固定的坐标地址。最后我们只需要把我们需要的标签用TextView来addView()进我们的ViewGroup就完成了.
具体细节:
onMeasure()：
首页我们要获取到ViewGroup中所有的子view,然后通过子view来确定最大行的高度,为什么这要么做呢? 因为流式布局中每一行的宽度是不规律的，我们ViewGroup只有拿到每一行最大的宽度才能保证兼容其他行的宽度。最大宽度的计算是这样的，我们设置一个常量来记录我们子view相加的宽度。当我们子view相加的宽度大于我们ViewGrop的宽度时，就需要换行处理. 这个时候我们就需要把记录子view相加的宽度的常量清空，并记录这个子view相加的常量，留着与下一行子view相加的长度来确定来一行才是最大的一行，测量高度同理。测量完宽高，我们需要根据ViewGroup宽高不同的model做不出的处理，这个很简单,看代码就能理解。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//获取子类个数
int count = getChildCount();
//获取手机屏幕宽度
int maxWidth = ((MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight()));
//记录View的高度
int contentHeight = 0;
//记录一行中View的宽度和
int lineWidth = 0;
//记录多行中最大的宽度 做为ViewGroup的宽度
int maxLineWidth = 0;
//记录一行中最高的item 高度
int maxItemHeight = 0;
//是否是一行的开头
boolean isBegin = true;
//测量每一个子view
for (int i = 0; i < count; i++) {
View childView = getChildAt(i);
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
if (!isBegin) {
lineWidth += mWordMargin;
} else {
isBegin = false;
}
//换行
if (lineWidth + childView.getMeasuredWidth() >= maxWidth) {
//记录当前行的高度
contentHeight += maxItemHeight + mLineMargin;
maxItemHeight = 0;
maxLineWidth = Math.max(maxLineWidth, lineWidth);
lineWidth = 0;
isBegin = true;
}
//上一个View与这个一View相比 保存最高的高度
maxItemHeight = Math.max(childView.getMeasuredHeight(), maxItemHeight);
//记录一行中各个子View 相加起来起来的高度
lineWidth += childView.getMeasuredWidth();
}
//最后View的高度
contentHeight += maxItemHeight;
//最后的宽度
maxLineWidth = Math.max(maxLineWidth, lineWidth);
setMeasuredDimension(
measureWidth(widthMeasureSpec, maxLineWidth),
measureHeight(heightMeasureSpec, contentHeight)
);
}
/**
* measureWidth 与 measureHeight 相同
*/
private int measureWidth(int widthMeasureSpec, int maxLineWidth) {
int result = 0;
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);
//如果ViewGroup:layout_width 为Match_parent或固定值
if (specMode == MeasureSpec.EXACTLY) {
return specSize;
} else {
//如果ViewGroup:layout_height 为Warp_content
result = maxLineWidth + getPaddingLeft() + getPaddingRight();
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
//当如设置有minWidth的时候设置minWidth的值
result = Math.max(result, getSuggestedMinimumWidth());
return result;
}
onLayout()
onLayout()中我们只需要给每一个子view设置对应的x,y坐标就可以。
首先我们先获取paddingLeft(),paddingRight() 和ViewGroup宽度的值. 设置一个记录高度的值,还是一样，我们通过遍历子view来获取到每一个子view的宽高,然后通过子view 相加不大于ViewGroup的情况下 一直叠加子view之间的宽度,来判断是否需要换行 来进行新的位置确定. 子view的X坐标 如果不是第一个子view的话， 我们需要加上上一个子view的宽度来获取到当前子view的X坐标，y坐标是拿子view自己的高度。当换行之后，宽度还是和第一行一样,但是第二行我们就需要加上第一行我们所记录的子view中最大的高度来设置，第三行,第四行也是如此
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int x = getPaddingLeft();
int y = getPaddingTop();
int contentWidth = ((r - l));
int maxItemHeight = 0;
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
//需要换行
if (x + childView.getMeasuredWidth() + getPaddingRight() > contentWidth) {
x = getPaddingLeft();
y += mLineMargin + maxItemHeight;
maxItemHeight = 0;
}
childView.layout(x, y, x + childView.getMeasuredWidth(), y + childView.getMeasuredHeight());
x += childView.getMeasuredWidth() + mWordMargin;
maxItemHeight = Math.max(maxItemHeight, childView.getMeasuredHeight());
}
}
最后我们只需要通过addView往ViewGroup里面添加标签就可以实现流式布局了
private void addLabel(T data, int position, FlowTextProvider provider) {
final TextView tags = new TextView(mContext);
tags.setPadding(mTextPaddingLeft, mTextPaddingTop, mTextPaddingRight, mTextPaddingBottom);
tags.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTextSize);
tags.setTextColor(mTextColor != null ? mTextColor : ColorStateList.valueOf(0xFF000000));
//设置给label的背景(Drawable)是一个Drawable对象的拷贝，
// 因为如果所有的标签都共用一个Drawable对象，会引起背景错乱。
tags.setBackgroundDrawable(mFlowBg.getConstantState().newDrawable());
tags.setTag(KEY_DATA, data);
tags.setTag(KEY_POSITION, position);
tags.setOnClickListener(this);
addView(tags);
tags.setText(provider.getFlowText(tags, position, data));
}
Demo地址
学习资料
参考地址