前言
我们经常会遇到那种标签式的布局,宽度固定高度不固定,每个标签的宽度还不固定,这种我们一般称之为"流式布局",下面我就简单实现下
FlexboxLayoutManager+ RecyclerView实现流式布局
这个很简单,就跟我们平时使用RecyclerView
是一样的,只不过设置LayoutManager
的时候换成FlexboxLayoutManager
具体我们先看效果
这里我们简单帖下代码
首先引入相应的依赖
implementation 'androidx.recyclerview:recyclerview:1.2.0-alpha01'
implementation 'com.google.android:flexbox:1.1.0'
接下来就和我们平时一样了
public class RecyclerViewActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler_view);
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(new FlexboxLayoutManager(this));
FlowRecyclerViewAdapter adapter = new FlowRecyclerViewAdapter(DataManager.getData());
recyclerView.setAdapter(adapter);
}
}
public class FlowRecyclerViewAdapter extends RecyclerView.Adapter<FlowRecyclerViewAdapter.ViewHolder> {
private List<String> mDataList;
public FlowRecyclerViewAdapter(List<String> list) {
mDataList = list;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_flow, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
holder.mTextView.setText(mDataList.get(position));
}
@Override
public int getItemCount() {
return mDataList == null ? 0 : mDataList.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
private TextView mTextView;
public ViewHolder(@NonNull View itemView) {
super(itemView);
mTextView = itemView.findViewById(R.id.tv_item);
}
}
}
自定义View
这种就是我们自己实现这个效果了,如果你是在不想自己写可以使用现成的,原理都差不多,这里用的是张红洋大神写的一个
我们先看看效果
具体的原理这里就不多说了,感兴趣的可以看看源码
我们下面帖下用法
public class FlowLayoutActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flow_layout);
TagFlowLayout tagFlowLayout = findViewById(R.id.flow_layout);
FlowAdapter adapter = new FlowAdapter(DataManager.getData());
tagFlowLayout.setAdapter(adapter);
}
}
public class FlowAdapter extends TagAdapter<String> {
public FlowAdapter(List<String> datas) {
super(datas);
}
@Override
public View getView(FlowLayout parent, int position, String s) {
ItemView itemView = new ItemView(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_flow, parent, false));
itemView.mTextView.setText(s);
return itemView.itemView;
}
class ItemView extends RecyclerView.ViewHolder {
private TextView mTextView;
ItemView(@NonNull View itemView) {
super(itemView);
mTextView = itemView.findViewById(R.id.tv_item);
}
}
}
public class DataManager {
public static List<String> getData() {
List<String> list = new ArrayList<>();
list.add("Test");
list.add("Test Android");
list.add("Test Java");
list.add("Test Python");
list.add("Test 444444444444455555555555544444444444444");
list.add("Test");
list.add("Test Android");
list.add("Test Java");
list.add("Test Python");
list.add("Test 666666");
list.add("Test");
list.add("Test Android");
list.add("Test Java");
list.add("Test Python");
list.add("Test 88888888888888888");
return list;
}
}