Android开发之瀑布流控件的实现与使用方法示例

public class FlowLayout extends ViewGroup {
/**行里子view之间的行距离*/
public int mHorizontolSpace = Util.getDimen(R.dimen.top_padding);
/**行里子view之间的垂直距离*/
public int mVerticalSpace = Util.getDimen(R.dimen.top_padding);
/**创建行的集合*/
private List<Line  mLines = new ArrayList<Line ();
/**当前行*/
private Line mCurrentLine;
/**当前行使用的宽度*/
private int mCurrentUseWidth = 0;
/**父容器的宽高*/
private int parentWidthSize;
private int parentHeightSize;
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public FlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FlowLayout(Context context) {
super(context);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//0.先清空行集合里的数据
clear();
//1.得到父viewGroup的模式与大小
int parentWidthMode = MeasureSpec.getMode(widthMeasureSpec);//
parentWidthSize = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight();
int parentHeightMode = MeasureSpec.getMode(heightMeasureSpec);
parentHeightSize = MeasureSpec.getSize(heightMeasureSpec) - getPaddingBottom() - getPaddingTop();
/* 每个子view都是包裹内容
* layout.addView(mTextView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT
* 得到每个孩子的测量规则
*/
//2.得到每个孩子的模式
int childWidthMode = parentWidthMode == MeasureSpec.EXACTLY ? MeasureSpec.EXACTLY : parentWidthMode;
int childHeightMode = parentHeightMode == MeasureSpec.EXACTLY ? MeasureSpec.EXACTLY : parentHeightMode;
//3.根据模式得到子控件的大小
int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidthMode, parentWidthSize);
int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeightMode, parentHeightSize);
//得到子view的个数
int count = getChildCount();
//创建新的行
mCurrentLine = new Line();
for (int i = 0; i < count; i++) {
View childView = getChildAt(i);
//4.测量每个孩子
childView.measure(childWidthMeasureSpec, childHeightMeasureSpec);
//5.得到测量后的孩子的宽高
int childMeasureWidth = MeasureSpec.getSize(childWidthMeasureSpec);
//int childMeasureHeight = MeasureSpec.getSize(childHeightMeasureSpec);
//6.得到此行使用的宽度
mCurrentUseWidth += childMeasureWidth;
//7.判断此行的宽度是否大于父控件的宽度，如果大于则换行
if (mCurrentUseWidth   parentWidthSize) {
//8.如果当前的子view的宽度大于父容器的宽度，强行把这个view添加的集合里
if (mCurrentLine.getChildCount()<1) {
mLines.add(mCurrentLine); 
}
//9.换行
newLine();
}else {
//8.把当前子view添加到行里
mCurrentLine.addChild(childView);
//9.添加间隔
mCurrentUseWidth += mHorizontolSpace;
if (mCurrentUseWidth   parentWidthSize) {
//10.换行
newLine();
}
}
}
//11.如果集合里没有添加当前行，则把当前添加到集合
if (!mLines.contains(mCurrentLine)) {
mLines.add(mCurrentLine);
}
//12.设置富容器的总宽高
int parentWidth = parentWidthSize + getPaddingLeft() + getPaddingRight();
int parentHeight = (mLines.size()-1) * mVerticalSpace + getPaddingBottom() + getPaddingTop();
for(Line line : mLines){
//得到所以line的高度
parentHeight += line.getHeight();
}
//13.resolveSize表示哪个高度合适，就用哪个
setMeasuredDimension(parentWidth, resolveSize(parentHeightSize, parentHeight));
/*setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));*/
}
/**
* 换行
*/
private void newLine() {
//a.先把当前的行添加到集合
mLines.add(mCurrentLine);
//b.创建新的一行
mCurrentLine = new Line();
//c.新行里的使用的行必须设置为0
mCurrentUseWidth = 0;
}
public void clear() {
mLines.clear();
mCurrentLine = null;
mCurrentUseWidth = 0;
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//15.得到每个line孩子的左上角的坐标
int left = l + getPaddingLeft();
int top = t + getPaddingTop();
//现在容器里只有line是子孩子
for (int i = 0; i < mLines.size(); i++) {
Line line = mLines.get(i);
//16.把分配位置给line去处理
line.layout(left, top);
//17.设置第一行后的其它行的top数值
top += line.getHeight() + mVerticalSpace;
}
}
/**
* 行类，用来封装一行的view
*/
private class Line{
/**当前行的宽度*/
private int mWidth = 0;
/**当前行的高度*/
private int mHeight = 0;
/**每个孩子得到的剩余空间*/
int mChildPdding = 0;
private List<View  children = new ArrayList<View ();
public void addChild(View childView) {
children.add(childView);
//取得之view里最高的高度
if (childView.getMeasuredHeight()   mHeight) {
mHeight = childView.getMeasuredHeight();
}
//18.得到行宽度
mWidth += childView.getMeasuredWidth();
}
/**
* 定位每个line在富容器里的额位置
* @param left
* @param top
*/
public void layout(int left, int top) {
//18.得到行宽度
mWidth += mHorizontolSpace * (children.size() -1);
//19.得到剩余的宽度大小
//int padding = getMeasuredWidth() - mWidth;
int padding = parentWidthSize - mWidth;
if (padding   0) {
mChildPdding = padding / children.size();
}
// getWidth()view显示的时候大小,如果view没显示,这个值就为0,步包括隐藏的部分, getMeasuredWidth()控件实际大小,包括隐藏的部分
//一般来说 getMeasuredWidth()   getWidth();
for (int i = 0; i < children.size(); i++) {
View child = children.get(i);
//第一种：有间隔的flow
int bottom = child.getMeasuredHeight() + top;
//20.把剩余的空间分配给每个view
int right = child.getMeasuredWidth() + left + mChildPdding;
//第二种：无间隔的flow
//       int bottom = getMeasuredHeight() + top;
//       int right = getMeasuredWidth() + left;
//第一个child的位置
child.layout(left, top, right, bottom);
//第二个及后面child的right
right += child.getMeasuredWidth() + mHorizontolSpace + mChildPdding;
}
}
/**
* 得到子view的大小
* @return
*/
public int getChildCount() {
if (children != null) {
return children.size();
}
return 0;
}
public int getHeight() {
return mHeight;
}
}
}

public class TopFragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
ScrollView scrollView = new ScrollView(getActivity());
FlowLayout layout = new FlowLayout(getActivity());
layout.setBackgroundDrawable(Util.getDrawable(R.drawable.list_item_bg));
int padding = Util.getDimen(R.dimen.top_padding);
layout.setPadding(padding, padding, padding, padding);
GradientDrawable pressDrawable = DrawableUtil.createDrawable(0xffcecece);
for (int i = 0; i < mDatas.size(); i++) {
mTextView = new TextView(getActivity());
mTextView.setText(mDatas.get(i));
GradientDrawable randomDrawable = DrawableUtil.createRandomDrawable();
StateListDrawable stateListDrawable = DrawableUtil.createStateDrawable(pressDrawable, randomDrawable);
mTextView.setBackgroundDrawable(stateListDrawable);
mTextView.setTextColor(Color.WHITE);
int left = Util.px2dip(7);
int top = Util.px2dip(4);
int right = Util.px2dip(7);
int bottom = Util.px2dip(4);
mTextView.setPadding(left, top, right, bottom);
mTextView.setTag(mDatas.get(i));
mTextView.setOnClickListener(this);
layout.addView(mTextView, new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, - 2));
}
scrollView.addView(layout);
}
return scrollView;
}

public class DrawableUtil {
/**
* 创建随机背景的drawable
* @return
*/
public static GradientDrawable createRandomDrawable(){
GradientDrawable drawable = new GradientDrawable();
drawable.setCornerRadius(Util.px2dip(5));
Random random = new Random();
int red = random.nextInt(200) + 20;
int green = random.nextInt(200) + 20;
int blue = random.nextInt(200) + 20;
int color = Color.rgb(red, green, blue);
drawable.setColor(color);
return drawable;
}
/**
* 创建带有背景的drawable
* @return
*/
public static GradientDrawable createDrawable(int color){
GradientDrawable drawable = new GradientDrawable();
drawable.setCornerRadius(Util.px2dip(5));
drawable.setColor(color);
return drawable;
}
/**
* 状态选择器
* @param press
* @param normal
* @return
*/
public static StateListDrawable createStateDrawable(Drawable press, Drawable normal){
StateListDrawable drawable = new StateListDrawable();
//按下
drawable.addState(new int[]{android.R.attr.state_pressed}, press);
//正常
drawable.addState(new int[]{}, normal);
return drawable;
}
}