自定义view/viewgroup/流布局（极简版）

1自定义view
1）构造器

private String text;
private int mTitleTextSize;
private Rect mBound;
private Paint mPaint;
public MyCuntomView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
     super(context, attrs, defStyleAttr, defStyleRes);
     TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyCuntomView, defStyleAttr, defStyleRes);//自定义属性
     int n = a.getIndexCount();
     for (int i = 0; i < n; i++) {
         int attr = a.getIndex(i);
         switch (attr) {
             case R.styleable.CustomTitleView_titleText :
                 text = a.getString(attr);//获得属性app:titleText=""
                 break;
             case R.styleable.CustomTitleView_titleTextSize:
                 // 默认设置为16sp，TypeValue也可以把sp转化为px
                 //getDimensionPixelSize方法返回的是像素数值
                 //applyDimension转变为标准尺寸的一个函数
                 //getDisplayMetrics//1.0或者1.5
                 mTitleTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
                 Log.e("CustomTitleView: ", mTitleTextSize+"");
                 break;
         }
     }
     a.recycle();//回收TypedArray
     //单击事件
     this.setOnClickListener(new OnClickListener() {
         @Override
         public void onClick(View v) {
             mTitleText = "OnClick";
             postInvalidate();//线程中刷新页面
         }
     });
}

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

public MyCuntomView(Context context, AttributeSet attrs) {
    this(context, attrs, 0, 0);
}

public MyCuntomView(Context context) {
    this(context, null, 0, 0);
}

2）画图

@Override
protected void onDraw(Canvas canvas) {
    mPaint.setColor(Color.YELLOW);
    canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);//画背景

    mPaint.setColor(Color.BLACK);
    canvas.drawText(text, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);//写字
}

3）测量

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);//android:layout_width
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);//android:layout_height
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int width;
    int height;
    if (widthMode == MeasureSpec.EXACTLY) {
        //明确的值或者MATCH_PARENT
        width = widthSize;
    } else {
        //WARP_CONTENT
        mPaint.setTextSize(mTitleTextSize);
        mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
        width = mBound.width();
    }

    if (heightMode == MeasureSpec.EXACTLY) {
        //明确的值或者MATCH_PARENT
        height = heightSize;
    } else {
        //WARP_CONTENT
        mPaint.setTextSize(mTitleTextSize);
        mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);
        height = mBound.height();
    }
    setMeasuredDimension(width, height);//设置测量结果
}

2自定义viewgroup
1)generateLayoutParams

//ViewGroup能够支持margin即可，那么我们直接使用系统的MarginLayoutParams
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

2)构造器

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

public MyViewGroup(Context context, AttributeSet attrs, int defStyle)
{
    super(context, attrs, defStyle);
}

public MyViewGroup(Context context)
{
    super(context);
}

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

3）onLayout子控件定位

//onLayout对其所有childView进行定位（设置childView的绘制区域）
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int cCount = getChildCount();
    int cWidth = 0;
    int cHeight = 0;
    MarginLayoutParams cParams = null;
    /**
     * 遍历所有childView根据其宽和高，以及margin进行布局
     */
    for (int i = 0; i < cCount; i++)
    {
        View childView = getChildAt(i);//获得子控件
        cWidth = childView.getMeasuredWidth();
        cHeight = childView.getMeasuredHeight();
        cParams = (MarginLayoutParams) childView.getLayoutParams();
        int cl = 0, ct = 0, cr = 0, cb = 0;
        switch (i)
        {
            case 0://左上
                cl = cParams.leftMargin;
                ct = cParams.topMargin;
                break;
            case 1://右上
                cl = getWidth() - cWidth - cParams.leftMargin - cParams.rightMargin;
                ct = cParams.topMargin;
                break;
        }
        cr = cl + cWidth;
        cb = cHeight + ct;
        childView.layout(cl, ct, cr, cb);//确定位置
    }
}

4）onMeasure测量groupview宽高

//在onMeasure中计算childView的测量值以及模式，以及设置自己的宽和高：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //获得此ViewGroup上级容器为其推荐的宽和高，以及计算模式
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
    int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
    // 计算出所有的childView的宽和高
    measureChildren(widthMeasureSpec, heightMeasureSpec);
    //记录如果是wrap_content是设置的宽和高
    int width = 0;
    int height = 0;
    int cCount = getChildCount();
    int cWidth = 0;
    int cHeight = 0;
    MarginLayoutParams cParams = null;
    //根据childView计算的出的宽和高，以及设置的margin计算容器的宽和高，主要用于容器是
    for (int i = 0; i < cCount; i++)
    {
        View childView = getChildAt(i);
        cWidth = childView.getMeasuredWidth();
        cHeight = childView.getMeasuredHeight();
        cParams = (MarginLayoutParams) childView.getLayoutParams();
        if (i == 0 || i == 1)
        {
            width += cWidth + cParams.leftMargin + cParams.rightMargin;
            height = Math.max(height, cHeight);
        }
    }
    /**
     * 如果是wrap_content设置为我们计算的值
     * 否则：直接设置为父容器计算的值
     */
    setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth : width, 
    (heightMode == MeasureSpec.EXACTLY) ? sizeHeight : height);
}

3流布局

/**
 * Created by user on 16-6-12.流布局viewgroup
 */
public class FloatTag extends ViewGroup {
    public FloatTag(Context context) {
        super(context);
    }
    public FloatTag(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public FloatTag(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    public FloatTag(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    //因为我们只需要支持margin
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 获得它的父容器为它设置的测量模式和大小
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

        // 如果是warp_content情况下，记录宽和高
        int width = 0;
        int height = 0;
        /**
         * 记录每一行的宽度，width不断取最大宽度
         */
        int lineWidth = 0;
        /**
         * 每一行的高度，累加至height
         */
        int lineHeight = 0;

        int cCount = getChildCount();

        for (int i = 0; i < cCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == View.GONE)
            {
                continue;
            }
            //测量每一个child的宽和高
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            //得到child的布局参数
            MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
            //子控件宽高
            int childWidth = child.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
            int childHeigt = child.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;

            //换行
            if (lineWidth + childWidth > sizeWidth) {
                width = Math.max(lineWidth, childWidth);
                lineWidth = childWidth;
                height += lineHeight;
                lineHeight = childHeigt;
            } else {
                lineWidth += childWidth;
                lineHeight = Math.max(lineHeight, childHeigt);
            }
            if (i == cCount - 1) {
                width = Math.max(lineWidth, sizeWidth);
                height += lineHeight;
            }
        }

        setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width,
                (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height);
    }

    //onLayout中完成对所有childView的位置以及大小的指定
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int cCount = getChildCount();
        int left = 0;
        int top = 0;
        int lineheight = 0;
        for (int i = 0; i < cCount; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == View.GONE)
            {
                continue;
            }
            MarginLayoutParams lp = (MarginLayoutParams) child
                    .getLayoutParams();
            if (left + lp.leftMargin + child.getWidth() > getWidth()) {
                left = lp.leftMargin;
                lineheight = Math.max(child.getHeight(), lineheight);
                top += lineheight;
            } else {
                left += lp.leftMargin;
                lineheight = Math.max(lineheight, child.getHeight());
            }
            //计算childView的left,top,right,bottom
            int tc = top + lp.topMargin;
            int rc = left + child.getMeasuredWidth();
            int bc = tc + child.getMeasuredHeight();
            child.layout(left, tc, rc, bc);
            left += child.getWidth();
        }
    }
}