RecyclerView+CardView实现横向卡片式滑动效果

现在来介绍两种控件recyclerview和cardview，并通过实例将它们结合在一起实现一种横向卡片式滑动效果.

1.recyclerview

recyvlerview是android sdk 新增加的一种控件，也被官方推荐代替listview来使用，因为其具有更好的灵活性和代替性。

2.cardview

cardview是安卓5.0推出的一种卡片式控件，内部封装了许多有用的方法来实现美观效果。

3.如何使用recylerview和cardview在android studio中

在build.gradle中添加依赖再编辑即可

compile 'com.android.support:recyclerview-v7:25.+'
compile 'com.android.support:cardview-v7:25

4.通过实例，使用两种控件实现横向卡片式滑动效果

建立main.xml布局文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       xmlns:app="http://schemas.android.com/apk/res-auto">

  <android.support.v7.widget.recyclerview
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/recycler_view"
    >

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

</linearlayout>

使用过listview的同学应该知道还需要一个子布局来填充recyclerview
以下为recyclerview_item.xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
                  xmlns:app="http://schemas.android.com/apk/res-auto"
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/recyclerview_item"
       android:padding="30dp"

  >

  <android.support.v7.widget.cardview
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:contentpadding="50dp"
    app:cardcornerradius="20dp"
    android:clickable="true"

    android:foreground="?android:attr/selectableitembackground"
    app:cardelevation="@dimen/cardview_compat_inset_shadow"
    app:cardbackgroundcolor="@color/cardview_light_background">

    <linearlayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <textview
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="作者"
        android:textsize="22dp"/>
    </linearlayout>

    <linearlayout
      android:layout_width="match_parent"
      android:layout_height="114dp"
      >
      <textview
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="
        锄禾日当午，汗滴禾下土"

        android:textsize="22dp"/>
    </linearlayout>
  </android.support.v7.widget.cardview>
</linearlayout>

从代码中，我们会发现使用了cardview控件以及在控件中添加简易的两个textview

现在来介绍cardview的一些常用属性，这也是现在卡片效果的关键所在

card_view:contentpadding 这个可以给你的内容加上padding属性
card_view:cardbackgroundcolor这个可以改变cardview的背景
card_view:cardcornerradius这个可以改变cardview圆角的大小
card_view:cardelevation这个比较难解释，cardview的z轴阴影，被用来决定阴影的大小以及柔和度，以至于可以逼真的模拟出对于深度效果的描述。说白点可以理解为阴影的大小
andorid:foreground=”?android:attr/selectableitembackground” 这个可以使cardview被点击后出现波纹效

通过以上常用属性可以使cardview出现各种不同的效果

现在回到activity中来实现recyclerview

跟listview的一样，我们需要写一个适配器，代码如下：

public class recyclerviewadapter extends recyclerview.adapter {
  private list<databean> lists;
  private context context;

  public recyclerviewadapter(list<databean> lists, context context) {
    this.lists = lists;
    this.context = context;
  }

  class myholder extends recyclerview.viewholder{

    private textview tv1,tv2;
    public myholder(view itemview) {
      super(itemview);
      tv1= (textview) itemview.findviewbyid(r.id.tv1);
      tv2= (textview) itemview.findviewbyid(r.id.tv2);


    }
  }

  @override
  public recyclerview.viewholder oncreateviewholder(viewgroup parent, int viewtype) {
    myholder holder =new myholder(layoutinflater.from(parent.getcontext()).inflate(r.layout.recyclerview_item,parent,false));
    return holder;
  }

  @override
  public void onbindviewholder(recyclerview.viewholder holder, int position) {
    log.d("tag", "onbindviewholder: "+lists.get(position).getautor());
    ((myholder)holder).tv1.settext(lists.get(position).getautor());
    ((myholder)holder).tv2.settext(lists.get(position).getcontent());

  }

  @override
  public int getitemcount() {
    return lists.size();
  }
}

写一个类继承recyclerview.adapter，重写recyclerview.adapter的三个重要方法 onbindviewholder（） getitemcount() 和 oncreateviewholder()

oncreateviewholder(): 创建新的view,被layoutmanager所调用
onbindviewholder():将数据与界面进行绑定
getitemcount() :返回数据的数量

在activity中，代码如下：

public class frament1 extends android.support.v4.app.fragment{

  private toolbar toolbar1;
  private recyclerview recycler_view;
  private textview tv1,tv2;
  private view view;
  private list<databean> lists;


  @override
  public void onattach(context context) {

    super.onattach(context);
  }

  @nullable
  @override
  public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
    sethasoptionsmenu(true);
     view = inflater.inflate(r.layout.fragment1, container, false);

    initview();
    initdata();
    linearlayoutmanager m=new linearlayoutmanager(getcontext());
    m.setorientation(linearlayoutmanager.horizontal);
    recycler_view.setlayoutmanager(m);
    recyclerviewadapter adapter=new recyclerviewadapter(lists,getcontext());
    recycler_view.setadapter(adapter);


    return view;
  }

  @override
  public void onresume() {
    super.onresume();

  }

  private void initdata() {
    lists=new arraylist<>();
    lists.add(new databean("smart","青青原上草，一岁一枯荣"));
    lists.add(new databean("smart","青青原上草，一岁一枯荣"));
    lists.add(new databean("smart","青青原上草，一岁一枯荣"));
    lists.add(new databean("smart","青青原上草，一岁一枯荣"));
    lists.add(new databean("smart","青青原上草，一岁一枯荣"));
    lists.add(new databean("smart","青青原上草，一岁一枯荣"));

  }

  private void initview() {
    recycler_view= (recyclerview) view.findviewbyid(r.id.recycler_view);
    tv1= (textview) view.findviewbyid(r.id.tv1);
    tv2= (textview) view.findviewbyid(r.id.tv2);


  }
}

在代码中，我们获取layoutmanager对象,设置其方向为水平方向，并设置recyclerview的layoutmanager

然后实例化adapter对象，传入上下文和假数据lists，并设置recyclerview.adapater

 linearlayoutmanager m=new linearlayoutmanager(getcontext());
    m.setorientation(linearlayoutmanager.horizontal);
    recycler_view.setlayoutmanager(m);
    recyclerviewadapter adapter=new recyclerviewadapter(lists,getcontext());
    recycler_view.setadapter(adapter);

到此基本步骤已经完成，运行程序。

以下为运行截图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。