[关闭]
@xujun94 2016-06-29T18:29:29.000000Z 字数 11013 阅读 1051

常用的自定义View例子一

在Android开发中，我们经常会遇到流布式的布局，经常会用来一些标签的显示，比如qq中个人便签，搜索框下方提示的词语，这些是指都是流布式的布局，今天我就我们日常开放中遇到的流布式布局坐一些总结

转载请注明博客地址：http://blog.csdn.net/gdutxiaoxu/article/details/51765428
**源码下载地址：https://github.com/gdutxiaoxu/CustomViewDemo.git **
效果图

1. 先给大家看一下效果

仔细观察，我们可以知道图二其实是图一效果的升级版，图一当我们控件的宽度超过这一行的时候，剩余的宽度它不会自动分布到每个控件中，而图二的效果当我们换行的时候，如控件还没有占满这一行的时候，它会自动把剩余的宽度分布到每个控件中

2.废话不多说了，大家来直接看来看一下图一的源码

1）代码如下

  1. /**
  2.  * 博客地址：http://blog.csdn.net/gdutxiaoxu
  3.  * @author xujun
  4.  * @time 2016/6/20 23:49.
  5.  */
  6. public class SimpleFlowLayout extends ViewGroup {
  7.     private int  verticalSpacing = 20;
  9.     public SimpleFlowLayout(Context context ) {
  10.         super(context);
  11.     }
  13.     /**
  14.      * 重写onMeasure方法是为了确定最终的大小
  15.      * @param widthMeasureSpec
  16.      * @param heightMeasureSpec
  17.      */
  18.     @Override
  19.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  20.         int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
  21.         int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
  22.         int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
  23.         int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
  25.         int paddingLeft = getPaddingLeft();
  26.         int paddingRight = getPaddingRight();
  27.         int paddingTop = getPaddingTop();
  28.         int paddingBottom = getPaddingBottom();
  29. //处理Padding属性，让当前的ViewGroup支持Padding
  30.         int widthUsed = paddingLeft + paddingRight;
  31.         int heightUsed = paddingTop + paddingBottom;
  33.         int childMaxHeightOfThisLine = 0;
  34.         int childCount = getChildCount();
  35.         for (int i = 0; i < childCount; i++) {
  36.             View child = getChildAt(i);
  37.             if (child.getVisibility() != GONE) {
  38. //       已用的宽度
  39.                 int childUsedWidth = 0;
  40. //      已用的高度
  41.                 int childUsedHeight = 0;
  42. //  调用ViewGroup自身的方法测量孩子的宽度和高度，我们也可以自己根据MeasureMode来测量
  43.                 measureChild(child,widthMeasureSpec,heightMeasureSpec);
  44.                 childUsedWidth += child.getMeasuredWidth();
  45.                 childUsedHeight += child.getMeasuredHeight();
  46. //处理Margin，支持孩子的Margin属性
  47.                 Rect marginRect = getMarginRect(child);
  48.                 int leftMargin=marginRect.left;
  49.                 int rightMargin=marginRect.right;
  50.                 int topMargin=marginRect.top;
  51.                 int bottomMargin=marginRect.bottom;
  53.                 childUsedWidth += leftMargin + rightMargin;
  54.                 childUsedHeight += topMargin + bottomMargin;
  55. //总宽度没有超过本行
  56.                 if (widthUsed + childUsedWidth < widthSpecSize) {
  57.                     widthUsed += childUsedWidth;
  58.                     if (childUsedHeight > childMaxHeightOfThisLine) {
  59.                         childMaxHeightOfThisLine = childUsedHeight;
  60.                     }
  61.                 } else {//总宽度已经超过本行
  62.                     heightUsed += childMaxHeightOfThisLine + verticalSpacing;
  63.                     widthUsed = paddingLeft + paddingRight + childUsedWidth;
  64.                     childMaxHeightOfThisLine = childUsedHeight;
  65.                 }
  67.             }
  69.         }
  70. //加上最后一行的最大高度
  71.         heightUsed += childMaxHeightOfThisLine;
  72.         setMeasuredDimension(widthSpecSize, heightUsed);
  73.     }
  76.     @Override
  77.     protected void onLayout(boolean changed, int l, int t, int r, int b) {
  78.         int paddingLeft = getPaddingLeft();
  79.         int paddingRight = getPaddingRight();
  80.         int paddingTop = getPaddingTop();
  81.         int paddingBottom = getPaddingBottom();
  83.         /**
  84.          * 为了 支持Padding属性
  85.          */
  86.         int childStartLayoutX = paddingLeft;
  87.         int childStartLayoutY = paddingTop;
  89.         int widthUsed = paddingLeft + paddingRight;
  91.         int childMaxHeight = 0;
  93.         int childCount = getChildCount();
  94. //摆放每一个孩子的高度
  95.         for (int i = 0; i < childCount; i++) {
  96.             View child = getChildAt(i);
  97.             if (child.getVisibility() != GONE) {
  98.                 int childNeededWidth, childNeedHeight;
  99.                 int left, top, right, bottom;
  101.                 int childMeasuredWidth = child.getMeasuredWidth();
  102.                 int childMeasuredHeight = child.getMeasuredHeight();
  104.                 Rect marginRect = getMarginRect(child);
  105.                 int leftMargin=marginRect.left;
  106.                 int rightMargin=marginRect.right;
  107.                 int topMargin=marginRect.top;
  108.                 int bottomMargin=marginRect.bottom;
  109.                 childNeededWidth = leftMargin + rightMargin + childMeasuredWidth;
  110.                 childNeedHeight = topMargin + topMargin + childMeasuredHeight;
  112. //                没有超过本行
  113.                 if (widthUsed + childNeededWidth <= r - l) {
  114.                     if (childNeedHeight > childMaxHeight) {
  115.                         childMaxHeight = childNeedHeight;
  116.                     }
  117.                     left = childStartLayoutX + leftMargin;
  118.                     top = childStartLayoutY + topMargin;
  119.                     right = left + childMeasuredWidth;
  120.                     bottom = top + childMeasuredHeight;
  121.                     widthUsed += childNeededWidth;
  122.                     childStartLayoutX += childNeededWidth;
  123.                 } else {
  124.                     childStartLayoutY += childMaxHeight + verticalSpacing;
  125.                     childStartLayoutX = paddingLeft;
  126.                     widthUsed = paddingLeft + paddingRight;
  127.                     left = childStartLayoutX + leftMargin;
  128.                     top = childStartLayoutY + topMargin;
  129.                     right = left + childMeasuredWidth;
  130.                     bottom = top + childMeasuredHeight;
  131.                     widthUsed += childNeededWidth;
  132.                     childStartLayoutX += childNeededWidth;
  133.                     childMaxHeight = childNeedHeight;
  134.                 }
  135.                 child.layout(left, top, right, bottom);
  136.             }
  137.         }
  138.     }
  140.     private Rect getMarginRect(View child) {
  141.         LayoutParams layoutParams = child.getLayoutParams();
  142.         int leftMargin = 0;
  143.         int rightMargin = 0;
  144.         int topMargin = 0;
  145.         int bottomMargin = 0;
  146.         if (layoutParams instanceof MarginLayoutParams) {
  147.             MarginLayoutParams marginLayoutParams = (MarginLayoutParams) layoutParams;
  148.             leftMargin = marginLayoutParams.leftMargin;
  149.             rightMargin = marginLayoutParams.rightMargin;
  150.             topMargin = marginLayoutParams.topMargin;
  151.             bottomMargin = marginLayoutParams.bottomMargin;
  153.         }
  154.         return new Rect(leftMargin, topMargin, rightMargin, bottomMargin);
  155.     }
  157. }

2）思路解析

  1. 首先我们重写onMeasure方法，在OnMeasure方法里面我们调用measureChild（）这个方法去获取每个孩子的宽度和高度，每次增加一个孩子我们执行 widthUsed += childUsedWidth;

  2. 添加完一个孩子以后我们判断widthUsed是够超出控件本身的最大宽度widthSpecSize，
    若没有超过执行 

       widthUsed += childUsedWidth;
   if (childUsedHeight > childMaxHeightOfThisLine) {
    childMaxHeightOfThisLine = childUsedHeight;
    }

    超过控件的宽度执行

        heightUsed += childMaxHeightOfThisLine + verticalSpacing;
    widthUsed = paddingLeft + paddingRight + childUsedWidth;
    childMaxHeightOfThisLine = childUsedHeight;

    最后调用 setMeasuredDimension(widthSpecSize, heightUsed);这个方法去设置它的大小
    3.在OnLayout方法里面，所做的工作就是去摆放每一个孩子的位置 ，判断需不需要换行，不需要更改left值，需要换行，更改top值

3）注意事项

讲解之前，我们先来了解一下一个基本知识

从这张图片里面我们可以得出这样结论

  1. Width=控件真正的宽度（realWidth）+PaddingLeft+PaddingRight
  2. margin是子控件相对于父控件的距离

注意事项

  1. 为了支持控件本身的padding属性，我们做了处理，主要代码如下
  1.          int widthUsed = paddingLeft + paddingRight;
  2.          int heightUsed = paddingTop + paddingBottom;
  3.            ----------
  4.           if (widthUsed + childUsedWidth < widthSpecSize) {
  5.                   widthUsed += childUsedWidth;
  6.                   if (childUsedHeight > childMaxHeightOfThisLine) {
  7.                         childMaxHeightOfThisLine = childUsedHeight;
  8.                     }
  9.                 }
  1. 为了支持子控件的margin属性，我们同样也做了处理
  1.                     Rect marginRect = getMarginRect(child);
  2.                     int leftMargin=marginRect.left;
  3.                     int rightMargin=marginRect.right;
  4.                     int topMargin=marginRect.top;
  5.                     int bottomMargin=marginRect.bottom;
  7.                     childUsedWidth += leftMargin + rightMargin;
  8.                     childUsedHeight += topMargin + bottomMargin;

即我们在计算孩子所占用的宽度和高度的时候加上margin属性的高度，接着在计算需要孩子总共用的宽高度的时候加上每个孩子的margin属性的宽高度，这样自然就支持了孩子的margin属性了

4.缺陷

如下图所见，在控件宽度参差不齐的情况下，控件换行会留下一些剩余的宽度，作为想写出鲁棒性的代码的我们会觉得别扭，于是我们相处了解决办法。

解决方法见下面

图二源码解析

废话不多说，先看源码

  1. /**
  2.  * 博客地址：http://blog.csdn.net/gdutxiaoxu
  3.  * @author xujun
  4.  * @time 2016/6/26 22:54.
  5.  */
  6. public class PrefectFlowLayout extends ViewGroup {
  9.     public PrefectFlowLayout(Context context) {
  10.         super(context);
  11.     }
  13.     public PrefectFlowLayout(Context context, AttributeSet attrs) {
  14.         super(context, attrs);
  15.     }
  17.     public PrefectFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  18.         super(context, attrs, defStyleAttr);
  19.     }
  20.     //父容器宽度
  21.     private int parentWidthSize;
  22.     //水平间距
  23.     private int horizontalSpacing = 16;
  24.     //垂直间距
  25.     private int verticalSpacing = 16;
  26.     //当前行
  27.     private Line currentLine;
  28.     //所有行的集合
  29.     private List<Line> mLines = new ArrayList<>();
  30.     //当前行已使用宽度
  31.     private int userWidth = 0;
  33.     /**
  34.      * 行对象
  35.      */
  36.     private class Line {
  37.         //一行里面所添加的子View集合
  38.         private List<View> children;
  39.         //当前行高度
  40.         private int height;
  41.         //当前行已使用宽度
  42.         private int lineWidth = 0;
  44.         public Line() {
  45.             children = new ArrayList<>();
  46.         }
  48.         /**
  49.          * 添加一个子控件
  50.          *
  51.          * @param child
  52.          */
  53.         private void addChild(View child) {
  54.             children.add(child);
  55.             if (child.getMeasuredHeight() > height) {
  56.                 //当前行高度以子控件最大高度为准
  57.                 height = child.getMeasuredHeight();
  58.             }
  59.             //将每个子控件宽度进行累加，记录使用的宽度
  60.             lineWidth += child.getMeasuredWidth();
  61.         }
  63.         /**
  64.          * 获取行的高度
  65.          *
  66.          * @return
  67.          */
  68.         public int getHeight() {
  69.             return height;
  70.         }
  72.         /**
  73.          * 获取子控件的数量
  74.          *
  75.          * @return
  76.          */
  77.         public int getChildCount() {
  78.             return children.size();
  79.         }
  81.         /**
  82.          * 放置每一行里面的子控件的位置
  83.          *
  84.          * @param l 距离最左边的距离
  85.          * @param t 距离最顶端的距离
  86.          */
  87.         public void onLayout(int l, int t) {
  88.             //当前行使用的宽度，等于每个子控件宽度之和+子控件之间的水平距离
  89.             lineWidth += horizontalSpacing * (children.size() - 1);
  90.             int surplusChild = 0;
  91.             int surplus = parentWidthSize - lineWidth;//剩余宽度
  92.             if (surplus > 0) {
  93.                 //如果有剩余宽度，则将剩余宽度平分给每一个子控件
  94.                 surplusChild = (int) (surplus / children.size()+0.5);
  95.             }
  96.             for (int i = 0; i < children.size(); i++) {
  97.                 View child = children.get(i);
  98.                 child.getLayoutParams().width=child.getMeasuredWidth()+surplusChild;
  99.                 if (surplusChild>0){
  100.                     //如果长度改变了后，需要重新测量，否则布局中的属性大小还会是原来的大小
  101.                     child.measure(MeasureSpec.makeMeasureSpec(
  102.                             child.getMeasuredWidth()+surplusChild,MeasureSpec.EXACTLY)
  103.                             ,MeasureSpec.makeMeasureSpec(height,MeasureSpec.EXACTLY));
  104.                 }
  105.                 child.layout(l, t, l + child.getMeasuredWidth(), t + child.getMeasuredHeight());
  106.                 l += child.getMeasuredWidth() + horizontalSpacing;
  107.             }
  108.         }
  109.     }
  110.     //  getMeasuredWidth()   控件实际的大小
  111.     // getWidth()  控件显示的大小
  113.     @Override
  114.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  115.         //将之前测量的数据进行清空，以防复用时影响下次测量
  116.         mLines.clear();
  117.         currentLine = null;
  118.         userWidth = 0;
  119.         //获取父容器的宽度和模式
  120.         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  121.         parentWidthSize = MeasureSpec.getSize(widthMeasureSpec)
  122.                 - getPaddingLeft() - getPaddingRight();
  123.         //获取父容器的高度和模式
  124.         int heigthMode = MeasureSpec.getMode(heightMeasureSpec);
  125.         int heightSize = MeasureSpec.getSize(heightMeasureSpec)
  126.                 - getPaddingTop() - getPaddingBottom();
  127.         int childWidthMode, childHeightMode;
  128.         //为了测量每个子控件，需要指定每个子控件的测量规则
  129.         //子控件设置为WRAP_CONTENT，具体测量规则详见，ViewGroup的getChildMeasureSpec()方法
  130.         if (widthMode == MeasureSpec.EXACTLY) {
  131.             childWidthMode = MeasureSpec.AT_MOST;
  132.         } else {
  133.             childWidthMode = widthMode;
  134.         }
  135.         if (heigthMode == MeasureSpec.EXACTLY) {
  136.             childHeightMode = MeasureSpec.AT_MOST;
  137.         } else {
  138.             childHeightMode = heigthMode;
  139.         }
  140.         //获取到子控件高和宽的测量规则
  141.         int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(parentWidthSize, childWidthMode);
  142.         int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, childHeightMode);
  143.         currentLine = new Line();//创建第一行
  144.         for (int i = 0; i < getChildCount(); i++) {
  145.             View child = getChildAt(i);
  146.             //测量每一个孩子
  147.             child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
  148.             //获取当前子控件的实际宽度
  149.             int childMeasuredWidth = child.getMeasuredWidth();
  150.             //让当前行使用宽度加上当前子控件宽度
  151.             userWidth += childMeasuredWidth;
  152.             if (userWidth <= parentWidthSize) {
  153.                 //如果当前行使用宽度小于父控件的宽度，则加入该行
  154.                 currentLine.addChild(child);
  155.                 //当前行使用宽度加上子控件之间的水平距离
  156.                 userWidth += horizontalSpacing;
  157.                 //如果当前行加上水平距离后超出父控件宽度,则换行
  158.                 if (userWidth > parentWidthSize) {
  159.                     newLine();
  160.                 }
  161.             } else {
  162.                 //以防出现一个子控件宽度超过父控件的情况出现
  163.                 if (currentLine.getChildCount() == 0) {
  164.                     currentLine.addChild(child);
  165.                 }
  166.                 newLine();
  167.                 //并将超出范围的当前的子控件加入新的行中
  168.                 currentLine.addChild(child);
  169.                 //并将使用宽度加上子控件的宽度;
  170.                 userWidth = child.getMeasuredWidth()+horizontalSpacing;
  171.             }
  172.         }
  173.         //加入最后一行，因为如果最后一行宽度不足父控件宽度时，就未换行
  174.         if (!mLines.contains(currentLine)) {
  175.             mLines.add(currentLine);
  176.         }
  177.         int totalHeight = 0;//总高度
  178.         for (Line line : mLines) {
  179.             //总高度等于每一行的高度+垂直间距
  180.             totalHeight += line.getHeight() + verticalSpacing;
  181.         }
  182.         //resolveSize(),将实际高度与父控件高度进行比较，选取最合适的
  183.         setMeasuredDimension(parentWidthSize + getPaddingLeft() + getPaddingRight(),
  184.                 resolveSize(totalHeight + getPaddingTop() + getPaddingBottom(), heightMeasureSpec));
  185.     }
  187.     /**
  188.      * 换行
  189.      */
  190.     private void newLine() {
  191.         mLines.add(currentLine);//记录之前行
  192.         currentLine = new Line();//重新创建新的行
  193.         userWidth = 0;//将使用宽度初始化
  194.     }
  196.     /**
  197.      * 放置每个子控件的位置
  198.      *
  199.      * @param changed
  200.      * @param l
  201.      * @param t
  202.      * @param r
  203.      * @param b
  204.      */
  205.     @Override
  206.     protected void onLayout(boolean changed, int l, int t, int r, int b) {
  207.         l += getPaddingLeft();
  208.         t += getPaddingTop();
  209.         for (int i = 0; i < mLines.size(); i++) {
  210.             Line line = mLines.get(i);
  211.             //设置每一行的位置，每一行的子控件由其自己去分配
  212.             line.onLayout(l, t);
  213.             //距离最顶端的距离，即每一行高度和垂直间距的累加
  214.             t += line.getHeight() + verticalSpacing;
  215.         }
  216.     }
  218.     /**
  219.      * 获取子控件的测量规则
  220.      *
  221.      * @param mode 父控件的测量规则
  222.      * @return 子控件设置为WRAP_CONTENT，具体测量规则详见，ViewGroup的getChildMeasureSpec()方法
  223.      */
  224.     private int getMode(int mode) {
  225.         int childMode = 0;
  226.         if (mode == MeasureSpec.EXACTLY) {
  227.             childMode = MeasureSpec.AT_MOST;
  228.         } else {
  229.             childMode = mode;
  230.         }
  231.         return childMode;
  232.     }
  233. }

2.思路解析

  1. 对比图一的实现思路，我们封装了Line这个内部类，看到这个名字，相信大家都猜到是什么意思了，其实就是一个Line实例对象代表一行，Line里面的List children用来存放孩子

    private List<View> children;//一行里面所添加的子View集合
  2. Line里面还封装了void onLayout(int l, int t)方法，即自己去拜访每个孩子的位置，
    实现剩余的宽度平均分配，主要体现在这几行代码
  1.      if (surplus > 0) {
  2.      //如果有剩余宽度，则将剩余宽度平分给每一个子控件
  3.           surplusChild = (int) (surplus / children.size()+0.5);
  4.       }
  5.               -------
  6.  //重新分配每个孩子的大小
  8.     child.measure(MeasureSpec.makeMeasureSpec(
  9.     child.getMeasuredWidth()+surplusChild,MeasureSpec.EXACTLY)
  10.                ,MeasureSpec.makeMeasureSpec(height,MeasureSpec.EXACTLY));

今天就写到这里了，有时间再来补充，最近考试比较忙，已经好久没有更新博客了。

**源码下载地址：https://github.com/gdutxiaoxu/CustomViewDemo.git **

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注