自定义View（二）继承ViewGroup

实现流示布局)

继承ViewGroup实现FlowLayout

实现步骤：

想要实现继承自ViewGroup的自定义View，一般需要重写onMeasure和onLayout两个部分，此外我们还可以给View添加自定义的交互事件。下面梳理一下整体思路：

1. 继承ViewGroup类，重写oMeasure方法。
2. 在Measure中拿到自身的size和mode；
3. 结合ViewGroup对子View进行测量和处理；
4. setMeasuredDimension传入最终宽高；
5. 重写onLayout方法，通过child.layout方法对子view逐一布局。
6. 完善
7. 其他

效果展示

继承ViewGroup

// An highlighted block
public class FlowLayout  extends ViewGroup{
     public FlowLayout(Context context) {
        super(context);
    }

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

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    ......
    }
}

拿到自身size和mode

经过前面一节的学习，我们知道size和mode都可以在MeasureSpec中拿到

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec,heightMeasureSpec);
        int widthMode = MeasureSpce.getMode(widthMeasureSpec);
        int widthSize = MeasureSpce.getsize(widthMeasureSpec);
        int heightMode = MeasureSpce.getMode(heightMeasureSpec);
        int heightSize = MeasureSpce.getsize(heightMeasureSpec);
    }

结合ViewGroup对子View进行测量和处理

此处需要结合实际情况，对每一个子空间进行测量和记录。

    private static final String TAG = "Cong";
    private int mHorizontalSpacing = dp2px(16); //每个item横向间距
    private int mVerticalSpacing = dp2px(8); //每个item纵向间距

    private List<View> lineViews;//每一行的子View
    private List<List<View>> views;//所有的行
    private List<Integer> heights;//每一行的高度


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec,heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int lineHeight = 0;
        int lineWidth = 0;
        
        int flowHeigtt = 0;
        int flowWidth =0;

        views = new ArrayList<>();
        lineViews = new ArrayList<>();
        heights = new ArrayList<>();
        
        for(int i=0;i<this.getChildCount();i++){
           view child = this.getChildAt(i);
           //结合子View与父View对子view进行测量获取当前子view在父view中的宽高
           int childWidthMeasureSpec = 
               getChildMeasureSpec(widthMeasureSpec,paddingLeft + paddingRight,lp.width);
           int childHeightMeasureSpec = 
               getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom,lp.height);
           childView.measure(childWidthMeasureSpec,childHeightMeasureSpec);
           //获取到当前子View的测量的宽度/高度
           int childWidth = child.getMeasuredWidth();
           int childHeight = child.getMeasuredHeight();

           if(lineWidth + childWidth  > widthSize){//换行
                views.add(lineViews);
                lineViews = new ArrayList<>();//创建新的一行
                flowlayoutWidth = Math.max(flowlayoutWidth,lineWidth+mHorizontalSpacing);
                flowlayoutHeight  += lineHeight+mVerticalSpacing;
                heights.add(lineHeight);
                lineWidth = 0;
                lineHeight = 0;
            }
            lineViews.add(child);
            lineWidth += childWidth+mHorizontalSpacing;
            lineHeight = Math.max(lineHeight,childHeight);
        }       
        //FlowLayout最终宽高
        setMeasuredDimension(widthMode == MeasureSpec.EXACTLY? widthSize:flowlayoutWidth
                ,heightMode == MeasureSpec.EXACTLY?heightSize:flowlayoutHeight);
    }

layout

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int lineCount = views.size();

        int currX = 0;
        int currY = 0;

        for(int i = 0; i < lineCount; i++) {//大循环，所有的子View 一行一行的布局
            List<View> lineViews = views.get(i);//取出一行
            int lineHeight = heights.get(i);// 取出这一行的高度值
            //遍历当前行的子View
            int size = lineViews.size();
            for (int j = 0; j < size; j++) {//布局当前行的每一个view
                View child = lineViews.get(j);
                int left = currX;
                int top = currY;
                int right = left + child.getMeasuredWidth();
                int bottom = top + child.getMeasuredHeight();
                child.layout(left, top, right, bottom);
                //确定下一个view的left
                currX += child.getMeasuredWidth()+mHorizontalSpacing;
            }
            currY += lineHeight+mVerticalSpacing;
            currX = getLeft();
        }

完善

当内部控件layout为match_parent或者定值时会出现显示问题

             <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/shape_button_circular"
                android:text="水果味孕妇奶粉" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="90dp"
                android:background="@drawable/shape_button_circular"
                android:text="儿童洗衣机" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/shape_button_circular"
                android:text="洗衣机全自动" />

解决思路是：
通过MeasureSpec的mode对三种情况分别进行处理。

其他

对于该FlowLayout还有很多改进的地方，比如交互上更加舒服的动画，滑动等。下一节将会对继承View的自定义View进行学习和总结。如果读者发现文章问题，欢迎指正。共同进步。