Android RecyclerView的StaggeredGridLayoutManager和CardView



《Android RecyclerView的StaggeredGridLayoutManager和CardView》

StaggeredGridLayoutManager，顾名思义，”交错排列的Grid”，在RecyclerView中可以将元素分列编排下去。
我在之前的文章中分别介绍了RecyclerView（参考文章：http://blog.csdn.net/zhangphil/article/details/45170845 ）和CardView（参考文章：http://blog.csdn.net/zhangphil/article/details/47440135 ），本文则结合RecyclerView和CardView，使用StaggeredGridLayoutManager实现“瀑布流式”的“ListView”。

现给出代码。

测试用的主Activity ：MainActivity.java

package zhangphil.view;

import java.util.ArrayList;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);

// 两列
int spanCount = 2;

// StaggeredGridLayoutManager管理RecyclerView的布局。
RecyclerView.LayoutManager mLayoutManager = new StaggeredGridLayoutManager(
spanCount, StaggeredGridLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(mLayoutManager);

ArrayList<String> data = new ArrayList<String>();
// 测试数据集
for (int i = 0; i < 100; i++)
data.add("测试数据" + i);

MyAdapter mAdapter = new MyAdapter(data);
mRecyclerView.setAdapter(mAdapter);
}

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

private ArrayList<String> data = null;

public MyAdapter(ArrayList<String> data) {
this.data = data;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(
R.layout.card_view, null);
MyViewHolder myViewHolder = new MyViewHolder(view);
return myViewHolder;
}

@Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}

@Override
public void onBindViewHolder(MyViewHolder viewHolder, int position) {
viewHolder.position = position;
String s = data.get(position);
viewHolder.text.setText(s);
}

@Override
public int getItemCount() {
return data.size();
}
}

private class MyViewHolder extends RecyclerView.ViewHolder {
public ImageView img;
public TextView text;

// 埋入一个值position,记录在RecyclerView的位置。
private int position;

public MyViewHolder(View itemView) {
super(itemView);

// 为RecyclerView的子item增加点击事件。
itemView.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "点击:" + position,
Toast.LENGTH_SHORT).show();
}
});

img = (ImageView) itemView.findViewById(R.id.img);
img.setImageResource(R.drawable.ic_launcher);
text = (TextView) itemView.findViewById(R.id.txt);
}
}
}

MainActivity.java需要的布局文件。

activity_main.xml：

<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" >
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</RelativeLayout>

card_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardBackgroundColor="@android:color/white"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp" >

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"/>

<TextView
android:id="@+id/txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/img"
android:layout_alignParentBottom="true"
android:gravity="center" />
</RelativeLayout>

</android.support.v7.widget.CardView>

运行结果：