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