Android RecyclerView的StaggeredGridLayoutManager和CardView

缺乏、安全感 2023-10-16 22:05 6阅读 0赞

**《Android RecyclerView的StaggeredGridLayoutManager和CardView》**

StaggeredGridLayoutManager，顾名思义，”交错排列的Grid”，在RecyclerView中可以将元素分列编排下去。  
我在之前的文章中分别介绍了RecyclerView（参考文章：[http://blog.csdn.net/zhangphil/article/details/45170845][http_blog.csdn.net_zhangphil_article_details_45170845] ）和CardView（参考文章：[http://blog.csdn.net/zhangphil/article/details/47440135][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：

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>

运行结果：

![Center][]

[http_blog.csdn.net_zhangphil_article_details_45170845]: http://blog.csdn.net/zhangphil/article/details/45170845
[http_blog.csdn.net_zhangphil_article_details_47440135]: http://blog.csdn.net/zhangphil/article/details/47440135
[Center]: https://img-blog.csdn.net/20150813090459971?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center