Android开发中RecycleView + CardView 控件

先上效果图：

原理图：

这是RecycleView的工作原理：
1.LayoutManager用来处理RecycleView的“列表”样式，Support包默认包含了：LinearLayoutManager  横向或纵向的滚动列表、
GridLayoutManager  网格列表、StaggeredGridLayoutManager  交错的网格列表。
2.Adapter负责处理RecycleView的数据和样式
3.在传统的ListView中有一种常见的写法是使用ViewHolder来缓存数据集，在新版的RecycleView内置了ViewHolder这一模块，所以在Adapter内部新建内部类ViewHolder。
4.RecycleView 和listView的一个区别就是本身不处理点击事件，点击事件应该绑在ViewHolder里面，可以直接写也可以通过接口绑在Adapter里面来实现。

 
首先添加数据集：

package com.lfk.drawapictiure.Info;
/**
 * Created by liufengkai on 15/9/13.
 */
public class MenuInfo {
    private String paint_name;
    private String paint_time;
    private String paint_root;
    private String paint_img_root;
    public MenuInfo(String paint_name, String paint_time,
                    String paint_root, String paint_img_root) {
        this.paint_name = paint_name;
        this.paint_time = paint_time;
        this.paint_root = paint_root;
        this.paint_img_root = paint_img_root;
    }
    public String getPaint_name() {
        return paint_name;
    }
    public String getPaint_time() {
        return paint_time;
    }
    public String getPaint_root() {
        return paint_root;
    }
    public String getPaint_img_root() {
        return paint_img_root;
    }
}

 
实现继承自RecycleView的Adapter中间要包裹自己实现的ViewHolder，onCreateviewHolder函数和onBindViewHolder实现了ListView里面getView的工作，分别为找到控件和控件赋值，

实现点击的接口，设置接口并且绑在ViewHolder的itemView里面即根视图中。

public class MainLayoutAdapter extends RecyclerView.Adapter {
    private LayoutInflater inflater;
    private ArrayList userList;
    private Context context;
    private MainItemClickListener itemClickListener;
    public MainLayoutAdapter(ArrayList userList, Context context) {
        this.userList = userList;
        this.context = context;
        this.inflater = LayoutInflater.from(context);
    }
    public void setItemClickListener(MainItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }
　　//onCreateviewHolder函数和onBindViewHolder实现了ListView里面getView的工作，分别为找到控件和控件赋值
    @Override
    public MainLayoutAdapter.MainViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View wrapper = inflater.inflate(R.layout.draw_item, parent, false);
        return new MainViewHolder(
                wrapper,
                (TextView)wrapper.findViewById(R.id.paint_name),
                (TextView)wrapper.findViewById(R.id.paint_time),
                (TextView)wrapper.findViewById(R.id.paint_root),
                (ImageView)wrapper.findViewById(R.id.paint_img));
    }
    @Override
    public void onBindViewHolder(MainViewHolder holder, int position) {
        MenuInfo menuInfo = userList.get(position);
        holder.paint_img.setImageURI(Uri.parse(menuInfo.getPaint_img_root()));
        holder.paint_name.setText(menuInfo.getPaint_name());
        holder.paint_time.setText(menuInfo.getPaint_time());
        holder.paint_root.setText(menuInfo.getPaint_root());
    }
    @Override
    public int getItemCount() {
        return userList.size();
    }
    public class MainViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener,View.OnLongClickListener{
        private TextView paint_name;
        private TextView paint_time;
        private TextView paint_root;
        private ImageView paint_img;
        public MainViewHolder(View itemView, TextView paint_name,
                          TextView paint_time, TextView paint_root,
                          ImageView paint_img) {
            super(itemView);
            itemView.setOnClickListener(this);
            this.paint_name = paint_name;
            this.paint_time = paint_time;
            this.paint_root = paint_root;
            this.paint_img = paint_img;
        }
        @Override
        public void onClick(View view) {
            MenuInfo menuInfo = userList.get(getAdapterPosition());
            itemClickListener.onItemClick(view,menuInfo.getPaint_name(),menuInfo.getPaint_root());
        }
        @Override
        public boolean onLongClick(View view) {
            return false;
        }
    }
}

Activity中的使用：

package com.lfk.drawapictiure.Fragment;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.lfk.drawapictiure.Adapter.MainLayoutAdapter;
import com.lfk.drawapictiure.Info.MenuInfo;
import com.lfk.drawapictiure.InterFace.MainItemClickListener;
import com.lfk.drawapictiure.MainActivity;
import com.lfk.drawapictiure.R;
import java.util.ArrayList;
public class PaintFragment extends android.support.v4.app.Fragment {
    private RecyclerView mRecyclerView;
    private MainLayoutAdapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;
    private String path = Environment.getExternalStorageDirectory().getPath() + "/DrawAPicture";
    public static PaintFragment newInstance() {
        return new PaintFragment();
    }
    public PaintFragment() {
        // Required empty public constructor
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View wrapper = inflater.inflate(R.layout.fragment_paint, container, false);
        mRecyclerView = (RecyclerView)wrapper.findViewById(R.id.paint_recycle_view);
        mLayoutManager = new LinearLayoutManager(getActivity());
        mRecyclerView.setLayoutManager(mLayoutManager); //绑上列表管理器
        ArrayList arrayList = new ArrayList<>();
        arrayList.add(new MenuInfo("刘丰恺","09-13 05:28",path+"/"+"12138.lfk",path+"/"+"6826.jpg"));
        arrayList.add(new MenuInfo("刘丰恺","09-13 05:28",path+"/"+"12138.lfk",path+"/"+"6826.jpg"));
        arrayList.add(new MenuInfo("刘丰恺","09-13 05:28",path+"/"+"12138.lfk",path+"/"+"6826.jpg"));
        arrayList.add(new MenuInfo("刘丰恺","09-13 05:28",path+"/"+"12138.lfk",path+"/"+"6826.jpg"));
        mAdapter = new MainLayoutAdapter(arrayList, getActivity());
　　　　　　// 设置点击事件
        mAdapter.setItemClickListener(new MainItemClickListener() {
            @Override
            public void onItemClick(View view, String name, String path) {
                Intent intent = new Intent(getActivity(), MainActivity.class);
                intent.setData(Uri.parse(path));
                startActivity(intent);
            }
        });
　　　　　　//绑定数据集
        mRecyclerView.setAdapter(mAdapter);
        return wrapper;
    }
}

其中的子布局使用了CardView:

我设置的东西只有：

card_view:cardCornerRadius="4dp"  //设定圆角半径
card_view:cardElevation="8dp"//设定阴影

selector"
    android:layout_
    android:layout_
    card_view:cardCornerRadius="4dp"
　　　　card_view:
    android:layout_margin="@dimen/card_margin">
    
        
        
        
        
        
    

Android L――RecyclerView,CardView导入和使用

这篇文章是ANDROID L――Material Design详解（UI控件）的一个补充或者说是应用实例，如果有时间建议大家稍微浏览一下上篇文章。

本文主要介绍Android L新增加的两个UI控件RecyclerView，CardView的导入和使用。
RecyclerView是ListView的升级版
CardView则是Google提供的一个卡片式视图组件


本例就是使用RecyclerView来展示多个CardView的一个小例子，先看下效果图：



导入RecyclerView,CardView


由于RecyclerView,CardView是放在support library v7包中，所以我们想要使用就必须要导包。

下面就介绍下在Eclipse和Android Studio中是如何导入这两个包的。


Eclipse：

第一步：通过SDK manager下载/更新Android Support Libraries（5.0版本最新为21）



第二步：导入CardView和RecyclerView项目（都在support v7中）

1.在Eclipse中点击Import，导入Android项目

2.导入CardView和RecycleView，路径为your sdk path\extras\android\support\v7\cardview（RecycleView则为相同目录下的recyclerview）

3.导入时记得将工程copy到本地并建议重命名，这样方便以后管理例如：

第三步：设置Library

1..将两个工程设置为Library
2..在主工程中引入这两个Library例如：

通过这三步就可以将这两个包导入进来了。



Android Studio

Android Stuido相对于Eclipse简单的多：

第一步：

首先要确保已经将Android Support Libraries升级到最新.


第二步：

打开项目中的build.gradle文件，在dependencies中添加如下代码。

dependencies {
    compile 'com.android.support:recyclerview-v7:21.+'
    compile 'com.android.support:cardview-v7:21.+'
}


第三步：

重新Build一下工程。

Build完成后就会发现这两个包就已经导入进来了



代码介绍：

主题：

首先这个黑色基调的主题是使用了Material.Dark.ActionBar样式。


设置方法：修改values-v21文件夹下styles.xml文件：

布局文件：

recycler_view.xml（RecyclerView布局文件）:

FrameLayout里包含了RecyclerView控件


card_view.xml（CardView布局文件）：

CardView视图中包含了一个ImageView和一个TextView分别显示图片和文字信息

唯一需要介绍的就是在布局文件中使用了，如下两个属性：

 card_view:cardBackgroundColor="@color/cardview_dark_background"
    card_view:cardCornerRadius="5dp"

他俩的作用分别是设置CardView的背景颜色和外围的圆角大小（注意要使用card_view命名空间）


代码：

Actor类（封装数据的Model类）：

public class Actor
{
    String name;
    String picName;
    public Actor(String name, String picName)
    {
        this.name = name;
        this.picName = picName;
    }
    public int getImageResourceId( Context context )
    {
        try
        {
            return context.getResources().getIdentifier(this.picName, "drawable", context.getPackageName());
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return -1;
        }
    }
}

封装了演员的名字和图片名，getImageResourceId()方法的作用就是根据图片命找到系统资源

MyActivity(程序主控制Activity)

public class MyActivity
    extends Activity
{
    private RecyclerView mRecyclerView;
    private MyAdapter myAdapter;
    private List actors = new ArrayList();
    private String[] names = { "朱茵", "张柏芝", "张敏", "巩俐", "黄圣依", "赵薇", "莫文蔚", "如花" };
    private String[] pics = { "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8" };
    @Override
    protected void onCreate( Bundle savedInstanceState )
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.recycler_view);
        actors.add(new Actor("朱茵", "p1"));
        getActionBar().setTitle("那些年我们追的星女郎");
        // 拿到RecyclerView
        mRecyclerView = (RecyclerView) findViewById(R.id.list);
        // 设置LinearLayoutManager
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        // 设置ItemAnimator
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        // 设置固定大小
        mRecyclerView.setHasFixedSize(true);
        // 初始化自定义的适配器
        myAdapter = new MyAdapter(this, actors);
        // 为mRecyclerView设置适配器
        mRecyclerView.setAdapter(myAdapter);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()) {
            // 当点击actionbar上的添加按钮时，向adapter中添加一个新数据并通知刷新
            case R.id.action_add:
                if (myAdapter.getItemCount() != names.length) {
                    actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()]));
                    mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
                    myAdapter.notifyDataSetChanged();
                }
                return true;
            // 当点击actionbar上的删除按钮时，向adapter中移除最后一个数据并通知刷新
            case R.id.action_remove:
                if (myAdapter.getItemCount() != 0) {
                    actors.remove(myAdapter.getItemCount()-1);
                    mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);
                    myAdapter.notifyDataSetChanged();
                }
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

MyAdapter（自定义适配器类）

public class MyAdapter
    extends RecyclerView.Adapter
{
    private List actors;
    private Context mContext;
    public MyAdapter( Context context , List actors)
    {
        this.mContext = context;
        this.actors = actors;
    }
    @Override
    public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )
    {
        // 给ViewHolder设置布局文件
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);
        return new ViewHolder(v);
    }
    @Override
    public void onBindViewHolder( ViewHolder viewHolder, int i )
    {
        // 给ViewHolder设置元素
        Actor p = actors.get(i);
        viewHolder.mTextView.setText(p.name);
        viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));
    }
    @Override
    public int getItemCount()
    {
        // 返回数据总数
        return actors == null ? 0 : actors.size();
    }
    // 重写的自定义ViewHolder
    public static class ViewHolder
        extends RecyclerView.ViewHolder
    {
        public TextView mTextView;
        public ImageView mImageView;
        public ViewHolder( View v )
        {
            super(v);
            mTextView = (TextView) v.findViewById(R.id.name);
            mImageView = (ImageView) v.findViewById(R.id.pic);
        }
    }
}

所有代码介绍完毕了，可以总结为以下两点：

RecyclerView：

理解为之前的ListView，不过需要设置LinearLayoutManager（目前资料不多我也有点迷糊以后再补充）和ItemAnimator（为每个条目设置操作动画）两个新属性

RecyclerView.Adapter：

理解为默认自带和基于ViewHolder的新的适配器，只不过回调方法稍有不同，但本质都是一样的。