本篇继续来讲自定义ViewGroup，给大家带来一个实例：FlowLayout。何为FlowLayout，就是控件根据ViewGroup的宽，自动的往右添加，如果当前行剩余空间不足，则自动添加到下一行，所以也叫流式布局。Android并没有提供流式布局，但是某些场合中，流式布局还是非常适合使用的，比如关键字标签，搜索热词列表等，比如下图：
定义FlowLayout
LayoutParams，onLayout的写法都和上一篇讲WaterfallLayout一模一样，在此不再赘述了，没看过的可以参照上一篇Android自定义ViewGroup（二）之WaterfallLayout。
在这里主要说的是onMeasure方法，注释见下方：
@Override
protected 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);
int childCount = getChildCount();
// 如果是wrap_content情况下，记录宽和高
int wrapWidth = 0;
int wrapHeight = 0;
//记录每一行的宽度，width不断取最大宽度
int lineWidth = 0;
//每一行的高度，累加至height
int lineHeight = 0;
// 遍历每个子元素
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
// 测量每一个child的宽和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
// 得到child的lParams
LayoutParams lParams = (LayoutParams) child.getLayoutParams();
// 当前子空间实际占据的宽度
int childWidth = child.getMeasuredWidth();
// 当前子空间实际占据的高度
int childHeight = child.getMeasuredHeight();
// 如果加上当前child，则超出最大宽度，然后开启新行
if (lineWidth + childWidth > sizeWidth) {
//记录新行头一个标签坐标，为onLayout做准备
lParams.left = 0;
lParams.top = wrapHeight + lineHeight + vSpace;
lParams.right = childWidth;
lParams.bottom = lParams.top + childHeight;
//取最大的，注意这里lineWidth是包括右侧hSpace的，需要减掉
wrapWidth = Math.max(lineWidth - hSpace, childWidth);
// 重新开启新行，开始记录，可以看到行宽包括最右侧hSpace
lineWidth = childWidth + hSpace;
// 叠加当前高度，同理，加上下侧vSpace
wrapHeight += lineHeight + vSpace;
// 开启记录下一行的高度
lineHeight = childHeight;
} else {
//记录每一个标签坐标，为onLayout做准备
lParams.left = lineWidth;
lParams.top = wrapHeight;
lParams.right = lParams.left + childWidth;
lParams.bottom = lParams.top + childHeight;
//在本行追加标签，累加值到lineWidth,lineHeight取最大高度
lineWidth += childWidth + hSpace;
lineHeight = Math.max(lineHeight, childHeight);
}
// 如果是最后一个
if (i == childCount - 1) {
//将当前记录的最大宽度和当前lineWidth做比较,取较大值
wrapWidth = Math.max(wrapWidth, lineWidth - hSpace);
//布局高加上最后一行高
wrapHeight += lineHeight;
}
}
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : wrapWidth, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : wrapHeight);
}
使用FlowLayout
直接看xml吧，一看便知：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:attr="http://schemas.android.com/apk/res/com.hx.flowlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E1E6F6"
android:orientation="vertical" >
<com.hx.flowlayout.FlowLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
attr:hSpace="20"
attr:vSpace="10">
<TextView
style="@style/flow_text_style_1"
android:text="标签" />
<TextView
style="@style/flow_text_style_1"
android:text="Welcome" />
<TextView
style="@style/flow_text_style_1"
android:text="IT工程师" />
<TextView
style="@style/flow_text_style_1"
android:text="程序猿" />
<TextView
style="@style/flow_text_style_1"
android:text="Android" />
<TextView
style="@style/flow_text_style_1"
android:text="Java" />
<TextView
style="@style/flow_text_style_1"
android:text="ViewGroup" />
<TextView
style="@style/flow_text_style_1"
android:text="FlowLayout" />
</com.hx.flowlayout.FlowLayout>
<com.hx.flowlayout.FlowLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
attr:hSpace="20"
attr:vSpace="10">
<TextView
style="@style/flow_text_style_2"
android:text="标签" />
<TextView
style="@style/flow_text_style_2"
android:text="Welcome" />
<TextView
style="@style/flow_text_style_2"
android:text="IT工程师" />
<TextView
style="@style/flow_text_style_2"
android:text="程序猿" />
<TextView
style="@style/flow_text_style_2"
android:text="Android" />
<TextView
style="@style/flow_text_style_2"
android:text="Java" />
<TextView
style="@style/flow_text_style_2"
android:text="ViewGroup" />
<TextView
style="@style/flow_text_style_2"
android:text="FlowLayout" />
</com.hx.flowlayout.FlowLayout>
</LinearLayout>
这里写的比较啰嗦，所有TextView都是写在xml里面的，当然我们也可以通过Java代码来动态添加。
再来看看style吧，这里我们定义了两种不同的风格，具体见下面：
<style name="flow_text_style_1">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@drawable/flow_text_bg_1</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">16sp</item>
</style>
<style name="flow_text_style_2">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@drawable/flow_text_bg_2</item>
<item name="android:textColor">#4B0082</item>
<item name="android:textSize">20sp</item>
</style>
找到background我们再进去看看，这里使用的是shapeDrawable，之后我会写一些关于shapeDrawable的文章：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF"/>
<corners android:radius="40dp"/>
<stroke android:color="#C9C9C9" android:width="2dp"/>
<padding
android:bottom="2dp"
android:left="10dp"
android:right="10dp"
android:top="2dp" />
</shape>
效果图如下：
源码下载：http://xiazai.jb51.net/201609/yuanma/Android-FlowLayout(jb51.net).rar
您可能感兴趣的文章:android流式布局onLayout()方法详解Android流式布局实现历史搜索记录功能Android简单实现自定义流式布局的方法Android自定义ViewGroup之实现FlowLayout流式布局Android实现热门标签的流式布局Android中使用TagFlowLayout制作动态添加删除标签Android自定义ViewGroup实现标签流容器FlowLayoutAndroid流式布局FlowLayout详解
