效果图
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);
}
}
