实现流式布局

简单实现流式布局，效果图如下



1，value下的attr文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="FlowView">

<attr name="pLeft" format="dimension"/>
<attr name="pRight" format="dimension"/>
<attr name="pTop" format="dimension"/>
<attr name="pBottom" format="dimension"/>
<attr name="hDiver" format="dimension"/>
<attr name="lDiver" format="dimension"/>
<attr name="itemLayout" format="reference"/>
<attr name="addLayout" format="reference"/>

</declare-styleable>

</resources>

2，要用到的三个布局文件

1）普通的item的选项的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/background_item">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:textColor="#FFFFFF"
android:text="TextView" />

</RelativeLayout>

2）add项的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/background_add">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:textColor="#FFFFFF"
android:text="TextView" />

</RelativeLayout>

3）main布局文件

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.example.flowingdemo"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.example.flowingdemo.view.FlowView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:pLeft="20dip"
app:pRight="20dip"
app:pTop="20dip"
app:pBottom="20dip"
app:hDiver="20dip"
app:lDiver="20dip"
app:itemLayout="@layout/flow_item_layout"
app:addLayout="@layout/flow_add_layout"
android:id="@+id/flowview" />

</RelativeLayout>

3，自动的FlowView，继承ViewGroup，实现了OnClick接口

package com.example.flowingdemo.view;

import java.util.ArrayList;
import java.util.List;

import com.example.flowingdemo.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.RelativeLayout;
import android.widget.TextView;

/*
* 仅仅支持match_parent
*/
public class FlowView extends ViewGroup implements OnClickListener {

// item
private int itemLayout = 0;
// add
private int addLayout = 0;

// 布局的总的宽度和高度
private int totalWidth = 0, totalHeight = 0;

// 行的间距
private int hangJiJian = 20;
// 列的间距
private int lieJianJu = 20;
// 大的布局到四边的距离
private int leftJianJu = 20, rightJianJu = 20, topJianJu = 20,
bottomJianJu = 20;

// 是否已经添加Add选项
private boolean isTianJiaAdd = false;
// 数据的集合
private List<String> list = new ArrayList<String>();

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

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

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

final TypedArray typedArray = context.obtainStyledAttributes(attrs,
R.styleable.FlowView);

itemLayout = typedArray.getResourceId(R.styleable.FlowView_itemLayout,
R.layout.flow_item_layout);
addLayout = typedArray.getResourceId(R.styleable.FlowView_addLayout,
R.layout.flow_add_layout);
leftJianJu = (int) typedArray.getDimension(R.styleable.FlowView_pLeft,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
leftJianJu, getResources().getDisplayMetrics()));
rightJianJu = (int) typedArray.getDimension(
R.styleable.FlowView_pRight, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, rightJianJu,
getResources().getDisplayMetrics()));
topJianJu = (int) typedArray.getDimension(R.styleable.FlowView_pTop,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
topJianJu, getResources().getDisplayMetrics()));
bottomJianJu = (int) typedArray.getDimension(
R.styleable.FlowView_pBottom, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, bottomJianJu,
getResources().getDisplayMetrics()));
hangJiJian = (int) typedArray.getDimension(R.styleable.FlowView_hDiver,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
hangJiJian, getResources().getDisplayMetrics()));
lieJianJu = (int) typedArray.getDimension(R.styleable.FlowView_lDiver,
(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
lieJianJu, getResources().getDisplayMetrics()));

typedArray.recycle();
}

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

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// int widthMode = MeasureSpec.getMode(widthMeasureSpec);
// int heightMode = MeasureSpec.getMode(heightMeasureSpec);

totalWidth = widthSize;
totalHeight = heightSize;

measureChildren(widthMeasureSpec, heightMeasureSpec);

setMeasuredDimension(widthSize, heightSize);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();

// x点的坐标
int xp = leftJianJu, yp = topJianJu;

for (int i = 0; i < count; i++) {
View childView = getChildAt(i);
int cw = childView.getMeasuredWidth();
int ch = childView.getMeasuredHeight();

int xl = 0, xt = 0, xr = 0, xb = 0;
if (xp + cw + hangJiJian + rightJianJu >= totalWidth) {
// 跳转到下一行
yp += ch + lieJianJu;
xp = leftJianJu;
}

if (count - 1 == i && isTianJiaAdd) {
// 正常情况下,在有add的时候添加add选项
xl = totalWidth - rightJianJu - cw;
xt = yp;
xr = xl + cw;
xb = xt + ch;
} else {
// 正常情况下
xl = xp;
xt = yp;
xr = xl + cw;
xb = xt + ch;
}

xp += cw + hangJiJian;
childView.layout(xl, xt, xr, xb);
}
}

// 添加默认的布局
public void addView(String message, int type) {
int layout = 0;
if (type == 1) {
// 正常的item
layout = itemLayout;
} else if (type == 2) {
// add功能按键只能够添加一次
if (isTianJiaAdd) {
return;
}
// 最后一项
isTianJiaAdd = true;
layout = addLayout;
}
RelativeLayout relativeLayout = (RelativeLayout) View.inflate(
getContext(), layout, null);
TextView textView = (TextView) relativeLayout
.findViewById(R.id.textView1);
textView.setLines(1);
textView.setEllipsize(TextUtils.TruncateAt.END);
textView.setMaxLines(1);
textView.setText(message);
relativeLayout.setOnClickListener(this);

if (type == 1) {
relativeLayout.setTag(list.size());
relativeLayout.setId(123);
} else {
relativeLayout.setTag(123);
relativeLayout.setId(123);
}

if (isTianJiaAdd && type == 1) {
addView(relativeLayout, list.size() - 1);
list.add(list.size() - 1, message);
} else {
addView(relativeLayout);
list.add(message);
}

requestLayout();
}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case 123:
int position = (Integer) v.getTag();
if (position == 123) {
if (onClickFlowView != null) {
onClickFlowView.onClickAdd();
}
} else {
if (onClickFlowView != null) {
onClickFlowView.onClickItem(position, list.get(position));
}
}
break;

default:
break;
}
}

public interface OnClickFlowView {

public void onClickAdd();

public void onClickItem(int position, String message);
}

private OnClickFlowView onClickFlowView;

// ----------
public void setOnClickFlowView(OnClickFlowView onClickFlowView) {
this.onClickFlowView = onClickFlowView;
}

public void setPLeft(int PLeft) {
this.leftJianJu = PLeft;
this.requestLayout();
}

public void setPRight(int PRight) {
this.leftJianJu = PRight;
this.requestLayout();
}

public void setPTop(int PTop) {
this.leftJianJu = PTop;
this.requestLayout();
}

public void setPBottom(int PBottom) {
this.leftJianJu = PBottom;
this.requestLayout();
}

public void setHDiver(int hDiver) {
this.leftJianJu = hDiver;
this.requestLayout();
}

public void setLDiver(int lDiver) {
this.leftJianJu = lDiver;
this.requestLayout();
}
}

4，MainActivity的实现

package com.example.flowingdemo;

import com.example.flowingdemo.view.FlowView;
import com.example.flowingdemo.view.FlowView.OnClickFlowView;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickFlowView {

private FlowView flowview;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.activity_main);

flowview = (FlowView) findViewById(R.id.flowview);
flowview.setOnClickFlowView(this);
for (int i = 0; i < 10; i++) {
String s = "";
for (int j = 0; j < i; j++) {
s += String.valueOf(j);
}
flowview.addView("i->" + s + i, 1);
}
//添加add选项
flowview.addView("add", 2);
}

@Override
public void onClickAdd() {
flowview.addView("moren", 1);
}

@Override
public void onClickItem(int position, String message) {
Toast.makeText(this, "position=" + position + "-------->" + message,
Toast.LENGTH_SHORT).show();
}

}

源代码的下载地址