原创博客，如有转载，请注明出处，非常感谢。
img1.png
如上图，view的自动换行，貌似现在很多app都很流行这个设计。
下面介绍两种实现方式：
一. 自定义控件WordWrapView
1. 在attrs.xml中定义控件需要的属性
<declare-styleable name="WordWrapView">
<attr name="spacing_vertical" format="dimension" />
<attr name="spacing_horizontal" format="dimension" />
</declare-styleable>
2.继承ViewGroup开始自定义控件。（逻辑非常简单，直接贴代码，不解释了...）
/**
* 自动换行view
* Created by ys on 2016/2/3.
*/
public class WordWrapView extends ViewGroup {
private float spacingVertical = 20;
private float spacingHorizontal = 20;
public WordWrapView(Context context) {
this(context, null);
}
public WordWrapView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public WordWrapView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.WordWrapView);
spacingHorizontal = a.getDimension(R.styleable.WordWrapView_spacing_horizontal, spacingHorizontal);
spacingVertical = a.getDimension(R.styleable.WordWrapView_spacing_vertical, spacingVertical);
a.recycle();
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
int autualWidth = r - l - getPaddingRight();
int x = getPaddingLeft();// 横坐标开始
int y = 0;//纵坐标开始
int rows = 1;
for (int i = 0; i < childCount; i++) {
View view = getChildAt(i);
int width = view.getMeasuredWidth();
int height = view.getMeasuredHeight();
x += width;
if (x > autualWidth) {
x = width + getPaddingLeft();
rows++;
}
y = rows * height + (rows - 1) * (int) spacingVertical + getPaddingTop();
view.layout(x - width, y - height, x, y);
x += spacingHorizontal;
}
}
;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int x = 0;//横坐标
int y = 0;//纵坐标
int rows = 1;//总行数
int specWidth = MeasureSpec.getSize(widthMeasureSpec);
int actualWidth = specWidth - getPaddingLeft() - getPaddingRight();//实际宽度
int childCount = getChildCount();
for (int index = 0; index < childCount; index++) {
View child = getChildAt(index);
child.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
int width = child.getMeasuredWidth();
int height = child.getMeasuredHeight();
x += width;
if (x > actualWidth) {//换行
x = width;
rows++;
}
x += spacingHorizontal;
y = rows * height + (rows - 1) * (int) spacingVertical + getPaddingTop() + getPaddingBottom();
}
setMeasuredDimension(specWidth, y);
}
}
3. 使用
直接一个布局搞定。当然，如果里面的子item如果是动态的，可以使用viewGroup的addView()方法实现。
img2.png
img3.png
二. FlexboxLayout实现
FlexboxLayout是谷歌的一个开源项目，可以实现各种复杂布局。
FlexboxLayout开源地址：
https://github.com/google/flexbox-layout
1. 添加依赖
dependencies {
compile 'com.google.android:flexbox:0.3.0'
}
2. 使用
FlexboxLayout有一个属性flexWrap，代表是否支持换行排列，有三个值：
nowrap ：不换行
wrap：按正常方向换行
wrap-reverse：按反方向换行
我们用第二个“wrap”就行，接下来继续上代码。
img4.png
img6.png
img5.png
3. 最后
效果和自定义控件一模一样，实现更简单。
如果想了解更多FlexboxLayout使用方法，可以参考：
http://www.oschina.net/news/73442/google-flexbox-layout
