flow layout, 流式布局, 这个概念在移动端或者前端开发中很常见,特别是在多标签的展示中, 往往起到了关键的作用。
1.在 build.gradle 文件中增加依赖:
compile 'com.nex3z:flow-layout:0.1.4'
2.xml文件引用:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标签:"
android:textColor="@color/black"
android:textSize="16sp" />
<com.nex3z.flowlayout.FlowLayout
android:id="@+id/mflowlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/label"
android:layout_margin="10dp"
app:childSpacing="10dp"
app:rowSpacing="10dp">
</com.nex3z.flowlayout.FlowLayout>
<TextView
android:id="@+id/add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginStart="24dp"
android:padding="16dp"
android:text="添加" />
</RelativeLayout>
- app:childSpacing 每个标签的间距
- app:rowSpacing 行间距
3.Java代码实现
public class FlowLayoutActivity extends BaseActivity {
@BindView(R.id.mflowlayout)
FlowLayout mFlowLayout;
@BindView(R.id.add)
TextView add;
private int addNum = 0;
private String[] content = {"网游","小说迷","汪星人","棋类运动","骑行","很长很长很长的标签","还是很长很长的标签"};
private String[] more = {"标签1","标签22","标签3333","标签44444","标签555555","标签6666666"};
@Override
public int getLayoutId() {
return R.layout.activity_flow_layout;
}
@Override
public void initView() {
ButterKnife.bind(this);
}
@Override
public void initData() {
for (int i = 0;i < content.length;i++){
//创建一个Textview
final TextView view = new TextView(mActivity);
view.setText(content[i]);
view.setBackground(getResources().getDrawable(R.drawable.corner_theme_empty));
view.setTextColor(getResources().getColor(R.color.black));
//设置padding
int pxlr = view.getResources().getDimensionPixelOffset(R.dimen.divider_height_10dp);
int pxlb = view.getResources().getDimensionPixelOffset(R.dimen.divider_height_6dp);
view.setPadding(pxlr,pxlb,pxlr,pxlr);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//标签点击事件
showToast(view.getText().toString());
}
});
mFlowLayout.addView(view);
}
}
@Override
public void initListener() {
add.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (addNum <= more.length) {
final TextView view = new TextView(mActivity);
view.setText(more[addNum]);
view.setBackground(getResources().getDrawable(R.drawable.corner_theme_empty));
view.setTextColor(getResources().getColor(R.color.black));
int pxlr = view.getResources().getDimensionPixelOffset(R.dimen.divider_height_10dp);
int pxlb = view.getResources().getDimensionPixelOffset(R.dimen.divider_height_6dp);
view.setPadding(pxlr, pxlb, pxlr, pxlr);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showToast(view.getText().toString());
}
});
mFlowLayout.addView(view);
addNum++;
}
}
});
}
}