Android RecyclerView的StaggeredGridLayoutManager和CardView


《Android RecyclerView的StaggeredGridLayoutManager和CardView》
StaggeredGridLayoutManager，顾名思义，”交错排列的Grid”，在RecyclerView中可以将元素分列编排下去。

我在之前的文章中分别介绍了RecyclerView（参考文章：/article/1810730.html ）和CardView（参考文章：/article/1810696.html
），本文则结合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>

运行结果：