需要先学习下面2个内容
1.已经基本给大家介绍了如何自定义ViewGroup,如果你还不了解
2.宽高的计算
一、XML布局
从布局图中可以看到,FlowLayout中包含了很多TextView.难度不大,布局代码如下:
先定义一个style,这是为FlowLayout中的TextView定义的:
<style name="text_flag_01">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">4dp</item>
<item name="android:background">@drawable/flag_01</item>
<item name="android:textColor">#ffffff</item>
---------------------
二、提取margin与onMeasure()重写
1、提取margin
上篇我们讲过要提取margin,就一定要重写generateLayoutParams
@Override
protected LayoutParams generateLayoutParams(LayoutParams p)
{
return new MarginLayoutParams(p);
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs)
{
return new MarginLayoutParams(getContext(), attrs);
}
@Override
protected LayoutParams generateDefaultLayoutParams()
{
return new MarginLayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
}
具体为什么我们就不再讲了,上篇已经讲的非常熟悉了,下面就看看如何在onMeasure()中计算当前container所占的位置大小
---------------------
2、重写onMeasure()——计算当前FlowLayout所占的宽高
这里就要重写onMeasure()函数,在其中计算所有当前container所占的大小。
首先得到其父容器传入的测量模式和宽高的计算值,然后遍历所有的childView,使用measureChild方法对所有的childView进行测量。然后根据所有childView的测量得出的宽和高得到该ViewGroup如果设置为wrap_content时的宽和高。最后根据模式,如果是MeasureSpec.EXACTLY则直接使用父ViewGroup传入的宽和高,否则设置为自己计算的宽和高
---------------------
要做FlowLayout,首先涉及下面几个问题:
(1)何时换行(计算所有控件的宽度和屏幕宽度比较,还有margin值)
从效果图中可以看到,FlowLayout的布局是一行行的,如果当前行已经放不下下一个控件,那就把这个控件移到下一行显示。所以我们要有个变量来计算当前行已经占据的宽度,以判断剩下的空间是否还能容得下下一个控件。
int childWidth = child.getMeasuredWidth() + lp.leftMargin +lp.rightMargin;
(2)、如何得到FlowLayout的宽度(最大值)
FlowLayout的宽度是所有行宽度的最大值,所以我们要记录下每一行的所占据的宽度值,进而找到所有值中的最大值。
(3)、如何得到FlowLayout的高度(总和)
很显然,FlowLayout的高度是每一行高度的总和,而每一行的高度则是取该行中所有控件高度的最大值。
原理到这里就讲完了,下面看看代码:
(1)首先,刚进来的时候是利用MeasureSpec获取系统建议的数值的模式
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
………………
}
(2)然后,是计算FlowLayout所占用的空间大小
先申请几个变量:
int lineWidth = 0;//记录每一行的宽度
int lineHeight = 0;//记录每一行的高度
int height = 0;//记录整个FlowLayout所占高度
int width = 0;//记录整个FlowLayout所占宽度
然后开始计算:(先贴出代码,再细讲
---------------------
在整个For循环遍历每个控件时,先计算每个子控件的宽和高,代码如下:
View child = getChildAt(i);
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;
注意我们在计算控件高度和宽度时,要加上上、下、左、右的margin值。
这里一定要注意的是:在调用child.getMeasuredWidth()、child.getMeasuredHeight()之前,一定要调用measureChild(child,widthMeasureSpec,heightMeasureSpec);!!!!在上篇中我们讲过,在onMeasure()之后才能调用getMeasuredWidth()获得值;同样,只有调用onLayout()后,getWidth()才能获取值。
---------------------
注意我们在计算控件高度和宽度时,要加上上、下、左、右的margin值。
这里一定要注意的是:在调用child.getMeasuredWidth()、child.getMeasuredHeight()之前,一定要调用measureChild(child,widthMeasureSpec,heightMeasureSpec);!!!!在上篇中我们讲过,在onMeasure()之后才能调用getMeasuredWidth()获得值;同样,只有调用onLayout()后,getWidth()才能获取值。
下面就是判断当前控件是否换行及计算出最大高度和宽度了:
if (lineWidth + childWidth > measureWidth){
//需要换行
width = Math.max(lineWidth,width);
height += lineHeight;
//因为由于盛不下当前控件,而将此控件调到下一行,所以将此控件的高度和宽度初始化给lineHeight、lineWidth
lineHeight = childHeight;
lineWidth = childWidth;
}else{
// 否则累加值lineWidth,lineHeight取最大高度
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
}
由于lineWidth是用来累加当前行的总宽度的,所以当lineWidth + childWidth > measureWidth时就表示已经容不下当前这个控件了,这个控件就需要转到下一行;我们先看else部分,即不换行时怎么办?
在不换行时,计算出当前行的最大高度,同时将当前子控件的宽度累加到lineWidth上:
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
当需要换行时,首先将当前行宽lineWidth与目前的最大行宽width比较计算出最新的最大行宽width,作为当前FlowLayout所占的宽度,还要将行高lineHeight累加到height变量上,以便计算出FlowLayout所占的总高度。
width = Math.max(lineWidth,width);
height += lineHeight;
下面就是重新初始化lineWidth和lineHeight了,由于换行,那当前控件就是下一行控件的第一个控件,那么当前行的行高就是这个控件的高,当前行的行宽就是这个控件的宽度值了:
lineHeight = childHeight;
lineWidth = childWidth;
非常需要注意的是,当计算最后一行时,由于肯定是不会超过行宽的,而我们在for循环中,当不超过行宽中只做了下面处理:
//上面if语句的else部分
}else{
// 否则累加值lineWidth,lineHeight取最大高度
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
}
在这里,我们只计算了行宽和行高,但并没有将其width和height做计算,所以,当是最后一行的最后一个控件时,我们要单独运算width、height:
//最后一行是不会超出width范围的,所以要单独处理
if (i == count -1){
height += lineHeight;
width = Math.max(width,lineWidth);
}
(3)最后,通过setMeasuredDimension()设置到系统中:
setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth
: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight
: height)
---------------------
3、重写onLayout()——布局所有子控件
在onLayout()中就是一个个布局子控件了,由于控件要后移和换行,所以我们要标记当前控件的left坐标和top坐标,所以我们要先申请下面几个变量:
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
int lineWidth = 0;//累加当前行的行宽
int lineHeight = 0;//当前行的行高
int top=0,left=0;//当前坐标的top坐标和left坐标
………………
}
参考博客:
https://blog.csdn.net/lmj623565791/article/details/38352503(张鸿翔)
https://blog.csdn.net/harvic880925/article/details/470354559(启舰)