自定义流式布局FlowLayout

描述:
每一行摆放多个子View时,因为每个View的宽度和高度可能不同,需要在摆放之时按实际剩余宽度布置子View的摆放,如果当前行不够空间摆放,则需要新创建一行摆放它,而父容器FlowLayout的高度需要计算出所有行Line的高度之和来确定.
效果图:

实现要点:

1. onMeasure()方法中计算出每一行的最大可用宽度

//1,计算宽高
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int maxWidth = width - getPaddingLeft() - getPaddingRight();//最大可用宽度

2, 定义个管理类Line: a,用于管理新进来的子View是否可添加进当前行canAddView(),如果可以添加,则添加进集合addView(),同时记录已使用了的宽度usedWidth,及当前最高的子View的高度mHeight(用于确定该行Line的高度); b,布局最终添加进集合的每一个子View在当前行的摆放位置onLayout();

public class Line {
        private int usedWidth;
        private int paddingWidth;
        private int mMaxWidth;
        private List<View> mViews = new ArrayList<>();
        private int mHeight;
        public Line(int paddingWidth, int maxWidth) {
            this.paddingWidth = paddingWidth;
            mMaxWidth = maxWidth;
        }
        public boolean canAddView(View child) {
            if (mViews.size() == 0) {
                return true;
            }
            return usedWidth + child.getMeasuredWidth() + paddingWidth <= mMaxWidth;
        }
        public void addView(View child) {
            int childWidth = child.getMeasuredWidth();
            if (mViews.size() > 0) {
                usedWidth += paddingWidth;    //当添加进一个子View后,就需要加上每个子View间的间距了
            }
            mViews.add(child);
            usedWidth += childWidth;
            mHeight = mHeight > child.getMeasuredHeight() ? mHeight : child.getMeasuredHeight();    //用于确定每一行的高度
        }
    .......

}

3, 创建成员变量mCurrentLine记录当前行Line的引用(相当于指针),及集合mLines用于存储每一个new出来的Line, 在onMeasure()方法中遍历每一个孩子,循环判断mCurrentLine是否为空,如果为空就创建Line,并addView(child),如果不为空,则分两种情况判断:mCurrentLine.canAddView(child)返回为true,则直接添加;返回为false,需要重新 new Line(),同时当前行的引用mCurrentLine指向新创建的Line,再addView(child),同时添加进集合mLines中 , 每次添加完成后,再测量一下孩子,给孩子的宽高赋值:

//3,测量孩子,并添加到Line中
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            //将孩子添加到Line中
            if (mCurrentLine == null) {
                mCurrentLine = new Line(getResources().getDimensionPixelSize(R.dimen.flow_line_padding), maxWidth);
                mCurrentLine.addView(child);
                mLines.add(mCurrentLine);
            } else {
                if (mCurrentLine.canAddView(child)) {
                    mCurrentLine.addView(child);
                } else {
                    mCurrentLine = new Line(getResources().getDimensionPixelSize(R.dimen.flow_line_padding), maxWidth);
                    mCurrentLine.addView(child);
                    mLines.add(mCurrentLine);
                }
            }
            //测量孩子
            measureChild(child, widthMeasureSpec, heightMeasureSpec);    //对孩子的宽高不做限制,
        }

4, 测量自己
宽度使用期望的宽度width, 高度需要遍历mLines集合,累加每一Line的mHeight:

//4,测量自己
        int measuredHeight = getPaddingTop() + getPaddingBottom();//将高度的内边距计算在内
        for (int i = 0; i < mLines.size(); i++) {
            measuredHeight += mLines.get(i).mHeight + mVerticalSpace;    //将每一行的垂直间距计算在内
        }
        setMeasuredDimension(width, measuredHeight);

5, 根据 left 和 top 布局每一行,及每一行的中的孩子的位置:

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int top = t + getPaddingTop();    //将内边距计算在内
        int left = l + getPaddingLeft();
        for (int i = 0; i < mLines.size(); i++) {
            Line line = mLines.get(i);
            line.onLayout(left, top);
            top += line.mHeight + mVerticalSpace;    //每循环一次将top增加line.mHeight 及 每行的垂直间距 的高度
        }
    }

 Line类中的onLayout,需要根据已使用的宽度usedWidth计算出最终剩余使用不了的宽度, 将这部分宽度按照mViews.size()的个数(即每一行的孩子个数)平均分配到每一个child的宽度上去,调用child.measure()方法按照指定的宽度重新测量后,再对孩子布局位置child.layout(); 

 public void onLayout(int l, int t) {
            int left = l;
            for (int i = 0; i < mViews.size(); i++) {
                View child = mViews.get(i);
                //计算出平均添加到每个child上的多余宽度
                int avg = (mMaxWidth - usedWidth) / mViews.size();
                //按照指定的值重新测量孩子
                child.measure(MeasureSpec.makeMeasureSpec(child.getMeasuredWidth() + avg,MeasureSpec.EXACTLY),
                        MeasureSpec.makeMeasureSpec(child.getMeasuredHeight(),MeasureSpec.EXACTLY));
                int right = left + child.getMeasuredWidth();
                int bottom = t + child.getMeasuredHeight();
                child.layout(left, t, right, bottom);
                left = right + paddingWidth;
            }
        }

6, 因为onMeasure()方法会被重复调用多次, 所以需要在onMeasure()方法每次被调用之前将集合清空, 不然会出现大片空白的区域:

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //因为会多次调用measure()方法,所以方法开始前先清除child
        mLines.clear();
        mCurrentLine = null;
     .......
}

效果图实现代码

FlowLayout flowLayout = (FlowLayout) findViewById(R.id.flowlayout);
            mRandom = new Random();
            for (int i = 0; i < mDatas.length; i++) {
                    TextView view = new TextView(this);
                    view.setText(mDatas[i]);
                    //创建正常情况下背景
                    GradientDrawable gradientDrawable = new GradientDrawable();
                    gradientDrawable.setCornerRadius(getResources().getDimensionPixelSize(R.dimen.flow_gradient_radius));
                    int a = 255;
                    int r = 150 + mRandom.nextInt(100);
                    int g= 150 + mRandom.nextInt(100);
                    int b= 150 + mRandom.nextInt(100);
                    gradientDrawable.setColor(Color.argb(a, r, g, b));
                    //创建被点击时的背景
                    GradientDrawable gradientDrawable2 = new GradientDrawable();
                    gradientDrawable2.setCornerRadius(getResources().getDimensionPixelSize(R.dimen.flow_gradient_radius));
                    gradientDrawable2.setColor(Color.GRAY);
                    //设置图片选择器
                    StateListDrawable stateListDrawable = new StateListDrawable();
                    stateListDrawable.addState(new int[]{android.R.attr.state_pressed},gradientDrawable2);
                    stateListDrawable.addState(new int[]{},gradientDrawable);

                    view .setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                    Toast.makeText(MainActivity.this, ((TextView) v).getText(), Toast.LENGTH_SHORT).show();
                            }
                    });
                    //将背景设置到TextView中
                    view.setBackgroundDrawable(stateListDrawable);
                    view.setTextColor(Color.WHITE);
                    view.setPadding(5, 5, 5, 5);
                    view.setGravity(Gravity.CENTER);
                    view.setTextSize(14);

                    flowLayout.addView(view);//触发重绘
            }