自定义View 实现流式布局FlowLayout

自定义View 最关注的有三个方法 measure()，layout()，draw();我们去实现的时候一般只要重写他们的模板方法，即onMeasure(),onLayout,onDraw()。

根据View的类型分为自定义View和自定义ViewGroup。自定义View 只需要关注 onDraw()方法，测量和布局是交给父布局处理的，所以自定义ViewGroup必须要实现onMeasure() 和 onLayout()两个方法

因为我要自定义一个流式布局，所以需要自定义一个ViewGroup去实现，先说一下大概流程,最主要的任务是测量也就是onMeasure方法，因为是一个ViewGroup,所以需要先测量所有的子View，根据子View的宽高决定自己的宽高。这也是一般自定义ViewGroup的流程，即先测量子View然后测量自己，当然也有先测量自己，再根据自己去测量布局子View的，比如ViewPager。

 onMeasure(){
        1.测量子View
       1.1 遍历所有的 childView
       1.2 拿到 childView 的 layoutParams 把 childView 需要的尺寸转化成 MeasureSpec
       1.3 childView.measure(widthMeasureSpec,heightMeasureSpec) 测量childView
       1.4 测量的过程中需要记录行的最大值和高度的累加值 作为 FlawLayout 的宽和高，  还有换行的判断
     
   2.测量自己
        根据测量childView得出的宽高，测量一下自己 
          setMeasureDimension()
    }
    
   onLayout(){
        最好在onMeasure（）中记录每一行的view,和每一行的height
        这样我们就可以直接遍历每一行的view 布局了view.layout(l,t,r,b)，
    }

代码实现

public class FlowLayoutView extends ViewGroup {
    public FlowLayoutView(Context context) {
        super(context);
    }

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

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

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

    List<List<View>> allLineViews = new ArrayList<>();
    List<Integer> lineHeights = new ArrayList<>();
    int mHorizontalSpacing = 30, mVerticalSpacing = 30;

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        allLineViews.clear();
        lineHeights.clear();
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int parentNeededHeight = 0;
        int parentNeededWidth = 0;
        int lineWidth = 0;
        int lineHeight = 0;
        //自己的尺寸
        int selfWidth = MeasureSpec.getSize(widthMeasureSpec);
        int selfHeight = MeasureSpec.getSize(heightMeasureSpec);
        int childCount = getChildCount();
        List<View> lineViews = new ArrayList<>();
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            if (childView.getVisibility() == GONE) {
                continue;
            }
            LayoutParams layoutParams = (LayoutParams) childView.getLayoutParams();
            //把xml中的尺寸转换成测量的单位
            int childWidthMeasureSpec = getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, layoutParams.width);
            int childHeightMeasureSpec = getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, layoutParams.height);
            //度量childView
            childView.measure(childWidthMeasureSpec, childHeightMeasureSpec);

            //获取childView度量后的尺寸
            int childMeasuredWidth = childView.getMeasuredWidth();
            int childMeasuredHeight = childView.getMeasuredHeight();
            //判断是否换行
            if (paddingLeft + lineWidth + childMeasuredWidth + paddingRight > selfWidth) {
                //测量完一行，把这一行所有的view
                // 和这一行的高度 保存下来 方便layout
                allLineViews.add(lineViews);
                lineHeights.add(lineHeight);
                //记录所需的最大宽高
                parentNeededWidth = Math.max(parentNeededWidth, lineWidth + paddingLeft + paddingRight);
                parentNeededHeight = parentNeededHeight + lineHeight + mVerticalSpacing;

                //初始化下一行信息
                lineViews = new ArrayList<>();
                lineWidth = 0;
                lineHeight = 0;
            }
            //累加一行布局的宽高
            lineWidth = lineWidth + childMeasuredWidth + mHorizontalSpacing;
            lineHeight = Math.max(lineHeight, childMeasuredHeight);
            //保存一行view
            lineViews.add(childView);

            //最后一个view，结束测量
            if (i == childCount - 1) {
                allLineViews.add(lineViews);
                lineHeights.add(lineHeight);
                parentNeededWidth = Math.max(parentNeededWidth, lineWidth + paddingLeft + paddingRight);
                parentNeededHeight = parentNeededHeight + lineHeight + paddingTop + paddingBottom;
            }

        }
        //测量完所有的子View 后需要再重新测量自己
        // 1.获取 父View给的测量模式
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        // 2. 根据测量模式和子View每一行的宽高 决定自己的尺寸
        int realWidth = (widthMode == MeasureSpec.EXACTLY) ? selfWidth : parentNeededWidth;
        int realHeight = (heightMode == MeasureSpec.EXACTLY) ? selfHeight : parentNeededHeight;
        //测量自己，这个单位是具体的尺寸，因为所有的子View都测量完了，肯定能得出测量值了，所以这里直接用就行了，
        // 不用再计算MeasureSpec
        setMeasuredDimension(realWidth, realHeight);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();
        int paddingBottom = getPaddingBottom();

        for (int i = 0; i < allLineViews.size(); i++) {
            int childTop = paddingTop;
            int childLeft = paddingLeft;
            List<View> views = allLineViews.get(i);
            for (View view : views) {
                /*
                 * view.getMeasuredWidth() 与view.getWidth()的区别
                 * 1.在onMeasure（）的setMeasuredDimension(realWidth, realHeight);函数里
                 * setMeasuredWidth()。所以，在setMeasuredDimension(realWidth, realHeight)完成后，view.getMeasuredWidth()
                 * 才能获取到值。所有在view的生命周期里 view.measure（）后就能获取measuredWidth了。
                 *
                 * 2. view.getWidth 在layout()之后才能获取到值。width = mRight -mLeft得到的，mRight、mLeft
                 * 是在view.layout（）里赋值的
                 * */
                int measuredWidth = view.getMeasuredWidth();
                int measuredHeight = view.getMeasuredHeight();
                int right = childLeft + measuredWidth;
                int bottom = childTop + measuredHeight;
                view.layout(childLeft, childTop, right, bottom);
                childLeft = right + mHorizontalSpacing;
            }
            paddingTop = childTop + lineHeights.get(i) + mVerticalSpacing;
        }


    }

    //如果要使用自定义LayoutParams,必须再ViewGroup 中重写这两个方法
    @Override
    protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
        return new LayoutParams(p);
    }

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

    public static class LayoutParams extends MarginLayoutParams {
        //在这里可以自定义layout_参数

        public LayoutParams(Context c, AttributeSet attrs) {
            super(c, attrs);
        }

        public LayoutParams(int width, int height) {
            super(width, height);
        }


        public LayoutParams(ViewGroup.LayoutParams source) {
            super(source);
        }


    }

}

使用
方法一：在xml 中使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="历史记录"
        android:textColor="@android:color/black"
        android:textSize="16dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    <com.example.wangz.myapplication.view.FlowLayoutView
        android:id="@+id/flow_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_marginTop="@dimen/dp_10"
        android:paddingLeft="20dp"
        android:paddingTop="20dp"
        android:paddingRight="20dp"
        android:paddingBottom="@dimen/dp_10">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="母婴用品床上用品" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:text="厨房 " />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="生活日用品调味料" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/dp_10"
                    android:text="abcdefgh" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="手纸 " /
    </com.example.wangz.myapplication.view.FlowLayoutView>

</LinearLayout>

方法二：代码实现

public class MainActivity extends AppCompatActivity {

    String[] stringList = {"母婴用品床上用品", "厨房", "生活日用品调味料", "abcdefgh", "手纸", "厨房", "卫生纸"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FlowLayoutView flowLayoutView = findViewById(R.id.flow_layout);
        for (int i = 0; i < stringList.length; i++) {
            flowLayoutView.addView(getTextView(stringList[i]));
        }
    }

    private TextView getTextView(String text) {
        FlowLayoutView.LayoutParams layoutParams = new FlowLayoutView.LayoutParams(FlowLayoutView.LayoutParams.WRAP_CONTENT,
                FlowLayoutView.LayoutParams.WRAP_CONTENT);
        TextView textView = new TextView(this);
        textView.setLayoutParams(layoutParams);
        textView.setTextSize(12f);
        textView.setText(text);
        return textView;
    }

}

6b45700ef6d5fb155cf5c7dc3a4e931.jpg