Android RecyclerView+CardView实现瀑布流效果

标签：

所需要的库及库工程

库:

android-support-v7-recyclerview.jar :v21.x

android-support-v4.jar :v21.x

库工程:

android-support-v7-appcompat:v21.x

android-support-v7-cardview

注意：cardView必须使用库工程，而不能使用jar包，原因是其引用了自定义属性

但是，如果必须要使用cardView而不导入工程，建议使用cardview源码，主要步骤如下：

①将自定义attr,color,dimens,styles拷贝至工程目录下

②修改源码中的 import android.support.v7.cardview.R; 成当前工程的R资源

③认真完成以上2步骤

效果预览

Activity文件

package st.app.base.rcp;

import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.internal.view.menu.MenuBuilder;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class WaterfallActivity extends ActionBarActivity {
	private Toolbar mToolbar;
	private RecyclerView mRecyclerView;
	private List<String> mDatas = null;
	
	private SimpleRecyclerCardAdapter mSimpleRecyclerAdapter;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		mToolbar = (Toolbar) findViewById(R.id.toolbar);  
		mRecyclerView = (RecyclerView) findViewById(R.id.app_recyclerview);
		
		initAppToolBar();
		initDataAndView();
	}
	
	private void initDataAndView() 
	{
		mDatas = new ArrayList<String>();
		for(int i=‘A‘;i<=‘z‘;i++)
		{
			mDatas.add(String.valueOf((char)i));
		}
		mSimpleRecyclerAdapter = new SimpleRecyclerCardAdapter(this, mDatas);
		mRecyclerView.setAdapter(mSimpleRecyclerAdapter);
		//设置网格布局管理器
		mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
		
	}
	/**
	 * init app bar
	 */
	private void initAppToolBar()
	{
		mToolbar.setNavigationIcon(R.drawable.ktv_ic_main_hot_pressed);
		mToolbar.setTitle("Rocko");// 标题的文字需在setSupportActionBar之前，不然会无效   
		mToolbar.inflateMenu(R.menu.main);
		setShortcutsVisible(mToolbar.getMenu());
		mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
		    @Override  
		    public boolean onMenuItemClick(MenuItem item) {  
		        switch (item.getItemId()) {  
		        case R.id.action_settings:  
		            break;  
		        case R.id.action_mail:  
		            break;  
		        case R.id.action_plus:
		        	break;
		        default:  
		            break;  
		        }  
		        return true;  
		    }  
		}); 
		
		mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				Log.e("Navigation", "Click");
			}
		});
	}
	private void setShortcutsVisible(Menu menu)
	{
		if(MenuBuilder.class.isInstance(menu))
		{
			MenuBuilder builder = (MenuBuilder) menu;
			builder.setShortcutsVisible(true);
			try {
					Method m = menu.getClass().getDeclaredMethod(
							"setOptionalIconsVisible", Boolean.TYPE);
					m.setAccessible(true);
					m.invoke(builder, true);
				} catch (Exception ie) {
			}
		}
	}
}

Adapter+ViewHolder

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.RecyclerView.ViewHolder;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class SimpleRecyclerCardAdapter  extends RecyclerView.Adapter<SimpleCardViewHolder>{

	private Context mCtx;
	private LayoutInflater mInflater;
	private final List<String> mDataSource = new ArrayList<String>(); 
	
	public SimpleRecyclerCardAdapter(Context mCtx, List<String> dataList) {
		super();
		this.mCtx = mCtx;
		mInflater = LayoutInflater.from(mCtx);
		this.mDataSource.addAll(dataList);
	}
	@Override
	public int getItemCount() {
		return mDataSource.size();
	}
	@Override
	public void onBindViewHolder(SimpleCardViewHolder viewHolder, int i) {
		viewHolder.itemTv.setText(mDataSource.get(i));
		int resId = mCtx.getResources().getIdentifier("img_"+i, "drawable", mCtx.getPackageName());
		if(resId!=0)
		{
			viewHolder.itemIv.setImageResource(resId);
		}
	}
	@Override
	public SimpleCardViewHolder onCreateViewHolder(ViewGroup viewgroup, int i) {
		
		View v =  mInflater.inflate(R.layout.simple_card_item, viewgroup,false);
		SimpleCardViewHolder simpleViewHolder = new SimpleCardViewHolder(v);
		simpleViewHolder.setIsRecyclable(true);
		
		return simpleViewHolder;
	}
}

class SimpleCardViewHolder extends ViewHolder
{
	public TextView itemTv;
	public ImageView itemIv;

	public SimpleCardViewHolder(View layout) {
		super(layout);
		itemTv = (TextView) layout.findViewById(R.id.item_title);
		itemIv = (ImageView) layout.findViewById(R.id.item_img);
	}
}

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/white"
    tools:context="st.app.base.rcp.MainActivity" >
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/material_deep_teal_500"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/AppBarTheme"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >
    </android.support.v7.widget.Toolbar>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/app_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />

</LinearLayout>

item布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardview"  
    android:layout_margin="0dp"  
    android:layout_height="83dp"
	app:cardBackgroundColor="@android:color/white" 
	app:cardCornerRadius="5dp"  
    app:cardElevation="5dp"
    app:contentPadding="5dip"
    android:layout_width="match_parent" >
    <RelativeLayout  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"
        >  
        <ImageView  
            android:id="@+id/item_img"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:layout_centerHorizontal="true"  
            android:scaleType="fitCenter" />  
        <TextView  
            android:id="@+id/item_title"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_below="@+id/item_img"  
            android:layout_centerHorizontal="true"  
            android:textColor="@color/material_deep_teal_500"
            android:paddingLeft="@dimen/activity_horizontal_margin"  
            android:paddingRight="@dimen/activity_horizontal_margin" />  
    </RelativeLayout>  
</android.support.v7.widget.CardView>

Android RecyclerView+CardView实现瀑布流效果

标签：

原文地址：http://my.oschina.net/ososchina/blog/491564