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

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

其实我很好

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

![瀑布流布局.png](https://img.haomeiwen.com/i1996273/c7cd04e9c6683357.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


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

<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="@android:color/white"
app:cardCornerRadius="5dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:layout_margin="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="10dp"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:layout_gravity="center_horizontal"
android:id="@+id/face"
android:layout_width="70dp"
android:layout_height="70dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/item_title_tv"
android:layout_width="wrap_content"
android:textColor="#383838"
android:textSize="20sp"
android:textStyle="bold"
android:layout_height="wrap_content"
android:text="title"/>
<TextView
android:id="@+id/item_content_tv"
android:textColor="#545454"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="哈哈哈哈哈"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>

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

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

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

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.huan.percy.recycleviewandcardview.MainActivity"
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>

######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);
}
}
}