ViewGroup绘制流程-测量和布局
作者:互联网
ViewGroup绘制流程-测量和布局
绘制流程
分三步:
- onMeasure(): 测量当前控件的大小,在正式布局时提供建议(注意:只是建议,用不用要看onLayout函数)
- onLayout():对子控件进行布局
- onDraw():根据布局位置绘图
onMeasure()
void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
注意参数widthMeasureSpec和heightMeasureSpec,他们实际是MeasureSpec
MeasureSpec
父类对当前view的建议值,由Mode+Size组成
提取Mode和Size
Android提供了方法直接获取
利用MeasureSpec获取系统建议得到数值和模式
int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
Mode分类
- UNSPECIFIED(未指定):父元素不对子元素施加任何束缚,子元素可以得到任意想要的大小
- EXACTLY(完全):父元素决定子元素的确切大小,子元素将被限定在给定的边界里而忽略它本身的大小
- AT_MOST(至多):子元素至多达到指定的大小
Mode作用
基本规则:
- 不管父View是何模式,若子View有确切数值,则子View大小就是其本身大小,且mode是EXACTLY
- 若子View是match_parent,则模式与父View相同,且大小同父View(若父View是UNSPECIFIED,则子View大小为0)
- 若子View是wrap_content,则模式是AT_MOST,大小同父View,表示不可超过父View大小(若父View是UNSPECIFIED,则子View大小为0)
以下面XML举例(假设MyFlowLayout的父布局宽高都是match_parent):
<com.topband.viewstudy.demo_12.MyFlowLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</com.topband.viewstudy.demo_12.MyFlowLayout>
我们宽度定义的是match_parent,对应的模式时EXACTLY,高度定义的是wrap_content,对应的模式时AT_MOST,因此我们在onMeasure()的时候可以直接使用宽度的值,但是我们高度是不确定的所以需要我们自己计算,最后通过setMeasuredDimension()保存计算结果
类似下面代码:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获取父控件的宽高建议值
int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureWidthSize = MeasureSpec.getSize(widthMeasureSpec);
int measureHightMode = MeasureSpec.getMode(heightMeasureSpec);
int measureHightSize = MeasureSpec.getSize(heightMeasureSpec);
//测量逻辑
int width = 0;
int height = 0;
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
measureChild(child, widthMeasureSpec, heightMeasureSpec);
width = Math.max(childWidth, width);
height += childHeight + lp.topMargin + lp.bottomMargin;
}
//设置测量建议值
setMeasuredDimension(
(measureWidthMode == MeasureSpec.EXACTLY) ? measureWidthSize : width,
(measureHightMode == MeasureSpec.EXACTLY) ? measureHightSize : height
);
}
onLayout()
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int top = 0;
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
top += lp.topMargin;
child.layout(lp.leftMargin, top, lp.leftMargin + childWidth, top + childHeight);
top += childHeight + lp.bottomMargin;
}
}
这个没啥好讲的, 就是通过layout()函数设置子控件的位置
注意点:
getMeasuredWidth是在measure()过程结束就可以获取到数值,getWidth()是在layout()过程结束后才能获取数值,一般是相同的,如果在layout()中传入的数值和getMeasuredWidth的数值不同,那么结果就不同了,也可以看出onMeasure()只是提供建议
onDraw()
根据布局位置绘图
实现一个FlowLayout
结合上面的知识点,就可以自定义一个类似FlowLayout效果了
先看效果:
1.测量
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//1 利用MeasureSpec获取系统建议得到数值和模式
int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
//2 计算FlowLayout占用空间大小
int lineWidth = 0;//记录每一行的宽度
int lineHeight = 0;//记录每一行的高度
int width = 0;//记录整个FlowLayout宽度
int height = 0;//记录整个FlowLayout高度
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
//测量子view
measureChild(child,widthMeasureSpec,heightMeasureSpec);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
//处理换行
if (lineWidth + childWidth > measureWidth) {
width = Math.max(lineWidth, childWidth);
height += lineHeight;
lineWidth = childWidth;
lineHeight = childHeight;
} else {
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
//处理最后一行
if (i == count - 1) {
width = Math.max(lineWidth, childWidth);
height += lineHeight;
}
}
//3 设置计算结果
setMeasuredDimension(
(measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth : width,
(measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight : height
);
}
2.布局
/**
* 布局所有子控件
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
int lineWidth = 0;//行的宽
int lineHeight = 0;//行的高
int left = 0;
int top = 0;
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
if (childWidth + lineWidth > getMeasuredWidth()) {
left = 0;
top += lineHeight;
//换行后重新初始化
lineHeight = childHeight;
lineWidth = childWidth;
} else {
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
//子控件布局
int lc = left + lp.leftMargin;
int tc = top + lp.topMargin;
int rc = lc + child.getMeasuredWidth();
int bc = tc + child.getMeasuredHeight();
child.layout(lc, tc, rc, bc);
//移动到下一个子控件起点
left += childWidth;
}
}
3.注意点
获取margin需要重写
/***
* 提取margin值
* @param attrs
* @return
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
@Override
protected LayoutParams generateLayoutParams(LayoutParams p) {
return new MarginLayoutParams(p);
}
@Override
protected LayoutParams generateDefaultLayoutParams() {
return new MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
}
//使用时强转成MarginLayoutParams,就可以读取xml中的属性值了
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
完整代码
/**
* 作者: chenhao
* 创建日期: 2020-06-23
* 描述:自定义flowLaout
*/
public class MyFlowLayout extends ViewGroup {
public MyFlowLayout(Context context) {
super(context);
}
public MyFlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//1 利用MeasureSpec获取系统建议得到数值和模式
int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
//2 计算FlowLayout占用空间大小
int lineWidth = 0;//记录每一行的宽度
int lineHeight = 0;//记录每一行的高度
int width = 0;//记录整个FlowLayout宽度
int height = 0;//记录整个FlowLayout高度
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
//测量子view
measureChild(child,widthMeasureSpec,heightMeasureSpec);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
//处理换行
if (lineWidth + childWidth > measureWidth) {
width = Math.max(lineWidth, childWidth);
height += lineHeight;
lineWidth = childWidth;
lineHeight = childHeight;
} else {
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
//处理最后一行
if (i == count - 1) {
width = Math.max(lineWidth, childWidth);
height += lineHeight;
}
}
//3 设置计算结果
setMeasuredDimension(
(measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth : width,
(measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight : height
);
}
/**
* 布局所有子控件
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
int lineWidth = 0;//行的宽
int lineHeight = 0;//行的高
int left = 0;
int top = 0;
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
if (childWidth + lineWidth > getMeasuredWidth()) {
left = 0;
top += lineHeight;
//换行后重新初始化
lineHeight = childHeight;
lineWidth = childWidth;
} else {
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
//子控件布局
int lc = left + lp.leftMargin;
int tc = top + lp.topMargin;
int rc = lc + child.getMeasuredWidth();
int bc = tc + child.getMeasuredHeight();
child.layout(lc, tc, rc, bc);
//移动到下一个子控件起点
left += childWidth;
}
}
/***
* 提取margin值
* @param attrs
* @return
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
@Override
protected LayoutParams generateLayoutParams(LayoutParams p) {
return new MarginLayoutParams(p);
}
@Override
protected LayoutParams generateDefaultLayoutParams() {
return new MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
}
}
标签:ViewGroup,MeasureSpec,int,流程,childWidth,lp,child,lineHeight,绘制 来源: https://blog.csdn.net/acebleach/article/details/106931056