流式布局，就是一个容器（ViewGroup），往里面添加元素（子View），元素会一直跟在前一个元素的左边，如果超过容器的边界，就把元素放在下一行的第一个位置。Like This：
我们自己来实现一下这么一种布局，在实现之前，你需要理解关于自定义ViewGroup相关的知识，可以参考 Android 手把手教您自定ViewGroup；如果没问题，接着往下看。
网上已经有很多人实现流式布局了，不过大部分都是静态设置数据，也就是说直接在xml添加子View，像这样：
<com.zhy.zhy_flowlayout02.FlowLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
style="@style/text_flag_01"
android:text="Welcome" />
<TextView
style="@style/text_flag_01"
android:text="IT工程师" />
<TextView
style="@style/text_flag_01"
android:text="学习ing" />
...
</com.zhy.zhy_flowlayout02.FlowLayout>出自Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
下面我实现的动态设置子View，像ListView和GridView一样，直接上码！！
流式布局FlowLayout
新建类，继承ViewGroup
// FlowLayout类
public class FlowLayout extends ViewGroup {
/** 子View之间水平距离 */
private int horizontalSpace = 0;
/** 子View之间垂直距离 */
private int verticalSpace = 0;
// 构造
public FlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.FlowLayout);
horizontalSpace = array.getDimensionPixelOffset(R.styleable.FlowLayout_horizontal_space, 0);
verticalSpace = array.getDimensionPixelOffset(R.styleable.FlowLayout_vertical_space, 0);
array.recycle();
}
}支持xml定义水平距离和垂直距离。
计算所有子View的高宽（测量）
// FlowLayout类
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 取出宽高的模式
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
// 取出宽高的大小
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// 子View的个数
int childCount = getChildCount();
// 计算宽度
int calculateWidth = 0;
// 计算高度
int calculateHeight = 0;
// 行宽度
int lineWidth = 0;
// 行高度
int lineHeight = 0;
// 计算，遍历所有子View
for (int index = 0; index < childCount; index++) {
View childView = getChildAt(index);
// 测量子View
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
// 子View宽度
int childWidth = childView.getMeasuredWidth() + horizontalSpace;
// 子View高度
int childHeight = childView.getMeasuredHeight();
// 如果 当前行宽 + 当前子View宽度 > 最大宽度
if (childWidth + lineWidth > widthSize) {
// 换行
// 更新计算宽度，如果当前行宽大于之前计算宽度，则计算宽度=当前行宽
calculateWidth = Math.max(lineWidth, calculateWidth);
// 计算高度累加当前行高
calculateHeight += lineHeight + (calculateHeight == 0 ? 0 : verticalSpace);
// 更新当前行宽
lineWidth = childWidth;
// 更新当前行高
lineHeight = childHeight;
} else {
// 不换行
// 累加当前行宽
lineWidth += childWidth;
// 更新当前行高，如果当前子View总高度大于当前行高，则当前行高=当前子View总高度
lineHeight = Math.max(childHeight, lineHeight);
}
// 判断是否最后一个
if (index == childCount - 1) {
// 更新计算宽度，如果当前行宽大于之前计算宽度，则计算宽度=当前行宽
calculateWidth = Math.max(lineWidth, calculateWidth);
// 计算高度累加当前行高
calculateHeight += lineHeight + (calculateHeight == 0 ? 0 : verticalSpace);
}
}
// 如果是EXACTLY模式，直接设置用户指定的宽度
int measureWidth = widthMode == MeasureSpec.EXACTLY ? widthSize : calculateWidth;
// 如果是EXACTLY模式，直接设置用户指定的高度
int measureHeight = heightMode == MeasureSpec.EXACTLY ? heightSize : calculateHeight;
// 设置宽高
setMeasuredDimension(measureWidth, measureHeight);
}设置所有子View的位置（布局）
// FlowLayout类
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
// 子View的个数
int childCount = getChildCount();
// 获取最大宽度
int maxWidth = getWidth();
// 行宽
int lineWidth = 0;
// 行高
int lineHeight = 0;
// 记录高度
int recordHeight = 0;
// 布局，遍历所有子View
for (int index = 0; index < childCount; index++) {
View childView = getChildAt(index);
int childWidth = childView.getMeasuredWidth() + horizontalSpace;
int childHeight = childView.getMeasuredHeight();
// 如果 当前行宽 + 当前子View总宽度 > 最大宽度
if (lineWidth + childWidth > maxWidth) {
// 换行
// 记录高度累加当前行高，从第2行起，都要加上垂直距离
recordHeight += lineHeight + (recordHeight == 0 ? 0 : verticalSpace);
// 布局
int childLeft = 0;
int childTop = recordHeight + verticalSpace;
int childRight = childWidth;
int childBottom = recordHeight + childHeight + verticalSpace;
childView.layout(childLeft, childTop, childRight, childBottom);
// 更新行宽
lineWidth = childWidth;
// 更新行高
lineHeight = childHeight;
// 下一个
continue;
}
// 不换行
// 布局
int childLeft = lineWidth;
int childTop = recordHeight + (recordHeight == 0 ? 0 : verticalSpace);
int childRight = lineWidth + childWidth;
int childBottom = recordHeight + childHeight + (recordHeight == 0 ? 0 : verticalSpace);
childView.layout(childLeft, childTop, childRight, childBottom);
// 更新行宽
lineWidth += childWidth;
// 更新行高，取最大
lineHeight = Math.max(childHeight, lineHeight);
}
}只要实现以上3步，这个Layout就可以正常使用了，我们看看怎么添加元素。
适配器FlowAdapter
适配器用于把Object数据转化成View，然后交给FlowLayout显示。至于动态更新流式布局，也是操作这个适配器，采用观察者模式。FlowAdapter为发布者，FlowLayout为观察者，通过调用FlowAdapter的更新方法，便会通知FlowLayout观察者更新数据。我们看实现：
// FlowAdapter类
public abstract class FlowAdapter <T> implements FlowPublisher {
// 数据源
private List<T> dataList;
// 观察者
private FlowObserver observer;
public FlowAdapter(List<T> dataList) {
this.dataList = dataList;
}
@Override
public void register(FlowObserver observer) {
this.observer = observer;
}
@Override
public void unregister() {
this.observer = null;
}
/**
* 子类复写，由数据data获取View
* @param position
* @param data
* @return
*/
public abstract View getView(int position, T data);
/**
* 解析所有数据
* @return
*/
List<View> parseViews() {
List<View> viewList = new ArrayList<>();
for (int position = 0; position < dataList.size(); position++) {
viewList.add(getView(position, dataList.get(position)));
}
return viewList;
}
/**
* 通知更新
*/
public void notifyChange() {
if (observer != null) {
observer.notifyChange(this);
}
}
}observer便是我们的FlowLayout，我们看看notifyChange方法：
// FlowLayout类
/**
* 观察者更新方法
* @param publisher
*/
@Override
public void notifyChange(FlowPublisher publisher) {
if (publisher instanceof FlowAdapter) {
refresh((FlowAdapter)publisher);
}
}
/**
* 刷新
*/
private void refresh(FlowAdapter adapter) {
// 移除所有子View
removeAllViews();
// 获取FlowAdapter所有子View
List<View> childViews = adapter.parseViews();
// 添加到FlowLayout中
for (int index = 0; index < childViews.size(); index++) {
final View childView = childViews.get(index);
// 设置点击事件
final int position = index;
childView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (onItemClickListener != null) {
onItemClickListener.onItemClick(position, childView);
}
}
});
// 添加
addView(childView);
}
// 更新
requestLayout();
}很简单，就是移除所有子View，然后添加所有适配器的View。
当然还有setAdapter方法：
/**
* 设置适配器
* @param adapter
*/
public void setAdapter(FlowAdapter adapter) {
adapter.register(this);
refresh(adapter);
}和ListView很像，有木有？！（虽然内部实现有点不一样）
使用实例
xml布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:flow_layout="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#9c9c9c">
<com.johan.library.viewtoolkit.flowlayout.FlowLayout
android:id="@+id/flow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
flow_layout:horizontal_space="10dp"
flow_layout:vertical_space="10dp"
android:background="@android:color/white"
/>
<!-- 设置了精确的宽度 -->
<com.johan.library.viewtoolkit.flowlayout.FlowLayout
android:id="@+id/flow_layout2"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
flow_layout:horizontal_space="10dp"
flow_layout:vertical_space="10dp"
android:background="@android:color/white"
/>
</LinearLayout>activity使用：
public class FlowLayoutActivity extends Activity {
private List<String> dataList = new ArrayList<>();
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flow_layout);
dataList.add("Java");
dataList.add("Swift");
dataList.add("Html");
dataList.add("CSS");
dataList.add("Go");
dataList.add("C#");
dataList.add("PHP");
FlowLayout flowLayout = (FlowLayout) findViewById(R.id.flow_layout);
final FlowLayoutAdapter adapter = new FlowLayoutAdapter(dataList);
flowLayout.setAdapter(adapter);
flowLayout.setOnItemClickListener(new FlowLayout.OnItemClickListener() {
@Override
public void onItemClick(int position, View view) {
dataList.remove(position);
adapter.notifyChange();
}
});
FlowLayout flowLayout2 = (FlowLayout) findViewById(R.id.flow_layout2);
FlowLayoutAdapter adapter2 = new FlowLayoutAdapter(dataList);
flowLayout2.setAdapter(adapter2);
}
public class FlowLayoutAdapter extends FlowAdapter <String> {
public FlowLayoutAdapter(List<String> dataList) {
super(dataList);
}
@Override
public View getView(int position, String data) {
View layout = LayoutInflater.from(FlowLayoutActivity.this).inflate(R.layout.item_flow_layout, null);
TextView contentView = (TextView) layout.findViewById(R.id.item_content);
contentView.setText(data);
return layout;
}
}
}效果图：
完整代码已经上传到我的github库，地址：https://github.com/JohanMan/viewtoolkit
参考资料
Android 手把手教您自定ViewGroup
Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
722
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
