引言

??什么是流式布局？就是像水一樣可以流動？不，之所以這樣命名只是在強調它的不規則性，它會根據你的內容多少測量你需要的控件的尺寸，完成自定義的效果。之前我做過自定義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