RecyclerView嵌套CardView，并实现瀑布流布局

Demo:https://github.com/HunSem/RecycleViewAndCardView

其实我很好

- 关于RecyclerView强大的功能不再赘述，这里主要讲述将CardView作为RecyclerView的item，并实现瀑布流布局方法。

![瀑布流布局.png](http://upload-images.jianshu.io/upload_images/1996273-c7cd04e9c6683357.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


######1. 新建list_item.xml文件，用于规划一个item，也就是一个CardView的布局

>tip 1: 如上图代码所示，在CardView的外层包裹了一层LinearLayout，并设置其属性android:layout_margin="5dp"，表示每个item之间的间隔。如果不这样做的话在运行时，每个item之间是没有间隔，全部连在一起的。

>tip 2: 为了实现瀑布流的布局，CardView的Width(宽度)固定使用match_parent，height(高度)随内容而改变使用使用wrap_content。

######2. 在主布局文件中声明RecyclerView

######3. 创建自定义适配器MyAdapter
为了后期在实现数据上拉加载更多，便于定位，下来刷新便于固定当前位置，采用链表结构在存储数据，便于直接在头节点处添加数据项。

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private LinkedList<Map<String, Object>> list;
public MyAdapter(LinkedList<Map<String, Object>> list) {
this.list = list;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View view = View.inflate(viewGroup.getContext(), R.layout.list_item, null);
return new ViewHolder(view);
}
//在控件中绑定数据
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
viewHolder.title_tv.setText(list.get(i).get("title").toString());
viewHolder.content_tv.setText(list.get(i).get("content").toString());
viewHolder.face.setImageResource((int)list.get(i).get("face"));
}
@Override
public int getItemCount() { return list.size(); }
//将控件与ViewHolder进行绑定
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView title_tv;
public TextView content_tv;
public ImageView face;
public ViewHolder(View itemView) {
super(itemView);
title_tv = (TextView) itemView.findViewById(R.id.item_title_tv);
content_tv = (TextView)
itemView.findViewById(R.id.item_content_tv);
face = (ImageView) itemView.findViewById(R.id.face);
}
}
}

######4. MainActivity中模拟数据

public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
//用于保存数据
private LinkedList<Map<String, Object>> products = new LinkedList<Map<String, Object>>();
private String content = "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n" +
"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n" +
"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n" +
"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n" +
"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n" +
"哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initVar();
initView();
}
private void initView() {
recyclerView= (RecyclerView) findViewById(R.id.recyclerView);
//设置并列2行的layoutManager，实现瀑布流布局
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
//设置线性布局的layoutManager
//LinearLayoutManager linearLayoutManager = new
LinearLayoutManager(this);
//recyclerView.setLayoutManager(linearLayoutManager);
//设置adapter
MyAdapter adapter=new MyAdapter(products);
recyclerView.setAdapter(adapter);
}
//新建一些数据
private void initVar() {
for (int i = 0; i<20; i++){
Map<String, Object> listItem = new HashMap<String, Object>();
if (i % 2 == 0){
listItem.put("title", "title"+ i);
listItem.put("content", content+ i);
} else {
listItem.put("title", "title "+ i);
listItem.put("content", "content" + i);
}
listItem.put("face", R.drawable.heroes_16);
products.add(listItem);
}
}
}

RecyclerView嵌套CardView，并实现瀑布流布局

其实我很好

推荐阅读更多精彩内容