Flowlayout流式布局的简单实现

前言

关于Flowlayout流式布局 github上随便一搜索就一大堆 而且Google也开源了一个FlexboxLayout布局非常强大 这里只是教大家如何实现的最基本的自定义 剩余的那些花俏就看大家天马行空的扩展就好了 同时懂的大神基本可以路过了

效果

案例Demo

分析:
1. 这是一个ViewGroup
2. 当父容器宽度放不下子view的时候 自动换行
3. 除了子View的宽高还要考虑子View的Margin属性

备注：整个过程涉及的知识点 主要就是View的onMeasure和onLayout 基础偏弱的同学可能需要另外花点功夫学习下

自定义步骤

1.先自定义一个ViewGroup

public class Flowlayout extends ViewGroup{

2.获取子View的Margin属性(这个在ViewGroup中非常方便 重写generateLayoutParams便是)

/**
* 获取布局中的margin属性值
* @param attrs
* @return
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(),attrs);
    }

3.来到我们的重点之一 针对子View的测量 关于View的测量相关方面的知识 这里不做多介绍不明白的同学 可以去Google一下 同时我也把注释尽量写明白

    /**用于存放每一行的子View集合*/
    private List<List<View>> mViewLinesList=new ArrayList<>();
    /**用于存放每一行的高度*/
    private List<Integer> mLineHeights=new ArrayList<>();
    /**
     * 测量
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthmMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthsize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int measuredWith = 0;
        int measuredHeight = 0;
        int curLineW=0;
        int curLineH=0;
      if(widthmMode==MeasureSpec.EXACTLY&&heightMode==MeasureSpec.EXACTLY){
            measuredHeight=heightSize;
            measuredWith=widthsize;
        }else {
            int childWidth;
            int childHeight;
            //获取所有的子View
            int childCount = getChildCount();
            //创建一个集合用于存放每一行的子View
            List<View> viewList=new ArrayList<>();
            //遍历
            for(int i=0;i<childCount;i++){
                View childAt = getChildAt(i);
                //遍历 测量子view
                measureChild(childAt,widthMeasureSpec,heightMeasureSpec);
                //获取子View的margin属性
                MarginLayoutParams layoutParams = (MarginLayoutParams) childAt.getLayoutParams();
                //获取子view的最终宽度
                childWidth=layoutParams.rightMargin+layoutParams.leftMargin+childAt.getMeasuredWidth();
                //获取子view的最终高度
                childHeight=layoutParams.topMargin+layoutParams.bottomMargin+childAt.getMeasuredHeight();
                //子View累计宽度是否大于父容器宽度
                if(curLineW+childWidth>widthsize){
                    //记录当前最大宽度
                    measuredWith=Math.max(measuredWith,curLineW);
                    //高度累加
                    measuredHeight+=curLineH;
                    //将该View添加到List集合
                    mViewLinesList.add(viewList);
                    //行高添加至总行高
                    mLineHeights.add(curLineH);
                    //记录新一行的信息
                    curLineW=childWidth;
                    curLineH=childHeight;
                    //新建一行的ViewList 添加一行新view
                    viewList=new ArrayList<>();
                    viewList.add(childAt);
                }else {
                    //累加宽度
                    curLineW+=childWidth;
                    //高度比较 获取最大的高度
                    curLineH=Math.max(curLineH,childHeight);
                    //添加到该行集合
                    viewList.add(childAt);
                }
                //如果是最后一个view的时候（特别针对最后一行view只有一两个的 因为他们的宽度是不可能超过父容器的宽度的）
                if(i==childCount-1){
                    measuredWith=Math.max(measuredWith,curLineW);
                    measuredHeight+=curLineH;
                    //将该View添加到List集合
                    mViewLinesList.add(viewList);
                    //行高添加至总行高
                    mLineHeights.add(curLineH);
                }
            }
        }
        setMeasuredDimension(measuredWith,measuredHeight);
    }

4.重点之二 View的布局 上面一步是把View的宽高测量出来了 这个一步将确定子View在父容器中位置 重写onLayout 进行布局

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int left,top,right,bottom;
        int curTop=0;
        int curLeft=0;
        int size = mViewLinesList.size();
        //遍历每一行的view集合
        for(int i=0;i<size;i++){
            List<View> views = mViewLinesList.get(i);
            int lineViewSize=views.size();
            //遍历每一行的所有view
            for(int j=0;j<lineViewSize;j++){
                View view = views.get(j);
                //计算每个View四个点坐标
                MarginLayoutParams layoutParams= (MarginLayoutParams) view.getLayoutParams();
                left=curLeft+layoutParams.leftMargin;
                top=curTop+layoutParams.topMargin;
                right=left+view.getMeasuredWidth();
                bottom=top+view.getMeasuredHeight();
                //布局
                view.layout(left,top,right,bottom);
                //宽度累加 作为下一个View的起始点
                curLeft+=view.getMeasuredWidth()+layoutParams.leftMargin+layoutParams.rightMargin;
            }
            //换行 宽度数据重新开始
            curLeft=0;
            //高度累加一次
            curTop+=mLineHeights.get(i);
        }
        mViewLinesList.clear();
        mLineHeights.clear();
    }

5.到这里基本就完成了 使用在布局中看看效果

<com.example.widget_flowlayout.Flowlayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/flowlayout"
        android:background="#ededed">
        <TextView
            style="@style/flow_style"
            android:text="头条"/>
        <TextView
            style="@style/flow_style"
            android:text="态度公开课"/>
        <TextView
            style="@style/flow_style"
            android:text="房产"/>
        <TextView
            style="@style/flow_style"
            android:text="人工智能"/>
        <TextView
            style="@style/flow_style"
            android:text="军事"/>
        <TextView
            style="@style/flow_style"
            android:text="段子"/>
        <TextView
            style="@style/flow_style"
            android:text="营销态度"/>
        <TextView
            style="@style/flow_style"
            android:text="社会"/>
        <TextView
            style="@style/flow_style"
            android:text="航空"/>
       ...................
</com.example.widget_flowlayout.Flowlayout>     

6.扩展点击事件 其他的扩展看你们思想发挥了

    int index;//保存点击过的index
    interface OnItemClickListener{
         void onItemClick(String text);
     }
    public void setOnItemClickListener(final OnItemClickListener onItemClickListener){
        int childCount = getChildCount();
        for(int i=0;i<childCount;i++){
            final TextView childAt = (TextView) getChildAt(i);
            final int finalI = i;
            childAt.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(index!=finalI){
                        //修改点击以前的item(复原)
                        TextView view  = (TextView) getChildAt(index);
                        Drawable drawable = ContextCompat.getDrawable(getContext(),R.drawable.text_backgroundcolor);
                        changeContent(drawable, view,Color.BLACK);
                        //修该点击的item
                        drawable = ContextCompat.getDrawable(getContext(),R.drawable.selector_text);
                        changeContent(drawable, childAt,Color.WHITE);
                        //保存点击过的index
                        index= finalI;
                    }
                    onItemClickListener.onItemClick(childAt.getText().toString());
                }
            });

        }
    }

    private void changeContent(Drawable drawable, TextView childAt,int textColor) {
        childAt.setBackground(drawable);
        childAt.setTextColor(textColor);
    }

7.最后效果