引言
什么是流式布局？就是像水一样可以流动？不，之所以这样命名只是在强调它的不规则性，它会根据你的内容多少测量你需要的控件的尺寸，完成自定义的效果。之前我做过自定义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
网友评论