继承ViewGroup，实现简单的TagLayout

效果图

image.png

目前没有拖拽效果，下一篇会实现拖拽等功能。

view的绘制流程：

1.从整体来看

• 从根view开始调用measure，递归调用每一个view的measure，得到每一个view的测量大小
• 从根view开始调用layout，递归调用每一个view的layout，把每一个view的位置和大小作为参数传递给view。
  2.以一个view来看
• 首先我们开发者在xml中设置每一个view的layout。
• 父view拿到开发者设置的layout，结合自己的可用空间，计算出子view的实际可用空间的范围。
• 子view根据自己的特性，计算出自己期望的大小。
• 父view根据子view的期望大小，计算出子view的实际位置和大小。
• 子view调用layout，保存自己的位置和大小。如果子view是viewgroup还会调用onlayout去设置子子view的位置和大小。

大致思路：

• 1.首先每一个子view的测量大小。
• 2.根据父view的剩余宽度，判断是否需要换行。
• 3.设置子view的具体位置和大小。

代码

**
 * 使用ViewGroup来做一个Taglayout。
 */
public class TagLayout extends ViewGroup {

    //每行固定的行间距
    private static final float  FONT_SPACE = ViewUtils.dp2px(8);
    //每个标题固定的左右间距
    private static final float  LETTER_SPACE = ViewUtils.dp2px(5);
    //子view的大小和位置集合。
    ArrayList<Rect> childPositionList = new ArrayList<>();
    //已经使用的高度
    private int heightUsed = (int)FONT_SPACE;
    //固定的宽度
    private int width = 0;
    //当前行中，最高的宽度。
    private int maxHeight = 0;
    //当前行中，已经使用的宽度
    private int widthUsed = (int)LETTER_SPACE;
    public TagLayout(Context context) {
        super(context);
    }
    public TagLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public TagLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    //测量每一个子view的大小，测量自己的大小
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //调用每一个omMeasure，让他们测量自己的宽高，然后我们就能拿到他们的测量值。
        int childCount = getChildCount();
        for (int i =0;i<childCount;i++){
            View childView = getChildAt(i);
            measureChildWithMargins(childView,widthMeasureSpec,0,heightMeasureSpec,heightUsed);
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();

            //判断是否需要换行。在已经使用的宽度加当前子view的宽度，大于自己本身的宽度时换行。
            if((widthUsed + childWidth)>width){
                //这时就要换行了。换行的话，使用已宽度 = 0，已使用高度+上一行中最高的高度，当前行最高的高度 = 0；
                widthUsed = (int)LETTER_SPACE;
                heightUsed += maxHeight + FONT_SPACE;
                maxHeight = 0;
            }
            //设置Rect
            Rect rect = new Rect();

            rect.left = widthUsed;
            rect.top = heightUsed;
            rect.right = widthUsed + childWidth ;
            rect.bottom = heightUsed + childHeight;
            childPositionList.add(rect);
            widthUsed += childWidth + LETTER_SPACE;
            maxHeight = Math.max(maxHeight,childHeight);
        }
        //最后设置自己的测量宽高
        setMeasuredDimension(width,heightUsed+maxHeight);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        for (int i =0;i<childCount;i++){
            View childView = getChildAt(i);
            Rect rectF = childPositionList.get(i);
            childView.layout(rectF.left,rectF.top,rectF.right,rectF.bottom);
        }
    }

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.xdw.myapplication.myview.TagLayout
        android:id="@+id/vpv"
        android:hint="MaterialEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="欧美影视" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="婚姻育儿" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="散文" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="程序员" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="大学生生活" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="运营互助帮" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设计" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="读书" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="关注" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="IT讯息" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="故事" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旅行-在路上" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="手绘" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="山东省" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="自然科普" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="湖北省" />

        <com.xdw.myapplication.myview.ColoredTextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="湖南省" />
        
    </com.xdw.myapplication.myview.TagLayout>

</LinearLayout>

public class ColoredTextView extends android.support.v7.widget.AppCompatTextView {
    private static final int[] COLORS = {
            Color.parseColor("#E91E63"),
            Color.parseColor("#673AB7"),
            Color.parseColor("#3F51B5"),
            Color.parseColor("#2196F3"),
            Color.parseColor("#009688"),
            Color.parseColor("#FF9800"),
            Color.parseColor("#FF5722"),
            Color.parseColor("#795548")
    };
    private static final int[] TEXT_SIZES = {
            16, 16, 16
    };
    private static final Random random = new Random();
    private static final int CORNER_RADIUS = (int) ViewUtils.dp2px(4);
    private static final int X_PADDING = (int) ViewUtils.dp2px(16);
    private static final int Y_PADDING = (int) ViewUtils.dp2px(8);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public ColoredTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    {
        setTextColor(Color.WHITE);
        setTextSize(TEXT_SIZES[random.nextInt(3)]);
        paint.setColor(COLORS[random.nextInt(COLORS.length)]);
        setPadding(X_PADDING, Y_PADDING, X_PADDING, Y_PADDING);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawRoundRect(0, 0, getWidth(), getHeight(), CORNER_RADIUS, CORNER_RADIUS, paint);
        super.onDraw(canvas);
    }
}