人的成就和差异决定于其业余时间。——爱因斯坦
经过上篇的铺垫，这篇就开始正式开始FlowLayout的开发啦，还是先给大家上上效果：
从效果图中可以看到，底部container的布局方式应该是layout_width="match_parent",layout_height="wrap_content";
好了，废话不多说了，下面开始进入正轨。
从布局图中可以看到，FlowLayout中包含了很多TextView.难度不大，布局代码如下：
先定义一个style,这是为FlowLayout中的TextView定义的:
<style name="simple_text_margin">
<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/white_corners_rect</item>
<item name="android:textColor">#43BBE7</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:paddingTop">4dp</item>
<item name="android:paddingBottom">4dp</item>
</style>
drawable 文件夹下的white_corners_rect.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="@android:color/white" />
</shape>
下面看activity_main.xml的布局代码：
<?xml version="1.0" encoding="utf-8"?>
<com.as.customview.FlowLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff00ff"
>
<TextView
style="@style/simple_text_margin"
android:text="Welcome" />
<TextView
style="@style/simple_text_margin"
android:text="IT工程师" />
<TextView
style="@style/simple_text_margin"
android:text="Android工程师" />
<TextView
style="@style/simple_text_margin"
android:text="我坚信，区分成功与不成功，一半的因素就是纯粹的毅力差别。" />
<TextView
style="@style/simple_text_margin"
android:text="很多人这样问：“我想开一家公司，我该做什么?”而我提出的第一个问题是：“你所热爱的是什么？你开的公司想要做什么？”他们大都笑道：“不知道。”我给他们的建议是，去找份工作让自己忙碌起来，直到你找到答案为止。你必须对自己的想法充满热情，强烈感受到愿意为它冒险的心情。" />
<TextView
style="@style/simple_text_margin"
android:text="努力ing" />
<TextView
style="@style/simple_text_margin"
android:text="I thick i can" />
</com.as.customview.FlowLayout>
这里注意两点，FlowLayout的android:layout_width设置为"match_parent"，android:layout_height设置为""wrap_content"；同时，我们为FlowLayout添加背景来明显看出我们计算出来的所占区域大小。
提取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所占的位置大小。
重写onMeasure()——计算当前FlowLayout所占的宽高
首先，刚进来的时候是利用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);
………………
}
然后，是计算FlowLayout所占用的空间大小先申请几个变量：
int lineWidth = 0;//记录每一行的宽度
int lineHeight = 0;//记录每一行的高度
int height = 0;//记录整个FlowLayout所占高度
int width = 0;//记录整个FlowLayout所占宽度
开始计算：(先贴出代码，再细讲)
int count = getChildCount();
for (int i=0;i<count;i++){
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;
if (lineWidth + childWidth > measureWidth){
//需要换行
width = Math.max(lineWidth,childWidth);
height += lineHeight;
//因为由于盛不下当前控件，而将此控件调到下一行，所以将此控件的高度和宽度初始化给lineHeight、lineWidth
lineHeight = childHeight;
lineWidth = childWidth;
}else{
// 否则累加值lineWidth,lineHeight取最大高度
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
}
//最后一行是不会超出width范围的，所以要单独处理
if (i == count -1){
height += lineHeight;
width = Math.max(width,lineWidth);
}
}
在整个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()才能获取值。
下面就是判断当前控件是否换行及计算出最大高度和宽度了：
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;
当是最后一行的最后一个控件时，我们要单独运算width、height：
//最后一行是不会超出width范围的，所以要单独处理
if (i == count -1){
height += lineHeight;
width = Math.max(width,lineWidth);
}
最后，通过setMeasuredDimension（）设置到系统中：
setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth
: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight
: height);
完整的代码如下：
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);
int lineWidth = 0;
int lineHeight = 0;
int height = 0;
int width = 0;
int count = getChildCount();
for (int i=0;i<count;i++){
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;
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;
}
//最后一行是不会超出width范围的，所以要单独处理
if (i == count -1){
height += lineHeight;
width = Math.max(width,lineWidth);
}
}
//当属性是MeasureSpec.EXACTLY时，那么它的高度就是确定的，
// 只有当是wrap_content时，根据内部控件的大小来确定它的大小时，大小是不确定的，属性是AT_MOST,此时，就需要我们自己计算它的应当的大小，并设置进去
setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth
: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight
: height);
}
重写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坐标
………………
}
然后就是计算每个控件的top坐标和left坐标，然后调用layout（int left,int top,int right,int bottom）来布局每个子控件，代码如下：(先列出来全部代码，然后再细讲)
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()){
//如果换行
top += lineHeight;
left = 0;
lineHeight = childHeight;
lineWidth = childWidth;
}else{
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
}
//计算childView的left,top,right,bottom
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置为下一子控件的起始点
left+=childWidth;
}
首先，与onMeasure()一样，先计算出当前孩子的宽和高：
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;
然后根据是否要换行来计算当行控件的top坐标和left坐标：
if (childWidth + lineWidth >getMeasuredWidth()){
//如果换行,当前控件将跑到下一行，从最左边开始，所以left就是0，而top则需要加上上一行的行高，才是这个控件的top点;
top += lineHeight;
left = 0;
//同样，重新初始化lineHeight和lineWidth
lineHeight = childHeight;
lineWidth = childWidth;
}else{
// 否则累加值lineWidth,lineHeight取最大高度
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
}
在计算好left，top之后，然后分别计算出控件应该布局的上、下、左、右四个点坐标：
需要非常注意的是margin不是padding，margin的距离是不绘制的控件内部的，而是控件间的间隔！
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);
最后，计算下一坐标的位置：由于在换行时才会变更top坐标，所以在一个控件绘制结束时，只需要变更left坐标即可：
//将left置为下一子控件的起始点
left+=childWidth;
到这里就结束了，onLayout的完整代码如下：
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;
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则需要加上上一行的行高，才是这个控件的top点;
top += lineHeight;
left = 0;
//同样，重新初始化lineHeight和lineWidth
lineHeight = childHeight;
lineWidth = childWidth;
}else{
lineHeight = Math.max(lineHeight,childHeight);
lineWidth += childWidth;
}
//计算childView的left,top,right,bottom
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置为下一子控件的起始点
left+=childWidth;
}
}
好啦，有关FlowLayout的系列文章到这里就结束了，这里主要涉及到ViewGroup的绘制流程的相关知识。希望大家能掌握。难度倒是不大，凡是跟代码有关的东东总是很难驾驭，可能还是语文不行啊，大家见量，多看看源码吧，理解了上一篇之后，这篇难度不大。
网友评论