android 流式布局简单实现

1.概述

今天看了Android自定义控件的书籍之后准备动手写个自定义控件，于是有了该篇文章。之前也看过一些大神们写的,受益匪浅。初写博客一方面是想向大神们学习，另一方面也算是自己学习的一个记录。

2.思路分析

好了废话不多扯，开始正题：流式布局肯定一个view容器也就是ViewGroup。从View的工作原理可以得知 View的绘制流程：

onMeasure —–> onLayout —–> onDraw,依次是

测量规格 —-> 确定位置 —> 绘制。 因此我们实现流式布局只需要重写前2步，即onMeasure和onLayout。

测量时需要通常需要处理测量模式为AT_MOST 对应wrap_content,这种情况需要根据子控件的宽和高来最终确认父控件的宽和高。

3.代码实现

public class FlowView extends ViewGroup {

public FlowView(Context context) {
this(context, null);
}

public FlowView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public FlowView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = 0;
int measureHeight = 0;

int childCount = getChildCount();

int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureWidthSize = MeasureSpec.getSize(widthMeasureSpec);
int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
int measureHeightSize = MeasureSpec.getSize(heightMeasureSpec);

/**note: 原本写法先判断 Mode 都是Exactly的情况下不去测量                childView,从而提高效率。
*   针对onMeasure是可以的,但是onLayout中需要获取子控件width和height    时
*       还是得测量,所以此处统一测量了。
*
*/

//if (measureHeightMode == MeasureSpec.EXACTLY
//&& measureWidthMode == MeasureSpec.EXACTLY) {
//  measureWidth = measureWidthSize;
//  measureHeight = measureHeightSize;
//} else {
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
MarginLayoutParams layoutParam = (MarginLayoutParams) child.getLayoutParams();
int cWidth = child.getMeasuredWidth() + layoutParam.leftMargin + layoutParam.rightMargin;
int cHeight = child.getHeight() + layoutParam.topMargin + layoutParam.bottomMargin;

/**
* 思路:不换行--> width累加  height取max
*      换行 --> width = 上一行累加值与当前控件width的 max值
*               height = 上一行的max值 + 当前控件的height
*/
if (measureWidth + cWidth > measureWidthSize) {
measureWidth = Math.max(measureWidth, cWidth);
measureHeight += cHeight;
} else {
measureHeight = Math.max(measureHeight, cHeight);
measureWidth += cWidth;
}
}

setMeasuredDimension(measureWidthMode == MeasureSpec.EXACTLY ? measureWidthSize : measureWidth,
measureHeightMode == MeasureSpec.EXACTLY ? measureHeightSize : measureHeight);
}

@Override protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
int lineWidth = 0;
int lineHeight = 0;
int left = 0;
int top = 0;
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
MarginLayoutParams layoutParam = (MarginLayoutParams) child.getLayoutParams();
int cWidth = child.getWidth() + layoutParam.leftMargin + layoutParam.rightMargin;
int cHeight = child.getHeight() + layoutParam.topMargin + layoutParam.bottomMargin;

//换行
if (cWidth + lineWidth > getWidth()) {
if (child.getVisibility() != View.GONE) {
left = 0;
top = lineHeight;

child.layout(left + layoutParam.leftMargin, top + layoutParam.topMargin,
left + layoutParam.leftMargin + child.getMeasuredWidth(),
top + layoutParam.topMargin + child.getMeasuredHeight());
left += layoutParam.leftMargin + child.getMeasuredWidth();
}

lineWidth = cWidth;
lineHeight += cHeight;
} else {
lineWidth += cWidth;
lineHeight = Math.max(lineHeight, cHeight);

if (child.getVisibility() != View.GONE) {
child.layout(left + layoutParam.leftMargin, top + layoutParam.topMargin,
left + layoutParam.leftMargin + child.getMeasuredWidth(),
top + layoutParam.topMargin + child.getMeasuredHeight());
left += layoutParam.leftMargin + child.getMeasuredWidth();
}
}
}
}

@Override public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
}

4.运行测试

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<demos.ch.com.flowlayout.FlowView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<Button
style="@style/btn_style"
android:text="演员"
/>
<Button
style="@style/btn_style"
android:text="你还要我怎样"
/>
<Button
style="@style/btn_style"
android:text="方圆几里"
/>
<Button
style="@style/btn_style"
android:text="绅士"
/>
<Button
style="@style/btn_style"
android:text="认真的雪"
/>
<Button
style="@style/btn_style"
android:text="faded"
/>
<Button
style="@style/btn_style"
android:text="We dont talk more"
/>
<Button
style="@style/btn_style"
android:text="Jar of love"
/>
<Button
style="@style/btn_style"
android:text="可惜没如果"
/>
<Button
style="@style/btn_style"
android:text="浪费"
/>
<Button
style="@style/btn_style"
android:text="一丝不挂"
/>
<Button
style="@style/btn_style"
android:text="阴天快乐"
/>
<Button
style="@style/btn_style"
android:text="可以了"
/>
</demos.ch.com.flowlayout.FlowView>

</LinearLayout>
<---样式文件 --->
<style name="btn_style">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">5dp</item>
<item name="android:background">@color/colorBackground</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">24dp</item>
</style>

运行结果：

1.match_parent | wrap_content



2.固定值(400dp）



以上就实现了简单的流式布局实现。

源码下载:

[]https://github.com/ChenHaoLw/FlowLayout]