先看一下效果吧
flow.gif
流式排列，这种应用场景还是很多的，当一行显示不下时，再切换到下一行。这里有两种实现方式：
第一种官方实现方式
使用谷歌新开源的FlexboxLayout，这种方式很简单，现成的直接拿来用就好，如下方式引用
compile 'com.google.android:flexbox:0.1.2'
xml文件当中这样写
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap"
app:justifyContent="center"
app:flexDirection="row">
<TextView
style="@style/tag"
android:text="新浪微博" />
<TextView
style="@style/tag"
android:text="微信公众平台" />
<TextView
style="@style/tag"
android:text="Html5" />
<TextView
style="@style/tag"
android:text="Css3" />
<TextView
style="@style/tag"
android:text="JavaEE" />
</com.google.android.flexbox.FlexboxLayout>
第二种实现方式
使用自定义ViewGroup的方式，也是我要重点说的，因为我们可以学习到自定义的ViewGroup啊。一般来说，自定义ViewGroup的步骤就是onMeasure->onLayout->dispatchDraw这几个方法，也就是测量，定位，绘制这几个步骤。
这里还是借大神的话说吧
1、ViewGroup的职责是啥？
ViewGroup相当于一个放置View的容器，并且我们在写布局xml的时候，会告诉容器（凡是以layout为开头的属性，都是为用于告诉容器的），我们的宽度（layout_width）、高度（layout_height）、对齐方式（layout_gravity）等；当然还有margin等；于是乎，ViewGroup的职能为：给childView计算出建议的宽和高和测量模式 ；决定childView的位置；为什么只是建议的宽和高，而不是直接确定呢，别忘了childView宽和高可以设置为wrap_content，这样只有childView才能计算出自己的宽和高。
2、View的职责是啥？
View的职责，根据测量模式和ViewGroup给出的建议的宽和高，计算出自己的宽和高；同时还有个更重要的职责是：在ViewGroup为其指定的区域内绘制自己的形态。
3、ViewGroup和LayoutParams之间的关系？
大家可以回忆一下，当在LinearLayout中写childView的时候，可以写layout_gravity，layout_weight属性；在RelativeLayout中的childView有layout_centerInParent属性，却没有layout_gravity，layout_weight，这是为什么呢？这是因为每个ViewGroup需要指定一个LayoutParams，用于确定支持childView支持哪些属性，比如LinearLayout指定LinearLayout.LayoutParams等。如果大家去看LinearLayout的源码，会发现其内部定义了LinearLayout.LayoutParams，在此类中，你可以发现weight和gravity的身影。
2、View的3种测量模式
上面提到了ViewGroup会为childView指定测量模式，下面简单介绍下三种测量模式：
EXACTLY：表示设置了精确的值，一般当childView设置其宽、高为精确值、match_parent时，ViewGroup会将其设置为EXACTLY；
AT_MOST：表示子布局被限制在一个最大值内，一般当childView设置其宽、高为wrap_content时，ViewGroup会将其设置为AT_MOST；
UNSPECIFIED：表示子布局想要多大就多大，一般出现在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此种模式比较少见。
注：上面的每一行都有一个一般，意思上述不是绝对的，对于childView的mode的设置还会和ViewGroup的测量mode有一定的关系；当然了，这是第一篇自定义ViewGroup，而且绝大部分情况都是上面的规则，所以为了通俗易懂，暂不深入讨论其他内容。
3、从API角度进行浅析
上面叙述了ViewGroup和View的职责，下面从API角度进行浅析。
View的根据ViewGroup传人的测量值和模式，对自己宽高进行确定（onMeasure中完成），然后在onDraw中完成对自己的绘制。
ViewGroup需要给View传入view的测量值和模式（onMeasure中完成），而且对于此ViewGroup的父布局，自己也需要在onMeasure中完成对自己宽和高的确定。此外，需要在onLayout中完成对其childView的位置的指定。
下面就看实现方式吧，代码是最好的老师，就算照着打一遍其实也在不知不觉中学习了
//存储所有的子Viewprivate
List<List<View>> allViews = new ArrayList<List<View>>();
//存储每一行的最高值
private List<Integer> lineHeights = new ArrayList<>();
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获取他得测量模式和大小
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
//为了支持wrap_content，计算宽高
int width = 0;
int height = 0;
int lineWidth = 0;
int lineHeight = 0;
int cCount = getChildCount();
for (int i = 0; i < cCount; i++) {
View child = getChildAt(i);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
int childHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
//判断是否要换行了
if (lineWidth + childWidth > sizeWidth) {
width = Math.max(lineWidth, childWidth);
lineWidth = childWidth;
height += lineHeight;
lineHeight = childHeight;
} else {
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);//每一行的高度是子view的最大值
}
//判断最后一行的高度和宽度加进去
if (i == cCount - 1) {
width = Math.max(width, lineWidth);
height += lineHeight;
lineHeights.add(lineHeight);
}
}
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height);
}
还有onLayout方法
@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {
allViews.clear();
lineHeights.clear();
List<View> lineViews = new ArrayList<View>();
int left = 0;
int top = 0;
int lineHeight = 0;
int width = getWidth();
int cCount = getChildCount();
int lineWidth = 0;
//这里就是为了取得每一行的view，每一行的适应高度，其他方式获得亦可
for (int i = 0; i < cCount; i++) {
View child = getChildAt(i);
child.setTag(false);
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) {
lineHeights.add(lineHeight);
allViews.add(lineViews);
lineWidth = 0;
lineViews = new ArrayList<View>();
}
lineWidth += childWidth + lp.leftMargin + lp.rightMargin; lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin);
lineViews.add(child);
//处理点击事件
child.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
boolean tag = !(boolean) v.getTag();
if (tag) {
v.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_bg_select));
} else {
v.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_bg));
}
v.setTag(tag);
}
});
}
//最后一行的标签加进去
lineHeights.add(lineHeight);
allViews.add(lineViews);
Log.e("xxx", "" + lineHeights.size() + "," + allViews.size()); int lines = allViews.size();
//这里是为了对每一个子View根据left，top进行定位
for (int i = 0; i < allViews.size(); i++) {
lineViews = allViews.get(i);
Log.e("xx", "-----" + lineViews.size());
//遍历每一行子View
lineHeight = lineHeights.get(i);
for (int j = 0; j < lineViews.size(); j++) {
View child = lineViews.get(j);
if (child.getVisibility() == View.GONE) {
continue;
}
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int lc = left + lp.leftMargin;
int tc = top + lp.topMargin;
int rc = lc + child.getMeasuredWidth();
int bc = tc + child.getMeasuredHeight();
Logger.i("lines:" + lines + ",layout:" + lc + "," + tc + "," + rc + "," + bc);
child.layout(lc, tc, rc, bc);
left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
}
left = 0;
top += lineHeight;
}
}
真正的自己写下来，理解到每一行的操作，发现也没有那么难了，对自己的自定义ViewGroup的能力也是一种提升了。
网友评论