自定义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> allLineViews = new ArrayList<>();
List 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 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 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 中使用
方法二 ：代码实现
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