Android 实现流式布局的几种方式和FlexboxLayout的使用_qq_36699930的博客-程序员资料

青旅半醒 2023-10-03 18:16 16阅读 0赞

### 自定义流式布局FlowLayout(可指定显示行数) ###

**FlowLayout**

/**
     * Cerated by xiaoyehai
     * Create date : 2021/1/11 15:02
     * description :自定义流式布局(可指定显示行数)
     */
    public class FlowLayout extends LinearLayout {
        
    
        /**
         * 默认间距
         */
        public static final int DEFAULT_SPACING = AppUtils.dp2px(10);
    
        /**
         * 横向间隔
         */
        private int mHorizontalSpacing = DEFAULT_SPACING;
    
        /**
         * 纵向间隔
         */
        private int mVerticalSpacing = DEFAULT_SPACING;
    
        /**
         * 是否需要布局，只用于第一次
         */
        boolean mNeedLayout = true;
    
        /**
         * 每一行是否平分空间:将剩余空间平均分配给每个子控件
         */
        private boolean isAverageInRow = false;
    
        /**
         * 当前行已用的宽度，由子View宽度加上横向间隔
         */
        private int mUsedWidth = 0;
    
        /**
         * 行的集合
         */
        private final List<Line> mLines = new ArrayList<>();
    
        /**
         * 行对象
         */
        private Line mLine = null;
    
        /**
         * 最大的行数
         */
        private int mMaxLinesCount = Integer.MAX_VALUE;
    
        public FlowLayout(Context context) {
        
            this(context, null);
        }
    
        public FlowLayout(Context context, AttributeSet attrs) {
        
            this(context, attrs, 0);
        }
    
        public FlowLayout(Context context, AttributeSet attrs, int defStyle) {
        
            super(context, attrs, defStyle);
        }
    
        /**
         * 设置横向间隔
         *
         * @param spacing
         */
        public void setHorizontalSpacing(int spacing) {
        
            if (mHorizontalSpacing != spacing) {
        
                mHorizontalSpacing = spacing;
                requestLayoutInner();
            }
        }
    
        /**
         * 设置纵向间隔
         *
         * @param spacing
         */
        public void setVerticalSpacing(int spacing) {
        
            if (mVerticalSpacing != spacing) {
        
                mVerticalSpacing = spacing;
                requestLayoutInner();
            }
        }
    
        /**
         * 设置最大行数
         *
         * @param count
         */
        public void setMaxLines(int count) {
        
            if (mMaxLinesCount != count) {
        
                mMaxLinesCount = count;
                requestLayoutInner();
            }
        }
    
        /**
         * 每一行是否平分空间
         *
         * @param isAverageInRow
         */
        public void setIsAverageInRow(boolean isAverageInRow) {
        
            if (isAverageInRow != isAverageInRow) {
        
                this.isAverageInRow = isAverageInRow;
                requestLayoutInner();
            }
        }
    
        private void requestLayoutInner() {
        
            AppUtils.runOnUIThread(new Runnable() {
        
                @Override
                public void run() {
        
                    requestLayout();
                }
            });
    
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        
            //获取自定义控件宽度
            int sizeWidth = MeasureSpec.getSize(widthMeasureSpec) - getPaddingRight() - getPaddingLeft();
    
            //获取自定义控件高度
            int sizeHeight = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
    
            //获取自定义控件的宽高测量模式
            int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
            int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
    
            restoreLine();// 还原数据，以便重新记录
    
            //获取子控件数量
            final int count = getChildCount();
    
            //测量每个子控件的大小，决定什么时候需要换行
            for (int i = 0; i < count; i++) {
        
                final View child = getChildAt(i);
                if (child.getVisibility() == GONE) {
        
                    continue;
                }
    
                //如果父控件是确定模式，子控件就包裹内容，否则子控件模式和父控件一样
                int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(sizeWidth,
                        modeWidth == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeWidth);
                int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(sizeHeight,
                        modeHeight == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeHeight);
    
                //测量子控件
                child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
    
                //如果当前行对象为空，初始化一个行对象
                if (mLine == null) {
        
                    mLine = new Line();
                }
    
                //获取子控件宽度
                int childWidth = child.getMeasuredWidth();
    
                mUsedWidth += childWidth;//  //当前已使用宽度增加一个子控件
    
                //是否超出边界
                if (mUsedWidth <= sizeWidth) {
         //没有超出边界
                    mLine.addView(child);// //给当前行添加一个子控件
                    mUsedWidth += mHorizontalSpacing;// 加上间隔
                    if (mUsedWidth >= sizeWidth) {
           //增加水平间距后，超出边界，需要换行
                        if (!newLine()) {
        
                            //创建行失败，表示已经100行，不能在创建了，结束循环，不再添加
                            break;
                        }
                    }
                } else {
        ///超出边界
                    if (mLine.getViewCount() == 0) {
         //1.当前没有控件，一添加控件就超出边界(子控件很长)
                        mLine.addView(child);//强制添加到当前行
                        if (!newLine()) {
        // 换行
                            break;
                        }
    
                    } else {
        
                        //2.当前有控件，一添加控件就超出边界
                        //先还行，再添加
                        if (!newLine()) {
        // 换行
                            break;
                        }
                        // 在新的一行，不管是否超过长度，先加上去，因为这一行一个child都没有，所以必须满足每行至少有一个child
                        mLine.addView(child);
                        mUsedWidth += childWidth + mHorizontalSpacing;
                    }
                }
            }
    
            //保存最后一行到集合
            if (mLine != null && mLine.getViewCount() > 0 && !mLines.contains(mLine)) {
        
                // 由于前面采用判断长度是否超过最大宽度来决定是否换行，则最后一行可能因为还没达到最大宽度，所以需要验证后加入集合中
                mLines.add(mLine);
            }
    
            //控件整体宽度
            int totalWidth = MeasureSpec.getSize(widthMeasureSpec);
    
            // 控件整体高度
            int totalHeight = 0;
    
            final int linesCount = mLines.size();
            for (int i = 0; i < linesCount; i++) {
        // 加上所有行的高度
                totalHeight += mLines.get(i).mHeight;
            }
    
            totalHeight += mVerticalSpacing * (linesCount - 1);// 加上所有间隔的高度
            totalHeight += getPaddingTop() + getPaddingBottom();// 加上padding
    
            //根据最新宽高测量整体布局的大小
            // 设置布局的宽高，宽度直接采用父view传递过来的最大宽度，而不用考虑子view是否填满宽度，因为该布局的特性就是填满一行后，再换行
            // 高度根据设置的模式来决定采用所有子View的高度之和还是采用父view传递过来的高度
            setMeasuredDimension(totalWidth, resolveSize(totalHeight, heightMeasureSpec));
        }
    
        @Override
        protected void onLayout(boolean changed, int l, int t, int r, int b) {
        
            if (!mNeedLayout || changed) {
        // 没有发生改变就不重新布局
                mNeedLayout = false;
                int left = getPaddingLeft();// 获取最初的左上点
                int top = getPaddingTop();
    
                //遍历所以行对象，设置每行位置
                final int linesCount = mLines.size();
                for (int i = 0; i < linesCount; i++) {
        
                    final Line oneLine = mLines.get(i);
                    oneLine.layoutView(left, top);// 布局每一行
                    top += oneLine.mHeight + mVerticalSpacing;// 更新top值，为下一行的top赋值
                }
            }
        }
    
        /**
         * 还原所有数据
         */
        private void restoreLine() {
        
            mLines.clear();
            mLine = new Line();
            mUsedWidth = 0;
        }
    
        /**
         * 换行方法
         */
        private boolean newLine() {
        
            mLines.add(mLine); //把上一行添加到集合
            if (mLines.size() < mMaxLinesCount) {
        
                //如果可以继续添加行
                mLine = new Line();
                mUsedWidth = 0; //宽度清零
                return true;
            }
            return false;
        }
    
        // ==========================================================================
        // Inner/Nested Classes
        // ==========================================================================
    
        /**
         * 代表着一行，封装了一行所占高度，该行子View的集合，以及所有View的宽度总和
         */
        class Line {
        
            int mWidth = 0;// 该行中所有的子View累加的宽度
            int mHeight = 0;// 该行中所有的子View中高度最高的那个子View的高度
    
            /**
             * 一行子控件的集合
             */
            List<View> views = new ArrayList<View>();
    
            /**
             * 添加一个子控件
             *
             * @param view
             */
            public void addView(View view) {
        // 往该行中添加一个
                views.add(view);
                mWidth += view.getMeasuredWidth();
                int childHeight = view.getMeasuredHeight();
                mHeight = mHeight < childHeight ? childHeight : mHeight;// 高度等于一行中最高的View
            }
    
            /**
             * 获取当前行子控件的个数
             *
             * @return
             */
            public int getViewCount() {
        
                return views.size();
            }
    
            /**
             * 摆放行对象
             *
             * @param l
             * @param t
             */
            public void layoutView(int l, int t) {
        // 布局
                int left = l;
                int top = t;
                int count = getViewCount();
    
                // 总宽度
                int layoutWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
    
                // 剩余的宽度，是除了View和间隙的剩余空间
                //将剩余空间平均分配给每个子控件
                int surplusWidth = layoutWidth - mWidth - mHorizontalSpacing * (count - 1);
    
                if (surplusWidth >= 0) {
        // 剩余空间
                    // 采用float类型数据计算后四舍五入能减少int类型计算带来的误差
                    int splitSpacing = (int) (surplusWidth / count + 0.5); //平均每个控件分配的大小
    
                    for (int i = 0; i < count; i++) {
        
    
                        final View view = views.get(i);
                        int childWidth = view.getMeasuredWidth();
                        int childHeight = view.getMeasuredHeight();
    
                        // 当控件比较矮时，需要居中展示
                        // 计算出每个View的顶点，是由最高的View和该View高度的差值除以2
                        int topOffset = (int) ((mHeight - childHeight) / 2.0 + 0.5);
                        if (topOffset < 0) {
        
                            topOffset = 0;
                        }
                        // 把剩余空间平均到每个View上
                        if (isAverageInRow) {
        
                            childWidth = childWidth + splitSpacing;
                        }
                        view.getLayoutParams().width = childWidth;
                        if (isAverageInRow) {
        
                            if (splitSpacing > 0) {
        // View的长度改变了，需要重新measure
                                int widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY);
                                int heightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);
                                view.measure(widthMeasureSpec, heightMeasureSpec);
                            }
                        }
                        // 布局View
                        view.layout(left, top + topOffset, left + childWidth, top + topOffset + childHeight);
                        left += childWidth + mHorizontalSpacing; // 为下一个View的left赋值
                    }
                } else {
        
                    if (count == 1) {
        
                        //没有剩余空间
                        //这个控件很长，占满整行
                        View view = views.get(0);
                        view.layout(left, top, left + view.getMeasuredWidth(), top + view.getMeasuredHeight());
                    } else {
        
                        // 走到这里来，应该是代码出问题了，目前按照逻辑来看，是不可能走到这一步
                    }
                }
            }
        }
    }

**使用**

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.FlowLayoutActivity">
    
        <com.zly.flowlayoutdemo.widget.FlowLayout
            android:id="@+id/flowLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>

**FlowLayoutActivity**

public class FlowLayoutActivity extends AppCompatActivity {
        
    
        private FlowLayout mFlowLayout;
    
        private List<String> mDatas;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_flow_layout);
    
            mFlowLayout = (FlowLayout) findViewById(R.id.flowLayout);
    
            loadData();
    
            staticAddView();
    
            //动态添加View
            //dynamicAddView();
        }
    
        private void staticAddView() {
        
            int padding10 = AppUtils.dp2px(10);
            mFlowLayout.setPadding(padding10, padding10, padding10, padding10);
            for (int i = 0; i < mDatas.size(); i++) {
        
                TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mFlowLayout, false);
                String s = mDatas.get(i);
                textView.setText(s);
                mFlowLayout.addView(textView);
                textView.setOnClickListener(v -> Toast.makeText(FlowLayoutActivity.this, s, Toast.LENGTH_SHORT).show());
            }
            mFlowLayout.setMaxLines(5); //设置最大行数
        }
    
    
        private void dynamicAddView() {
        
            int padding6 = AppUtils.dp2px(6);
            int padding8 = AppUtils.dp2px(8);
            int padding10 = AppUtils.dp2px(10);
            int padding12 = AppUtils.dp2px(12);
            mFlowLayout.setPadding(padding10, padding10, padding10, padding10);
            mFlowLayout.setHorizontalSpacing(padding8); //水平间距
            mFlowLayout.setVerticalSpacing(padding10);  //竖直边距
    
            for (int i = 0; i < mDatas.size(); i++) {
        
                String key = mDatas.get(i);
                TextView textView = new TextView(this);
                textView.setText(key);
    
                textView.setTextColor(Color.parseColor("#333333"));
                textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
                textView.setPadding(padding12, padding6, padding12, padding6);
                textView.setGravity(Gravity.CENTER);
                textView.setBackgroundResource(R.drawable.shape_search_lable_bg);
                mFlowLayout.addView(textView);
    
                textView.setOnClickListener(v -> Toast.makeText(FlowLayoutActivity.this, key, Toast.LENGTH_SHORT).show());
            }
    
            mFlowLayout.setMaxLines(5); //设置最大行数
        }
    
        private void loadData() {
        
            mDatas = new ArrayList<>();
            for (int i = 0; i < 30; i++) {
        
                if (i % 2 == 0) {
        
                    mDatas.add("数据" + i);
                } else {
        
                    mDatas.add("数据数据数据" + i);
                }
            }
        }
    }

### 自定义流式布局ZFlowLayout(可以设置展开和收起按钮) ###

仿淘宝历史搜索效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70]  
**ZFlowLayout**

/**
     * 实现流式布局，自定义ViewGroup，实现标签等 - 单行垂直居中 或 水平平分
     * <p>
     * 可以设置展开和收起按钮
     */
    public class ZFlowLayout extends ViewGroup {
        
        /**
         * 存储每一行的剩余的空间
         */
        private List<Integer> lineSpaces = new ArrayList<>();
        /**
         * 存储每一行的高度
         */
        private List<Integer> lineHeights = new ArrayList<>();
        /**
         * 存储每一行的view
         */
        private List<List<View>> lineViews = new ArrayList<>();
        /**
         * 提供添加view
         */
        private List<View> children = new ArrayList<>();
    
        /**
         * 每一行是否平分空间
         */
        private boolean isAverageInRow = false;
    
        /**
         * 每一列是否垂直居中
         */
        private boolean isAverageInColumn = true;
    
        private int mLineCount = 0;//行数
    
        private int mTwoLineViewCount = 0;//前两行里面view的个数
    
        //展开是最多显示几行
        private int mExpandLineCount = 5;
    
        //展开时显示view的个数
        private int mExpandLineViewCount = 0;
    
        public ZFlowLayout(Context context) {
        
            super(context);
        }
    
        public ZFlowLayout(Context context, AttributeSet attrs) {
        
            super(context, attrs);
        }
    
        public ZFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        
            super(context, attrs, defStyleAttr);
        }
    
        public int getLineCount() {
        
            return mLineCount;
        }
    
        public int getTwoLineViewCount() {
        
            return mTwoLineViewCount;
        }
    
        public int getExpandLineViewCount() {
        
            return mExpandLineViewCount;
        }
    
        /**
         * 设置是否每列垂直居中
         *
         * @param averageInColumn 是否垂直居中
         */
        public void setAverageInColumn(boolean averageInColumn) {
        
            if (isAverageInColumn != averageInColumn) {
        
                isAverageInColumn = averageInColumn;
                requestLayout();
            }
        }
    
        /**
         * 设置是否每一行居中
         *
         * @param averageInRow 是否水平平分
         */
        public void setAverageInRow(boolean averageInRow) {
        
            if (isAverageInRow != averageInRow) {
        
                isAverageInRow = averageInRow;
                requestLayout();
            }
        }
    
        /**
         * 动态添加view
         */
        public void setChildren(List<View> children) {
        
            if (children == null)
                return;
            this.children = children;
            mLineCount = 0;
            mTwoLineViewCount = 0;
            mExpandLineViewCount = 0;
            this.removeAllViews();
            for (int i = 0; i < children.size(); i++) {
        
                this.addView(children.get(i));
                if (children.get(i) instanceof TextView) {
        
                    int finalI = i;
                    children.get(i).setOnClickListener(v -> {
        
                        if (mOnTagClickListener != null) {
        
                            mOnTagClickListener.onTagClick(children.get(finalI), finalI);
                        }
                    });
                }
            }
        }
    
        /**
         * 重新方法用来获取子view的margin值
         */
        @Override
        public LayoutParams generateLayoutParams(AttributeSet attrs) {
        
            return new MarginLayoutParams(getContext(), attrs);
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        
            //清除记录数据
            lineSpaces.clear();
            lineHeights.clear();
            lineViews.clear();
            //测量view的宽高
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            int viewWidth = MeasureSpec.getSize(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);
            int viewHeight = MeasureSpec.getSize(heightMeasureSpec);
            //计算children的数量
            int count = this.getChildCount();
            //统计子view总共高度
            int childrenTotalHeight = 0;
    
            //一行中剩余的空间
            int lineLeftSpace = 0;
            int lineRealWidth = 0;
            int lineRealHeight = 0;
    
            List<View> list = new ArrayList<>();
            for (int i = 0; i < count; i++) {
        
                View child = getChildAt(i);
                //不可见的View不作处理
                if (child.getVisibility() == GONE)
                    continue;
                //对子view进行测量
                measureChild(child, widthMeasureSpec, heightMeasureSpec);
                //获取子view的间距
                MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
                //获取view占据的空间大小
                int childViewWidth = child.getMeasuredWidth() + params.leftMargin + params.rightMargin;
                int childViewHeight = child.getMeasuredHeight() + params.topMargin + params.bottomMargin;
    
                //            System.out.println("111111111 视图 " + " 子View宽度： " + childViewWidth + "  lineRealWidth:" + lineRealWidth + " lineRealHeight ：" + lineRealHeight);
    
                if (childViewWidth + lineRealWidth <= viewWidth) {
        // 一行
                    //已占用的空间
                    lineRealWidth += childViewWidth;
                    //剩余的空间
                    lineLeftSpace = viewWidth - lineRealWidth;
                    //一行的最大高度
                    lineRealHeight = Math.max(lineRealHeight, childViewHeight);
                    //将一行中的view加到同意个集合
                    list.add(child);
                } else {
        // 下一行
                    if (list.size() != 0) {
        
                        // 统计上一行的总高度
                        childrenTotalHeight += lineRealHeight;
                        //上一行的高度
                        lineHeights.add(lineRealHeight);
                        //上一行剩余的空间
                        lineSpaces.add(lineLeftSpace);
                        //将上一行的元素保存起来
                        lineViews.add(list);
                    }
                    //重置一行中已占用的空间
                    lineRealWidth = childViewWidth;
                    //重置一行中剩余的空间
                    lineLeftSpace = viewWidth - lineRealWidth;
                    //重置一行中的高度
                    lineRealHeight = childViewHeight;
                    //更换新的集合存储下一行的元素
                    list = new ArrayList<>();
                    list.add(child);
                }
    
                if (i == count - 1) {
        // 最后一个元素
                    childrenTotalHeight += lineRealHeight;
                    // 将最后一行的信息保存下来
                    lineViews.add(list);
                    lineHeights.add(lineRealHeight);
                    lineSpaces.add(lineLeftSpace);
                }
            }
            // 宽度可以不用考虑 主要考虑高度
            if (heightMode == MeasureSpec.EXACTLY) {
        
                setMeasuredDimension(viewWidth, viewHeight);
            } else {
        
                setMeasuredDimension(viewWidth, childrenTotalHeight);
            }
        }
    
        @Override
        protected void onLayout(boolean changed, int l, int t, int r, int b) {
        
            // View最开始左边
            int viewLeft = 0;
            // View最开始上边
            int viewTop = 0;
    
            // 每一个view layout的位置
            int vl;
            int vt;
            int vr;
            int vb;
    
            // 每一行中每一个view多平分的空间
            float averageInRow;
            // 每一列中每一个view距离顶部的高度
            float averageInColumn;
    
            // 列数
            int columns = lineViews.size();
            mLineCount = columns;
    
    
            for (int i = 0; i < columns; i++) {
        
                // 该行剩余的空间
                int lineSpace = lineSpaces.get(i);
                // 该行的高度
                int lineHeight = lineHeights.get(i);
                // 该行的所有元素
                List<View> list = lineViews.get(i);
                // 每一行的view的个数
                int rows = list.size();
                if (i == 0 || i == 1) {
        
                    mTwoLineViewCount = mTwoLineViewCount + rows;
                }
    
                if (i < mExpandLineCount) {
        
                    mExpandLineViewCount = mExpandLineViewCount + rows;
                }
    
                // view layout的位置
                // 每一行中每一个view多平分的空间<一行只有一个不管>
                if (isAverageInRow && rows > 1) {
        
                    averageInRow = lineSpace * 1.0f / (rows + 1);
                } else {
        
                    averageInRow = 0;
                }
    
                // 获取View的间距属性
                MarginLayoutParams params;
                for (int j = 0; j < rows; j++) {
        
                    // 对应位置的view元素
                    View child = list.get(j);
                    params = (MarginLayoutParams) child.getLayoutParams();
                    // 是否计算每一列中的元素垂直居中的时候多出的距离
                    if (isAverageInColumn && rows > 1) {
        
                        averageInColumn = (lineHeight - child.getMeasuredHeight() - params.topMargin - params.bottomMargin) / 2;
                    } else {
        
                        averageInColumn = 0;
                    }
    
                    // 左边位置 =起始位置+view左间距+多平分的空间
                    vl = (int) (viewLeft + params.leftMargin + averageInRow);
                    // 上面的位置 = 起始位置+view上间距+多平分的空间
                    vt = (int) (viewTop + params.topMargin + averageInColumn);
                    vr = vl + child.getMeasuredWidth();
                    vb = vt + child.getMeasuredHeight();
                    child.layout(vl, vt, vr, vb);
                    viewLeft += child.getMeasuredWidth() + params.leftMargin + params.rightMargin + averageInRow;
                }
                viewLeft = 0;
                viewTop += lineHeight;
            }
        }
    
    
        private OnTagClickListener mOnTagClickListener;
    
        public void setOnTagClickListener(OnTagClickListener onTagClickListener) {
        
            mOnTagClickListener = onTagClickListener;
        }
    
        public interface OnTagClickListener {
        
            void onTagClick(View view, int position);
        }
    
    }

**使用**

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.ZFlowLayoutActivity">
    
    
        <com.zly.flowlayoutdemo.widget.ZFlowLayout
            android:id="@+id/zFlowLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="10dp"
            android:layout_marginTop="20dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

**ZFlowLayoutActivity**

public class ZFlowLayoutActivity extends AppCompatActivity {
        
    
        private ZFlowLayout mZFlowLayout;
    
        private List<String> mDatas;
    
        private List<View> mViewList = new ArrayList<>();
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_z_flow_layout);
    
            mZFlowLayout = (ZFlowLayout) findViewById(R.id.zFlowLayout);
    
            loadData();
    
            //ZFlowLayout的使用：可添加展开和收起按钮
            initZFlowLayout();
        }
    
    
        private void initZFlowLayout() {
        
            mViewList.clear();
            for (int i = 0; i < mDatas.size(); i++) {
        
                TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mZFlowLayout, false);
                textView.setText(mDatas.get(i));
                mViewList.add(textView);
            }
            mZFlowLayout.setChildren(mViewList);
    
            mZFlowLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        
                @Override
                public void onGlobalLayout() {
        
                    mZFlowLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    int lineCount = mZFlowLayout.getLineCount();  //行数
                    int twoLineViewCount = mZFlowLayout.getTwoLineViewCount();  //前两行里面view的个数
                    int expandLineViewCount = mZFlowLayout.getExpandLineViewCount(); ///展开时显示view的个数
                    if (lineCount > 2) {
          //默认展示2行，其余折叠收起，最多展示5行
                        initIvClose(twoLineViewCount, expandLineViewCount);
                    }
                }
            });
    
            mZFlowLayout.setOnTagClickListener((view, position) -> {
        
                //点击了
                Toast.makeText(this, mDatas.get(position), Toast.LENGTH_SHORT).show();
            });
    
        }
    
        private void initIvClose(int twoLineViewCount, int expandLineViewCount) {
        
            mViewList.clear();
            for (int i = 0; i < twoLineViewCount; i++) {
        
                TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mZFlowLayout, false);
                textView.setText(mDatas.get(i));
                mViewList.add(textView);
            }
    
            //展开按钮
            ImageView imageView = (ImageView) LayoutInflater.from(this).inflate(R.layout.item_search_history_img, mZFlowLayout, false);
            imageView.setImageResource(R.mipmap.search_close);
            imageView.setOnClickListener(v -> {
        
                initIvOpen(twoLineViewCount, expandLineViewCount);
    
            });
            mViewList.add(imageView);
            mZFlowLayout.setChildren(mViewList);
            mZFlowLayout.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        
                @Override
                public void onGlobalLayout() {
        
                    mZFlowLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    int lineCount = mZFlowLayout.getLineCount();
                    int twoLineViewCount = mZFlowLayout.getTwoLineViewCount();
                    if (lineCount > 2) {
        
                        initIvClose(twoLineViewCount - 1, mZFlowLayout.getExpandLineViewCount());
                    }
                }
            });
        }
    
        private void initIvOpen(int twoLineViewCount, int expandLineViewCount) {
        
            mViewList.clear();
    
            /*for (int i = 0; i < mDatas.size(); i++) {
                TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mZFlowLayout, false);
                textView.setText(mDatas.get(i));
                mViewList.add(textView);
            }*/
    
            for (int i = 0; i < expandLineViewCount; i++) {
        
                TextView textView = (TextView) LayoutInflater.from(this).inflate(R.layout.item_search_history, mZFlowLayout, false);
                textView.setText(mDatas.get(i));
                mViewList.add(textView);
            }
    
            //收起按钮
            ImageView imageView = (ImageView) LayoutInflater.from(this).inflate(R.layout.item_search_history_img, mZFlowLayout, false);
            imageView.setImageResource(R.mipmap.search_open);
            imageView.setOnClickListener(v -> initIvClose(twoLineViewCount, expandLineViewCount));
            mViewList.add(imageView); //不需要的话可以不添加
            mZFlowLayout.setChildren(mViewList);
        }
    
    
        private void loadData() {
        
            mDatas = new ArrayList<>();
            for (int i = 0; i < 30; i++) {
        
                if (i % 2 == 0) {
        
                    mDatas.add("数据" + i);
                } else {
        
                    mDatas.add("数据数据数据" + i);
                }
            }
        }
    }

### 使用RecyclerView实现流式布局 ###

**RvActivity**

public class RvActivity extends AppCompatActivity {
        
    
        private RecyclerView mRecyclerView;
    
        private List<String> mDatas;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_rv);
    
            mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    
            loadData();
    
            FlowLayoutManager flowLayoutManager = new FlowLayoutManager();
            mRecyclerView.setLayoutManager(flowLayoutManager);
    
            mRecyclerView.setAdapter(new CommomRvAdapter<String>(this, mDatas, R.layout.item_rv) {
        
                @Override
                protected void fillData(CommomRvViewHolder holder, int position, String s) {
        
                    holder.setText(R.id.tv_label, s);
                }
            });
    
        }
    
        private void loadData() {
        
            mDatas = new ArrayList<>();
            for (int i = 0; i < 30; i++) {
        
                if (i % 2 == 0) {
        
                    mDatas.add("数据" + i);
                } else {
        
                    mDatas.add("数据数据数据" + i);
                }
            }
        }
    }

**FlowLayoutManager**

自定义FlowLayoutManager,配合RecyclerView实现流式布局。

/**
     * 自定义FlowLayoutManager,配合RecyclerView实现流式布局
     */
    public class FlowLayoutManager extends RecyclerView.LayoutManager {
        
    
        private static final String TAG = FlowLayoutManager.class.getSimpleName();
    
        final FlowLayoutManager self = this;
    
        protected int width, height;
        private int left, top, right;
        //最大容器的宽度
        private int usedMaxWidth;
        //竖直方向上的偏移量
        private int verticalScrollOffset = 0;
    
        public int getTotalHeight() {
        
            return totalHeight;
        }
    
        //计算显示的内容的高度
        protected int totalHeight = 0;
        private Row row = new Row();
        private List<Row> lineRows = new ArrayList<>();
    
        //保存所有的Item的上下左右的偏移量信息
        private SparseArray<Rect> allItemFrames = new SparseArray<>();
    
        public FlowLayoutManager() {
        
        }
    
        //设置主动测量规则,适应recyclerView高度为wrap_content
        @Override
        public boolean isAutoMeasureEnabled() {
        
            return true;
        }
    
        public int getRowCounts()  {
        
            return lineRows.size();
        }
    
        //每个item的定义
        public class Item {
        
            int useHeight;
            View view;
    
            public void setRect(Rect rect) {
        
                this.rect = rect;
            }
    
            Rect rect;
    
            public Item(int useHeight, View view, Rect rect) {
        
                this.useHeight = useHeight;
                this.view = view;
                this.rect = rect;
            }
        }
    
        //行信息的定义
        public class Row {
        
            public void setCuTop(float cuTop) {
        
                this.cuTop = cuTop;
            }
    
            public void setMaxHeight(float maxHeight) {
        
                this.maxHeight = maxHeight;
            }
    
            //每一行的头部坐标
            float cuTop;
            //每一行需要占据的最大高度
            float maxHeight;
            //每一行存储的item
            List<Item> views = new ArrayList<>();
    
            public void addViews(Item view) {
        
                views.add(view);
            }
        }
    
        @Override
        public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        
            return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        }
    
        //该方法主要用来获取每一个item在屏幕上占据的位置
        @Override
        public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        
            Log.d(TAG, "onLayoutChildren");
            totalHeight = 0;
            int cuLineTop = top;
            //当前行使用的宽度
            int cuLineWidth = 0;
            int itemLeft;
            int itemTop;
            int maxHeightItem = 0;
            row = new Row();
            lineRows.clear();
            allItemFrames.clear();
            removeAllViews();
            if (getItemCount() == 0) {
        
                detachAndScrapAttachedViews(recycler);
                verticalScrollOffset = 0;
                return;
            }
            if (getChildCount() == 0 && state.isPreLayout()) {
        
                return;
            }
            //onLayoutChildren方法在RecyclerView 初始化时 会执行两遍
            detachAndScrapAttachedViews(recycler);
            if (getChildCount() == 0) {
        
                width = getWidth();
                height = getHeight();
                left = getPaddingLeft();
                right = getPaddingRight();
                top = getPaddingTop();
                usedMaxWidth = width - left - right;
            }
    
            for (int i = 0; i < getItemCount(); i++) {
        
                Log.d(TAG, "index:" + i);
                View childAt = recycler.getViewForPosition(i);
                if (View.GONE == childAt.getVisibility()) {
        
                    continue;
                }
                measureChildWithMargins(childAt, 0, 0);
                int childWidth = getDecoratedMeasuredWidth(childAt);
                int childHeight = getDecoratedMeasuredHeight(childAt);
                int childUseWidth = childWidth;
                int childUseHeight = childHeight;
                //如果加上当前的item还小于最大的宽度的话
                if (cuLineWidth + childUseWidth <= usedMaxWidth) {
        
                    itemLeft = left + cuLineWidth;
                    itemTop = cuLineTop;
                    Rect frame = allItemFrames.get(i);
                    if (frame == null) {
        
                        frame = new Rect();
                    }
                    frame.set(itemLeft, itemTop, itemLeft + childWidth, itemTop + childHeight);
                    allItemFrames.put(i, frame);
                    cuLineWidth += childUseWidth;
                    maxHeightItem = Math.max(maxHeightItem, childUseHeight);
                    row.addViews(new Item(childUseHeight, childAt, frame));
                    row.setCuTop(cuLineTop);
                    row.setMaxHeight(maxHeightItem);
                } else {
        
                    //换行
                    formatAboveRow();
                    cuLineTop += maxHeightItem;
                    totalHeight += maxHeightItem;
                    itemTop = cuLineTop;
                    itemLeft = left;
                    Rect frame = allItemFrames.get(i);
                    if (frame == null) {
        
                        frame = new Rect();
                    }
                    frame.set(itemLeft, itemTop, itemLeft + childWidth, itemTop + childHeight);
                    allItemFrames.put(i, frame);
                    cuLineWidth = childUseWidth;
                    maxHeightItem = childUseHeight;
                    row.addViews(new Item(childUseHeight, childAt, frame));
                    row.setCuTop(cuLineTop);
                    row.setMaxHeight(maxHeightItem);
                }
                //不要忘了最后一行进行刷新下布局
                if (i == getItemCount() - 1) {
        
                    formatAboveRow();
                    totalHeight += maxHeightItem;
                }
    
            }
            totalHeight = Math.max(totalHeight, getVerticalSpace());
            Log.d(TAG, "onLayoutChildren totalHeight:" + totalHeight);
            fillLayout(recycler, state);
        }
    
        //对出现在屏幕上的item进行展示，超出屏幕的item回收到缓存中
        private void fillLayout(RecyclerView.Recycler recycler, RecyclerView.State state) {
        
            if (state.isPreLayout() || getItemCount() == 0) {
         // 跳过preLayout，preLayout主要用于支持动画
                return;
            }
    
            // 当前scroll offset状态下的显示区域
            Rect displayFrame = new Rect(getPaddingLeft(), getPaddingTop() + verticalScrollOffset,
                    getWidth() - getPaddingRight(), verticalScrollOffset + (getHeight() - getPaddingBottom()));
    
            //对所有的行信息进行遍历
            for (int j = 0; j < lineRows.size(); j++) {
        
                Row row = lineRows.get(j);
                float lineTop = row.cuTop;
                float lineBottom = lineTop + row.maxHeight;
                //如果该行在屏幕中，进行放置item
    //            if (lineTop < displayFrame.bottom && displayFrame.top < lineBottom) {
        
                List<Item> views = row.views;
                for (int i = 0; i < views.size(); i++) {
        
                    View scrap = views.get(i).view;
                    measureChildWithMargins(scrap, 0, 0);
                    addView(scrap);
                    Rect frame = views.get(i).rect;
                    //将这个item布局出来
                    layoutDecoratedWithMargins(scrap,
                            frame.left,
                            frame.top - verticalScrollOffset,
                            frame.right,
                            frame.bottom - verticalScrollOffset);
                }
    //            } else {
        
    //                //将不在屏幕中的item放到缓存中
    //                List<Item> views = row.views;
    //                for (int i = 0; i < views.size(); i++) {
        
    //                    View scrap = views.get(i).view;
    //                    removeAndRecycleView(scrap, recycler);
    //                }
    //            }
            }
        }
    
        /**
         * 计算每一行没有居中的viewgroup，让居中显示
         */
        private void formatAboveRow() {
        
            List<Item> views = row.views;
            for (int i = 0; i < views.size(); i++) {
        
                Item item = views.get(i);
                View view = item.view;
                int position = getPosition(view);
                //如果该item的位置不在该行中间位置的话，进行重新放置
                if (allItemFrames.get(position).top < row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2) {
        
                    Rect frame = allItemFrames.get(position);
                    if (frame == null) {
        
                        frame = new Rect();
                    }
                    frame.set(allItemFrames.get(position).left, (int) (row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2),
                            allItemFrames.get(position).right, (int) (row.cuTop + (row.maxHeight - views.get(i).useHeight) / 2 + getDecoratedMeasuredHeight(view)));
                    allItemFrames.put(position, frame);
                    item.setRect(frame);
                    views.set(i, item);
                }
            }
            row.views = views;
            lineRows.add(row);
            row = new Row();
        }
    
        /**
         * 竖直方向需要滑动的条件
         *
         * @return
         */
        @Override
        public boolean canScrollVertically() {
        
            return true;
        }
    
        //监听竖直方向滑动的偏移量
        @Override
        public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler,
                                      RecyclerView.State state) {
        
    
            Log.d("TAG", "totalHeight:" + totalHeight);
            //实际要滑动的距离
            int travel = dy;
    
            //如果滑动到最顶部
            if (verticalScrollOffset + dy < 0) {
        //限制滑动到顶部之后，不让继续向上滑动了
                travel = -verticalScrollOffset;//verticalScrollOffset=0
            } else if (verticalScrollOffset + dy > totalHeight - getVerticalSpace()) {
        //如果滑动到最底部
                travel = totalHeight - getVerticalSpace() - verticalScrollOffset;//verticalScrollOffset=totalHeight - getVerticalSpace()
            }
    
            //将竖直方向的偏移量+travel
            verticalScrollOffset += travel;
    
            // 平移容器内的item
            offsetChildrenVertical(-travel);
            fillLayout(recycler, state);
            return travel;
        }
    
        private int getVerticalSpace() {
        
            return self.getHeight() - self.getPaddingBottom() - self.getPaddingTop();
        }
    
        public int getHorizontalSpace() {
        
            return self.getWidth() - self.getPaddingLeft() - self.getPaddingRight();
        }
    
    }

### FlexboxLayout的使用 ###

[Github地址][Github]

**依赖**

dependencies {
        
        implementation 'com.google.android:flexbox:2.0.1'
    }

**什么是FlexboxLayout**

那么FlexboxLayout 它到底是个什么东西呢？看一下Github对这个库的介绍：FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android. 意思是：FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。FlexboxLayout可以理解成一个高级版的LinearLayout，因为两个布局都把子view按顺序排列。两者之间最大的差别在于FlexboxLayout具有换行的特性。

**FlexboxLayout示例**

既然说FlexboxLayout方便、强大，那么我们就先以一个示例来看一下它的一个简单实用场景：现在很多APP都有标签功能，本节以简书首页的热门专题（标签）为例，看一下使用FlexboxLayout来实现有多方便。  
简书首页热门专题如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 1]

**FlexboxLayout使用**

<?xml version="1.0" encoding="utf-8"?>
    <com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/flexbox_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignContent="flex_start"
        app:alignItems="center"
        app:dividerDrawable="@drawable/divider_shape"
        app:flexDirection="row"
        app:flexWrap="wrap"
        app:justifyContent="flex_start"
        app:showDivider="beginning|middle|end">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="程序员"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="影视天堂"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start"
            app:layout_flexGrow="1" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="美食"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start"
            app:layout_flexGrow="1" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="漫画.手绘"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start"
            app:layout_flexGrow="1" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="广告圈"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="旅行.在路上"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="娱乐八卦"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="青春"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="谈写作"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="短篇小说"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="散文"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:background="@drawable/label_bg_shape"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:text="摄影"
            android:textColor="@color/text_color"
            app:layout_alignSelf="flex_start"
            app:layout_order="2" />
    </com.google.android.flexbox.FlexboxLayout>

实现效果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 2]

很简单，就一个布局文件，以FlexboxLayout为父布局，向容器里面添加子Item 就行了。当然了，你可以在代码中向FlexboxLayout布局动态添加子元素，代码如下：

ublic class FlexboxLayoutActivity extends AppCompatActivity {
        
    
        private FlexboxLayout mFlexboxLayout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_flexbox_layout);
    
            mFlexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
    
            // 通过代码向FlexboxLayout添加View
            for (int i = 0; i < 10; i++) {
        
                TextView textView = new TextView(this);
                textView.setBackground(getResources().getDrawable(R.drawable.label_bg_shape));
                textView.setText("散文" + i);
                textView.setGravity(Gravity.CENTER);
                textView.setPadding(dp2px(15), 0, dp2px(15), 0);
                textView.setTextColor(getResources().getColor(R.color.text_color));
    
                FlexboxLayout.LayoutParams layoutParams = new FlexboxLayout.LayoutParams(FlexboxLayout.LayoutParams.WRAP_CONTENT, dp2px(40));
                textView.setLayoutParams(layoutParams);
                mFlexboxLayout.addView(textView);
            }
        }
    
        private int dp2px(float value) {
        
            float density = getResources().getDisplayMetrics().density;
            return (int) (density * value + 0.5);
        }
    }

**FlexboxLayout支持的属性介绍**

上面说了FlexboxLayout真正强大的是它定义的属性，那么这一节我们看一下Flexbox支持哪些属性,分为2个方面，FlexboxLayout支持的属性和FlexboxLayout 子元素支持的属性。

**flexDirection：**

flexDirection属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：

*  row (default)： 默认值，主轴为水平方向，起点在左端，从左到右。
 *  row\_reverse：主轴为水平方向，起点在右端，从右到左。
 *  column：主轴为竖直方向，起点在上端，从上到下。
 *  column\_reverse：主轴为竖直方向，起点在下端，从下往上。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 4]

**flexWrap**

flexWrap 这个属性决定Flex 容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：

*  noWrap: 不换行，一行显示完子元素。
 *  wrap: 按正常方向换行。
 *  wrap\_reverse: 按反方向换行。

**justifyContent**

justifyContent 属性控制元素主轴方向上的对齐方式，有以下5种取值：

*  flex\_start (default): 默认值，左对齐
 *  flex\_end: 右对齐 center: 居中对齐
 *  space\_between: 两端对齐，中间间隔相同
 *  space\_around: 每个元素到两侧的距离相等。

**alignItems**

alignItems 属性控制元素在副轴方向的对齐方式，有以下5种取值：

*  stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。
 *  flex\_start：顶端对齐
 *  flex\_end：底部对齐
 *  center：居中对齐
 *  baseline：第一行内容的的基线对齐。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 5]  
**alignContent**

alignContent 属性控制多根轴线的对齐方式(也就是控制多行，如果子元素只有一行，则不起作用)，可能有一下6种取值：

*  stretch (default): 默认值，充满交叉轴的高度（测试发现，需要alignItems 的值也为stretch 才有效）。
 *  flex\_start: 与交叉轴起点对齐。
 *  flex\_end: 与交叉轴终点对齐。
 *  center: 与交叉轴居中对齐。
 *  space\_between: 交叉轴两端对齐，中间间隔相等。
 *  space\_around: 到交叉轴两端的距离相等。

**showDividerHorizontal**

showDividerHorizontal 控制显示水平方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

**dividerDrawableHorizontal**

dividerDrawableHorizontal 设置Flex 轴线之间水平方向的分割线。

**showDividerVertical**

showDividerVertical 控制显示垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

**dividerDrawableVertical**

dividerDrawableVertical 设置子元素垂直方向的分割线。

**showDivider**

showDivider 控制显示水平和垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

**dividerDrawable**

dividerDrawable 设置水平和垂直方向的分割线，但是注意,如果同时和其他属性使用，比如为 Flex 轴、子元素设置了justifyContent=“space\_around” 、alignContent=“space\_between” 等等。可能会看到意料不到的空间，因此应该避免和这些值同时使用。

**FleboxLayout子元素支持的属性介绍：**

**layout\_order**

layout\_order 属性可以改变子元素的排列顺序，默认情况下，FlexboxLayout子元素的排列是按照xml文件中出现的顺序。默认值为1，值越小排在越靠前。

**layout\_flexGrow(float)**

layout\_flexGrow 子元素的放大比例， 决定如何分配剩余空间（如果存在剩余空间的话），默认值为0,不会分配剩余空间，如果有一个item的 layout\_flexGrow 是一个正值，那么会将全部剩余空间分配给这个Item,如果有多个Item这个属性都为正值，那么剩余空间的分配按照layout\_flexGrow定义的比例（有点像LinearLayout的layout\_weight属性）。

**layout\_flexShrink(float)**

layout\_flexShrink:子元素缩小比例，当空间不足时，子元素需要缩小（设置了换行则无效），默认值为1，如果所有子元素的layout\_flexShrink 值为1,空间不足时，都等比缩小，如果有一个为0，其他为1，空间不足时，为0的不缩小，负值无效。

**layout\_alignSelf**

layout\_alignSelf 属性可以给子元素设置对齐方式，上面讲的alignItems属性可以设置对齐，这个属性的功能和alignItems一样，只不过alignItems作用于所有子元素，而layout\_alignSelf 作用于单个子元素。默认值为auto, 表示继承alignItems属性，如果为auto以外的值，则会覆盖alignItems属性。有以下6种取值：

*  auto (default)
 *  flex\_start
 *  flex\_end
 *  center
 *  baseline
 *  stretch

除了auto以外，其他和alignItems属性一样。

**layout\_flexBasisPercent (fraction)**

layout\_flexBasisPercent的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖layout\_width或者layout\_height的值。但是需要注意，这个值只有设置了父容器的长度时才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默认值时-1。

**layout\_minWidth / layout\_minHeight (dimension)**

强制限制 FlexboxLayout的子元素（宽或高）不会小于最小值，不管layout\_flexShrink这个属性的值为多少，子元素不会被缩小到小于设置的这个最小值。

**layout\_maxWidth / layout\_maxHeight (dimension)**

这个和上面的刚好相反，强制限制FlexboxLayout子元素不会大于这个最大值, 不管layout\_flexGrow的值为多少，子元素不会被放大到超过这个最大值。

**layout\_wrapBefore**

layout\_wrapBefore 属性控制强制换行，默认值为false,如果将一个子元素的这个属性设置为true，那么这个子元素将会成为一行的第一个元素。这个属性将忽略flex\_wrap 设置的 noWrap值。

**与RecyclerView 的结合使用**

Flexbox能够作为一个LayoutManager(FlexboxlayoutManager) 用在RecyclerView里面，这也就意味着你可以在一个有大量Item的可滚动容器里面使用Flexbox了。

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

public class FlexboxRvActivity extends AppCompatActivity {
        
    
        private RecyclerView mRecyclerView;
    
        private List<String> mDatas;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_flexbox_rv_layout);
    
            mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    
    
            FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
    
            //flexDirection 属性决定主轴的方向（即项目的排列方向）。类似 LinearLayout 的 vertical 和 horizontal。
            flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主轴为水平方向，起点在左端。
    
            //flexWrap 默认情况下 Flex 跟 LinearLayout 一样，都是不带换行排列的，但是flexWrap属性可以支持换行排列。
            flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);//按正常方向换行
    
            //justifyContent 属性定义了项目在主轴上的对齐方式。
            flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);//交叉轴的起点对齐。
    
            mRecyclerView.setLayoutManager(flexboxLayoutManager);
    
            loadData();
    
            CommomRvAdapter<String> adapter = new CommomRvAdapter<String>(this, mDatas, R.layout.item_rv) {
        
                @Override
                protected void fillData(CommomRvViewHolder holder, int position, String s) {
        
                    holder.setText(R.id.tv_label, s);
                }
            };
            mRecyclerView.setAdapter(adapter);
    
    
            adapter.setOnItemClickListener((view, position) -> {
        
                Toast.makeText(this, mDatas.get(position), Toast.LENGTH_SHORT).show();
            });
    
    
        }
    
        private void loadData() {
        
            mDatas = new ArrayList<>();
            for (int i = 0; i < 30; i++) {
        
                if (i % 2 == 0) {
        
                    mDatas.add("数据" + i);
                } else {
        
                    mDatas.add("数据数据数据" + i);
                }
            }
        }
    }

FlexboxlayoutManager是支持View回收的，而FlexboxLayout是不支持View回收的，FlexboxLayout只适用于少量Item的场景，这也是为什么会出现FlexboxLayoutManager的原因吧。

**FlexboxLayout总结**

FlexboxLayout是Google 开源的一个与CSS Flexbox有类似功能的强大布局，具有换行特性，使用起来特别方便，但是，FlexboxLayout是没有考虑View回收的，因此，它只使用于只有少量子Item的场景，如果向其中添加大量Item 是灰导致内存溢出的。所幸，最新的版本添加了与RecyclerView的集成，这就可以在有大量子Item的场景下使用了。另外，FlexboxLayout的这写属性的意义可能不好理解 ，建议大家去写个demo试一下每个属性的每个值看看是什么效果，这样就能很好的理解每个属性了。

[项目完整代码][Link 1]

本文链接：[Android 实现流式布局的几种方式和FlexboxLayout的使用\_qq\_36699930的博客-CSDN博客][Android _FlexboxLayout_qq_36699930_-CSDN]

侵删

备份下载地址 [Android实现流式布局的几种方式和FlexboxLayout的使用\_qq\_36699930的博客-程序员资料-网络攻防文档类资源-CSDN下载][Android_FlexboxLayout_qq_36699930_-_-_-CSDN]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210111193653717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw,size_16,color_FFFFFF,t_70
[Github]: https://github.com/google/flexbox-layout
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210105175558471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210105190659157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210105195147662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210105195204927.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210105195328506.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2Njk5OTMw,size_16,color_FFFFFF,t_70
[Link 1]: https://github.com/hai910526/FlowLayoutDemo/tree/master
[CC 4.0 BY-SA]: https://creativecommons.org/licenses/by-sa/4.0/
[Android _FlexboxLayout_qq_36699930_-CSDN]: https://blog.csdn.net/qq_36699930/article/details/112249170
[Android_FlexboxLayout_qq_36699930_-_-_-CSDN]: https://download.csdn.net/download/xiaoerbuyu1233/79843768