Android-使用FlexboxLayout轻松实现流式布局

产品需求：

1.列表筛选显示标签，标签按文本长度展示，不固定长度，当长度最大为168时显示省略

2.2行以内全部展示，超过2行，只展示2行；点击展开，展示2行及以上，点击收起，展示2行。

按照以往实现方式，直接使用recylerview设置布局方式为Gridview，然后扒拉扒拉一顿写，发现完全不合要求。

实现技术难点：

长度不固定、高度不固定。

然后了解到google出了一个布局控件，引入flexlayout，完美解决。

FlexboxLayout：

FlexboxLayout是去年 Google I/O 上开源的一个布局控件，FlexboxLayout可以理解为高级的linearLayout，它提供了FlexboxLayoutManager，可以轻松实现子布局换行显示。

使用

项目中添加依赖：

 //流式布局
    implementation 'com.google.android:flexbox:1.0.0'

简单实现

创建FlexboxLayoutManager，并为recylerview设置layoutManager。

  //设置流式布局
        flexboxLayoutManager = new FlexboxLayoutManager(mActivity);
        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP); //设置是否换行
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW); // 设置主轴排列方式
        flexboxLayoutManager.setAlignItems(AlignItems.STRETCH);
        flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);
        rvCondition.setLayoutManager(flexboxLayoutManager);

recylerview子布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/_F4F8FF"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:id="@+id/ll_layout"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/tv_condition"
       style="@style/textviewCommonStyle"
        android:layout_width="wrap_content"
        android:layout_height="28dp"
        android:ellipsize="end"
        android:layout_weight="1"
        android:maxWidth="168dp"
        android:textSize="13sp"
        android:textColor="@color/_001A37"
        android:maxLines="1"
        tools:text="奥迪A3 2019款Limousine 35 TFSI 运动型 国 VI11111111111111111111111111111111111"
        android:paddingLeft="8dp"
        android:gravity="center_vertical"
        android:paddingTop="0dp"
        android:paddingBottom="0dp"
        android:paddingEnd="0dp"
        />

    <ImageView
        android:id="@+id/iv_delete"
        android:layout_width="18dp"
        android:layout_height="24dp"
        android:paddingEnd="8dp"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:paddingStart="2dp"
        android:src="@drawable/ic_delete2"
        android:layout_gravity="end|center_vertical"/>
</LinearLayout>

流式布局是实现了，现在的问题是怎么获取高度来判断当前行数呢

这里我是通过recylerview的最后一个item展示来判断，通过行数来设置当前recylerview的高度。

private void setCurMode(int layoutPosition, View itemView) {
        if(layoutPosition != conditionList.size() -1) return;
        itemView.post(new Runnable() {
            @Override
            public void run() {
                //判断当前显示几行
                Log.e("fg","绘制完毕");
                lines = Math.ceil(rvCondition.getHeight() / DeviceUtils.dpToPixel(mActivity, 38));
                Log.e("fg","当前行数--"+lines);
                if(lines <= 1){
                    tvClose.setVisibility(View.GONE);
                    tvClearAll.setVisibility(View.GONE);
                }else if(lines == 2){
                    isClosed = true;
                    tvClose.setVisibility(View.GONE);
                    tvClearAll.setVisibility(View.VISIBLE);
                }else if(lines >= 3){
                    if(isClosed) {
                        tvClose.setVisibility(View.VISIBLE);
                        tvClose.setText("展开");
                        tvClearAll.setVisibility(View.GONE);
                    }else{
                        tvClose.setVisibility(View.VISIBLE);
                        tvClose.setText("收起");
                        tvClearAll.setVisibility(View.VISIBLE);
                    }
                }
                setCurLabelHeight(!isClosed);
            }
        });
    }

setCurLabelHeight()

  private void setCurLabelHeight(boolean isOpen) {
        ViewGroup.LayoutParams layoutParams = rvCondition.getLayoutParams();
        if(!isOpen && lines >= 2){
            //收缩 设置为2行
            layoutParams.height = DeviceUtils.dpToPixel(mActivity,38 * 2);
        }else{
            //展开，设置为包裹
            layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
        }
        rvCondition.setLayoutParams(layoutParams);
    }

实现效果：

某人说这样显示不好，每次操作一个删除或者添加标签时，都会去重置recylerview的高度后，再设置一次recyclerview的布局，后续操作的话换一种思路实现。
通过按钮点击监听来判断当前是否可折叠，再折叠，同理，先判断是否可展开再展开。
1.当前是否可折叠。

 //是否可以折叠
    private boolean canFold() {
        return Math.ceil(layoutManager.getHeight() / dp2px(40)) > 2;
    }

2.当前是否可展开。

  //是否可以展开
    private boolean canOpen() {
        return layoutManager.findLastVisibleItemPosition() != list.size() -1;
    }

Tears_fg

导航

公告

Android-使用FlexboxLayout轻松实现流式布局