美文网首页高级UI
流式布局FlowLayout

流式布局FlowLayout

作者: 静染星辰 | 来源:发表于2019-03-22 11:51 被阅读39次

    实现效果如图

    public class FlowLayout extends ViewGroup {

    public FlowLayout(Context context, AttributeSet attrs, int defStyle) {

    super(context, attrs, defStyle);

        }

    public FlowLayout(Context context, AttributeSet attrs)

    {

    this(context, attrs, 0);

        }

    public FlowLayout(Context context)

    {

    this(context, null);

        }

    @Override

        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);

            int modeWidth = MeasureSpec.getMode(widthMeasureSpec);

            int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);

            int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

            // 如果是warp_content情况下,记录宽和高

            int width =0;

            int height =0;

            // 记录每一行的宽度与高度

            int lineWidth =0;

            int lineHeight =0;

            // 得到内部元素的个数

            int cCount = getChildCount();

            for (int i =0; i < cCount; i++) {

    // 通过索引拿到每一个子view

                View child = getChildAt(i);

                // 测量子View的宽和高,系统提供的measureChild

                measureChild(child, widthMeasureSpec, heightMeasureSpec);

                // 得到LayoutParams

                MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

                // 子View占据的宽度

                int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;

                // 子View占据的高度

                int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;

                // 换行 判断 当前的宽度大于 开辟新行

                if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {

    // 对比得到最大的宽度

                    width = Math.max(width, lineWidth);

                    // 重置lineWidth

                    lineWidth = childWidth;

                    // 记录行高

                    height += lineHeight;

                    lineHeight = childHeight;

                }else{

    // 叠加行宽

                    lineWidth += childWidth;

                    // 得到当前行最大的高度

                    lineHeight = Math.max(lineHeight, childHeight);

                }

    // 特殊情况,最后一个控件

                if (i == cCount -1) {

    width = Math.max(lineWidth, width);

                    height += lineHeight;

                }

    }

    setMeasuredDimension(

    modeWidth == MeasureSpec.EXACTLY ? sizeWidth : width + getPaddingLeft() + getPaddingRight(),

                    modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height + getPaddingTop() + getPaddingBottom()//

            );

        }

    /**

        * 存储所有的View

    */

        private List>mAllViews  =new ArrayList<>();

        /**

        * 每一行的高度

        */

        private ListmLineHeight =new ArrayList();

        @Override

        protected void onLayout(boolean changed, int l, int t, int r, int b) {

    mAllViews.clear();

            mLineHeight.clear();

            // 当前ViewGroup的宽度

            int width = getWidth();

            int lineWidth =0;

            int lineHeight =0;

            // 存放每一行的子view

            List lineViews =new ArrayList();

            int cCount = getChildCount();

            for (int i =0; i < cCount; i++) {

    View child = getChildAt(i);

                MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

                int childWidth = child.getMeasuredWidth();

                int childHeight = child.getMeasuredHeight();

                // 如果需要换行

                if (childWidth + lineWidth + lp.leftMargin + lp.rightMargin > width - getPaddingLeft() - getPaddingRight()) {

    // 记录LineHeight

                    mLineHeight.add(lineHeight);

                    // 记录当前行的Views

                    mAllViews.add(lineViews);

                    // 重置我们的行宽和行高

                    lineWidth =0;

                    lineHeight = childHeight + lp.topMargin + lp.bottomMargin;

                    // 重置我们的View集合

                    lineViews =new ArrayList();

                }

    lineWidth += childWidth + lp.leftMargin + lp.rightMargin;

                lineHeight = Math.max(lineHeight, childHeight + lp.topMargin

                        + lp.bottomMargin);

                lineViews.add(child);

            }// for end

            // 处理最后一行

            mLineHeight.add(lineHeight);

            mAllViews.add(lineViews);

            // 设置子View的位置

            int left = getPaddingLeft();

            int top = getPaddingTop();

            // 行数

            int lineNum =mAllViews.size();

            for (int i =0; i < lineNum; i++) {

    // 当前行的所有的View

                lineViews =mAllViews.get(i);

                lineHeight =mLineHeight.get(i);

                for (int j =0; j < lineViews.size(); j++) {

    View    child = lineViews.get(j);

                    // 判断child的状态

                    if (child.getVisibility() == View.GONE) {

    continue;

                    }

    MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

                    int lc = left + lp.leftMargin;

                    int tc = top + lp.topMargin;

                    int rc = lc + child.getMeasuredWidth();

                    int bc = tc + child.getMeasuredHeight();

                    // 为子View进行布局

                    child.layout(lc, tc, rc, bc);

                    left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;

                }

    left = getPaddingLeft();

                top += lineHeight;

            }

    }

    /**

        * 与当前ViewGroup对应的LayoutParams

    */

        @Override

        public LayoutParamsgenerateLayoutParams(AttributeSet attrs) {

            return new MarginLayoutParams(getContext(), attrs);

        }

    }

    使用:

    在xml布局中布局:

    <FlowLayout

        android:id="@+id/mFlowLayout"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"/>

    代码中添加数据:

    public void initData(FlowLayout mFlowLayout) {

        mFlowLayout.removeAllViews();

        for (int i =0; i

        View view = LayoutInflater.from(this).inflate(R.layout.search_label_tv, mFlowLayout, false);

                TextView tv_agree = view.findViewById(R.id.tv_agree);

                TextView tv_xieyi = view.findViewById(R.id.tv_xieyi);

                tv_xieyi.setText(amlists.get(i).getTitle());

        }

            mFlowLayout.addView(view);//添加到父View

        }

    }

    --------END------

    我是静染星辰,私人微信:azxy986753

    欢迎添加微信,互相学习,互相进步!

    相关文章

      网友评论

        本文标题:流式布局FlowLayout

        本文链接:https://www.haomeiwen.com/subject/ykelvqtx.html