美文网首页
最直白的流式布局FlowLayout

最直白的流式布局FlowLayout

作者: 半理想主义 | 来源:发表于2018-12-21 17:15 被阅读2次

学习了几个前辈的流式布局写法,总觉得思路不够直白,自己稍微小改了下
没有多余的话,解释都在注释里了

public class FlowLayout extends ViewGroup
{

    public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected LayoutParams generateLayoutParams(LayoutParams p) {
        return new MarginLayoutParams(p);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new MarginLayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT);
    }
        
    //该方法的目的就是计算出所有子view需要占据宽度和高度,包含子view的margin和父布局的padding,然后根据mode来确定是否采用
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
        int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
                //以上都是获取父控件计算好的模式和尺寸

        int lineWidth = 0;//记录每一行的宽度
        int lineHeight = 0;//记录每一行的高度
        int height = 0;//记录整个FlowLayout所占高度
        int width = 0;//记录整个FlowLayout所占宽度
        int count = getChildCount();//获取子view数量
        for (int i=0;i<count;i++){
            View child = getChildAt(i);
            measureChild(child,widthMeasureSpec,heightMeasureSpec);

            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int childWidth = child.getMeasuredWidth() + lp.leftMargin +lp.rightMargin;
            int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;

            if(lineWidth + childWidth < measureWidth - getPaddingLeft() - getPaddingRight()){//当前行宽度加上子view小于计算宽度时,不需要换行的情况下
                lineWidth += childWidth;//累计计算行宽
                lineHeight = Math.max(lineHeight, childHeight);//直接比较获取这一行的最大行高值

            }else{//换行的情况
                height += lineHeight;//如果换行,必须立刻加上之前的lineHeight

                lineWidth = childWidth;//换行重新计算下一行宽度lineWidth
                lineHeight = childHeight;
            }

            if(i == count - 1){//少算了最后一行高度,因此最后一行时加上
                height += lineHeight;
            }
            width = Math.max(width, lineWidth);
        }

        setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth
                : width + getPaddingLeft() + getPaddingRight(), (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight
                : height + getPaddingTop() + getPaddingBottom());
                //EXACTLY对应的是MATCH_PARENT和具体的数值,就不需要计算子view累计的值了,所以对应的就是measureWidth,反之使用我们计算得到的宽高度
    }

    //该方法的目的是给所有的子view布局,确定位置
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int count = getChildCount();
        int lineWidth = 0;//累加当前行的行宽
        int lineHeight = 0;//当前行的行高
        int top = 0, left = 0;//当前坐标的top坐标和left坐标

        for (int i = 0; i < count; i++){
            View child = getChildAt(i);
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;
            int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;

            //lineWidth是为了判断是否要换行,lineHeight是为了确定换行的位置
            if(childWidth + lineWidth < getMeasuredWidth() - getPaddingLeft() - getPaddingRight()){
                lineHeight = Math.max(lineHeight, childHeight);
                lineWidth += childWidth;
            }else{
                //如果换行
                top += lineHeight;
                left = 0;
                lineHeight = childHeight;
                lineWidth = childWidth;
            }

            //计算childView的left,top,right,bottom
            int lc = left + lp.leftMargin;
            int tc = top + lp.topMargin;
            int rc =lc + child.getMeasuredWidth();
            int bc = tc + child.getMeasuredHeight();
            child.layout(lc, tc, rc, bc);
            //将left置为下一子控件的起始点
            left+=childWidth;
        }
    }
}

有哪里不明确的,欢迎指正

相关文章

网友评论

      本文标题:最直白的流式布局FlowLayout

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