自定义流布局FloatLayout(一)

有没有遇到过这种效果,那么这种排布是怎么实现的呢

首先自定义一个类继承ViewGroup ,因为android提供的ViewGroup子类都不能实现这种效果

然后要有一个思路:就是ViewGroup的measure()方法的执行过程是怎么样的--如果有子view的话就先测量子view--然后再测量自己的宽高

1.在onMeasure()方法中获取到所有的子View ,然后对子view进行测量, 然后累加宽度,判断当宽度大于ViewGroup的款丢的时候,进行换行

2.把每行的子view都添加到一个集合line中, 最后再把所有的line都添加到集合lines中

3.在onLayout()方法中遍历所有的集合,对每一行的子view进行layout()操作,然后再换行的时候再把参数左 上 右 下重新累加赋值,继续执行layout()操作

具体的代码如下:

package zz.itcast.googleplay09.view;

import java.util.ArrayList;
import java.util.List;

import zz.itcast.googleplay09.utils.UIUtils;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
/**
 * 排行界面的流布局（特点，按行显示，如果当前行已经显示满了，才会开辟新行）
 * @author wangdh
 *
 */
public class FlowLayout extends ViewGroup {
    
    //标签的间隔：水平、垂直
    private int hSpace = UIUtils.dip2px(13);
    private int vSpace = UIUtils.dip2px(13);
    
    public FlowLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowLayout(Context context) {
        super(context);
    }
    /**
     * 分配子view位置（标签）
     * 主要由左上角点，右下角点，确定控件位置
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //1. 分配每一行的位置
        for (int i = 0; i < lines.size(); i++) {
            Line currentLine = lines.get(i);
            //分配每一个内容位置，都是只确定左上角点即可
            currentLine.layout(l+getPaddingLeft(),t+getPaddingTop());
            //非第一行，都需要添加行高，间距
            t += currentLine.getLineHeight();
            t += vSpace;
        }
    }
    /**
     * 确定FlowLayout的测量标准
     * 父亲有义务测量孩子的大小（宽度、高度）
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //1.测量孩子的大小(宽高的测量标准（宽度高度的mode、size）)
        //（1）.孩子的测量标准，与父亲的测量标准有一定的对应关系。获取父亲的测量标准
        //获取父亲 宽高的mode和size
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight();
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
        //（2）获取孩子的宽度高度的mode
        int childWidthMode = widthMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST :widthMode;
        int childHeightMode = heightMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST :heightMode;
        //（3）获取孩子的宽度高度的size（孩子的模式：At_most（size=1000）、未指定（未指定一般size=0，但是这里大小其实给多少都可以。））
//        int childWidthSize = 1000;
//        int childHeightSize = 1000; 
        int childWidthSize = widthSize;
        int childHeightSize = heightSize; 
        //（4）测量孩子
        for (int i = 0; i < getChildCount(); i++) {
            System.out.println("当前孩子："+i);
            View child = getChildAt(i);
            child.measure(MeasureSpec.makeMeasureSpec(childWidthSize, childWidthMode), 
                    MeasureSpec.makeMeasureSpec(childHeightSize, childHeightMode));
            //获取孩子的宽度
            int childMeasuredWidth = child.getMeasuredWidth();
//            2. 将孩子放入行内
            currentLineUseWidth +=childMeasuredWidth;
            //如果当前已用宽度小于父亲宽度
            if(currentLineUseWidth<widthSize){
                //将孩子放入
                currentLine.addChild(child);
                System.out.println("1放入孩子");
                //添加水平间隔
                currentLineUseWidth+=hSpace;
                if(currentLineUseWidth>=widthSize){
                    //换行
                    newLine();
                    System.out.println("1换行");
                }
            }else{
                //如果当前行内没有孩子，强制加入
                if(currentLine.getChildCount()==0){
                    currentLine.addChild(child);
                    System.out.println("2放入孩子");
                }
                //换行
                newLine();
                //（避免换行时，漏掉孩子）
                i -- ;
                System.out.println("2换行");
            }
        }
        
        //如果最后一行没有在集合内，添加
        if(!lines.contains(currentLine)){
            lines.add(currentLine);
        }
        //3.测量本身FlowLayout
        int totalHeight = 0;
        //添加行高
        for (int i = 0; i < lines.size(); i++) {
            totalHeight+=lines.get(i).getLineHeight();
        }
        //间距比行数少一个
        totalHeight+=vSpace*(lines.size()-1);
        setMeasuredDimension(widthSize+getPaddingLeft()+getPaddingRight(),
                totalHeight+getPaddingTop()+getPaddingBottom());
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
    /**
     * 换行
     */
    private void newLine() {
        //将当前行，放入集合，保存
        lines.add(currentLine);
        currentLine = new Line();
        currentLineUseWidth = 0;
    }
    //当前行
    private Line currentLine = new Line();
    
    //行集合
    private List<Line> lines= new ArrayList<FlowLayout.Line>();
    
    //当前行已用宽度
    private int currentLineUseWidth = 0;
    
    
    //行：用于存放标签Textview
    public class Line{
        
        private List<View> childs = new ArrayList<View>();
        
        //1.获取当前行剩余空间
        //先获取已经使用的空间（子view的宽度+间隔（子view个数-1））
        private int lineUseWidth = 0;
        /**
         * 添加孩子
         * @param child
         */
        public void addChild(View child) {
            childs.add(child);
            //当前行高应该是最高孩子的高度
            if(currentLineHeight<child.getMeasuredHeight()){
                //当前行高=孩子的高度
                currentLineHeight = child.getMeasuredHeight();
            }
            //（1）添加子view的宽度
            lineUseWidth +=child.getMeasuredWidth();
        }
        public void layout(int l, int t) {
            //（2）添加间隔
            lineUseWidth += (childs.size()-1)*hSpace;
//            System.out.println("lineUseWidth："+lineUseWidth);
            //（3）获取剩余空间
            int leftUseWidth = getMeasuredWidth() -getPaddingLeft() - getPaddingRight() - lineUseWidth;
            int avgLeftUseWidth = leftUseWidth/childs.size();
//            System.out.println("childs.size():"+childs.size());
//            System.out.println("avgLeftUseWidth："+avgLeftUseWidth);
            
            
            //通过行，分配每一个标签的位置
            for (int i = 0; i < childs.size(); i++) {
                View currentView = childs.get(i);
                //确定具体位置
                currentView.layout(l, t, l+currentView.getMeasuredWidth()+avgLeftUseWidth, t+currentView.getMeasuredHeight());
                //currentView.layout(l, t, getMeasuredWidth(), getMeasuredHeight());
                //非第一行的left不一样
                l += currentView.getMeasuredWidth()+avgLeftUseWidth;//子view的宽度（+剩余空间的宽度）
                l += hSpace;
            }
            
        }
        private int currentLineHeight = 0;
        /**
         * 当前行高度
         * @return
         */
        public int getLineHeight() {
            
            return currentLineHeight;
        }
        /**
         * 当前行有几个孩子
         * @return
         */
        public int getChildCount() {
            return childs.size();
        }
        
    }
    
}

那么这个空间就算是完成了,可以直接new出来,然后在代码中动态的添加TextView,效果还是很炫的

注意在每个子view的layout()方法的时候,修改一行代码,那么效果就会变得更加绚丽

  //通过行，分配每一个标签的位置
            for (int i = 0; i < childs.size(); i++) {
                View currentView = childs.get(i);
                //确定具体位置
            //currentView.layout(l, t, l+currentView.getMeasuredWidth()+avgLeftUseWidth, t+currentView.getMeasuredHeight());把这一行注释掉,打开下面一行
                currentView.layout(l, t, getMeasuredWidth(), getMeasuredHeight());
                //非第一行的left不一样
                l += currentView.getMeasuredWidth()+avgLeftUseWidth;//子view的宽度（+剩余空间的宽度）
                l += hSpace;
            }

具体的原理跟上面的类似,至于textView的背景颜色,就可以在代码中动态的设置随机的十六进制颜色值,至于具体操作放到下一次博客里面了