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

引言

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

---

效果预览

流式布局.gif

---

用法

第一步：添加依赖

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

第二步：布局文件

一定要记住，你现在用的式弘洋大神已经自定义好了的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 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

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

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

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

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

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

（2.2）R.drawable.flow_tv_shape

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

public class Case16 extends AppCompatActivity {
    private ArrayList 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();
        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