美文网首页高级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