FlowLayout实现流式布局效果，看这一篇就够了！

FlowLayout实现流式布局效果       【Android开源库】FlowLayout 的基本使用

什么是流式布局？就是像水一样可以流动？不，之所以这样命名只是在强调它的不规则性，它会根据你的内容多少测量你需要的控件的尺寸，完成自定义的效果。之前我做过自定义View的流式布局效果，今天就来使用hongyang大神的github库来实现流式布局！因为布局复杂，所以我分了很多步，细心看方能见真知！

---

效果预览

 

流式布局.gif

---

用法

第一步：添加依赖

implementation 'com.hyman:flowlayout-lib:1.1.2'

第二步：布局文件

<com.zhy.view.flowlayout.TagFlowLayout
        android:id="@+id/id_flowlayout"
        app:max_select="-1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        tools:ignore="MissingConstraints">
    </com.zhy.view.flowlayout.TagFlowLayout>

一定要记住，你现在用的式弘洋大神已经自定义好了的TagFlowLayout来替代谷歌原生的FlowLayout，所以在控件声明的时候需要这样用：

private TagFlowLayout tagFlowLayout;

第三步：创建FlowTagAdapter类

继承自TagAdapter

/**
 * @data on 2020/9/5 10:41 AM
 * @auther armstrong
 * @describe   tagflowlayout 采自github泓洋大神的 FlowLayout库
 */
public class FlowTagAdapter extends TagAdapter {
    private ArrayList<String> datalist;
    private Context context;

    public FlowTagAdapter(Context mcontext,ArrayList datas) {
        super(datas);
        this.context = mcontext;
        this.datalist = datas;
    }

    @Override
    public View getView(FlowLayout parent, int position, Object o) {
        TextView tv = (TextView) View.inflate(context,R.layout.tagflow_tv_context, null);
        tv.setText(datalist.get(position));
        return tv;
    }

    @Override
    public int getCount() {
        return datalist.size();
    }

    @Override
    public void onSelected(int position, View view) {
        super.onSelected(position, view);
    }

    @Override
    public void unSelected(int position, View view) {
        super.unSelected(position, view);
    }
}

另外，后面的onSelected和unSelected，是非必要的，我在此只是展示它存在有意义！具体业务中使用与否看你自己

第四步：FlowTagAdapter加载的布局文件

R.layout.tagflow_tv_context

<?xml version="1.0" encoding="utf-8"?>
<TextView 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:layout_margin="5dp"
    android:textSize="14sp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="6dp"
    android:paddingBottom="6dp"
    tools:text="天猫精灵"
    android:textColor="@color/tagflow_tv_text"
    android:background="@drawable/tagflow_selector"
    android:text="Helloworld">
</TextView>

其中包含两个引用的资源文件：

（1）改变TextView字体颜色的选择器文件：R.color.tagflow_tv_text

（注意！这里是在res下新建资源文件夹color，再在下面创建tagflow_tv_text文件，而不是value文件夹的colors文件，你要注意了！）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:color="@color/white" android:state_checked="true" />
    <item  android:color="@color/dimgray" android:state_checked="false" />
</selector>

（2）改变TextView边框色和背景填充色的选择器文件：R.drawable.tagflow_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/flow_tv_select_shape" android:state_checked="true" />
    <item android:drawable="@drawable/flow_tv_shape" android:state_checked="false" />
</selector>

它其中包含两个shape文件，分别做点击和未点击时的背景色和描边框实现
（2.1）R.drawable.flow_tv_select_shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/blue"/>
    <stroke
        android:width="0.5dp"
        android:color="@color/color_84C6FA"/>
    <corners android:radius="4dp"/>
</shape>

（2.2）R.drawable.flow_tv_shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="0.5dp"
        android:color="@color/color_84C6FA"/>
    <corners android:radius="4dp"/>
</shape>

第五步：在activity中的逻辑代码

public class Case16 extends AppCompatActivity {
    private ArrayList<String> datas;
    private TagFlowLayout tagFlowLayout;
    private FlowTagAdapter flowTagAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_case16);
        //初始化数据
        initData();
        tagFlowLayout = (TagFlowLayout) findViewById(R.id.id_flowlayout);
        Log.d("onCreate:case16 ", "" + datas);
        flowTagAdapter = new FlowTagAdapter(this, datas);
        tagFlowLayout.setAdapter(flowTagAdapter);
    }

    private void initData() {
        datas = new ArrayList<String>();
        datas.add("林更新");
        datas.add("古力娜扎");
        datas.add("周星驰");
        datas.add("王源");
        datas.add("四千年难得一遇的美少女");
        datas.add("印度耍蛇人");
        datas.add("王建国");
        datas.add("易洋千玺");
        datas.add("花果山水帘洞齐天大圣孙悟空是也");
        datas.add("天猫精灵");
        datas.add("充电台灯");
        datas.add("睡衣");
        datas.add("创意水杯");
        datas.add("夏天T恤男");
        datas.add("灯光机械键盘");
        datas.add("计算机原理");
        datas.add("学霸笔记本");
        datas.add("可口可乐");
        datas.add("跑步机");
        datas.add("旅行箱");
        datas.add("竹浆卫生纸");
        datas.add("吹风机");
        datas.add("洗面奶");
        datas.add("窗帘");
    }
}

大功告成！

图示

 

流式布局点击后.jpeg

 

流式布局点击前.jpeg

作者：千夜零一
链接：https://www.jianshu.com/p/abc82fce0e1f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。