RecycleView和CardView的简单介绍和用法

很久之前在公司上遇到一个需求就是需要将ListView中的item布局改成每张每张卡片的那种样式，那时候还没接触到Design的各种UI框架，也算是挺久之前了。当时基本就慌了，心里骂了很多次什么傻B需求。后来也是自己找了挺久发现了RecylerView,也发现了Design,也学习了这些东西。今天旧事重谈，就写了个简单小Demo，因为在现在公司做的都是手环蓝牙方面的东西，把之前学过，弄过的东西都差不多忘了。做这样一种工作，不止要把自己学过的牢牢记住还得努力去吸收新的东西，趁年轻，不止要埋头拉车，还得抬头看路，歇下来还得回头看看走过的路。

好了，今天我要讲的是RecylerView配合CardView一起使用。RecylerView相信大家也不陌生，现在RecylerView也算是比较热，github上面也出现了RxRecylerView,LRecylerView，这些可以根据自己自己的需要去使用。使用比ListView来的方便，各方面优化做的也比ListView好。简单来说，ListView能干的，RecylerView也能做，RecylerView能做的，ListView做不了，也不是说做不了，只是实现起来比较麻烦。但是如果是简单的需求的话，还是使用ListView，这是个人见解而已。CardView的话,不知道大家接触过没有，简单来说可以看出一个容器，只是这个容器可以设置圆角和阴影等各种效果。使其看起来想悬浮着的Card似的。

好了，不扯了。简单来说下使用方法：

首先要想使用RecylerView和CardView的话需要先导入support-v7包下的RecylerView和CardView，在build.gradle文件下加入下面两句代码



然后就是我们的布局文件，添加RecylerView节点，activity_mian.xml:

<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.example.administrator.recyviewef.MainActivity">

<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>

布局很简单，是不是跟ListView一模一样。

大家想一下，我们用ListView的时候是不是需要一个Adapter和Item布局，RecyclerView这里也是一样的，只是它的Adapter有点不一样。首先我们看下Item的布局item_layout.xml：

<?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:layout_width="match_parent"
android:layout_height="100dp"
app:cardCornerRadius="20dp"
app:cardElevation="5dp"
android:layout_marginBottom="10dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="天气真好"
android:textSize="20sp"
android:textColor="#f00"/>

</LinearLayout>

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

因为我们今天是用CardView跟RecyclerView一起使用，所以我这里的item布局是用CardView作为容器的。需要添加

xmlns:app="http://schemas.android.com/apk/res-auto"

这个命名空间才能为CardView设置特有的属性，其中

app:cardCornerRadius="20dp"

表示的为CardView设置圆角，值越大，圆角则越大。

app:cardElevation="5dp"

表示的是CardView的悬浮阴影效果

布局文件之后就是RecyclerView的Adapter了。我们看下代码：

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{

private Context context;

public MyAdapter(Context context) {
this.context = context;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.item_layout, parent, false);

return new MyViewHolder(view);
}

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
TextView textView = (TextView) holder.itemView.findViewById(R.id.textView);
textView.setText("天气真好,打代码" + position);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context,"你哈",Toast.LENGTH_SHORT).show();
}
});
}

@Override
public int getItemCount() {
return 20;
}

class MyViewHolder extends RecyclerView.ViewHolder{
private View itemView;
public MyViewHolder(View itemView) {
super(itemView);
this.itemView = itemView;
}
}
}

可能大家第一次看到这个的话会有点懵逼。我简单介绍下，该Adapter需继承RecyclerVIew.Adapter<xxx>，其中 的泛型xxx需要的是继承于RecyclerView.ViewHolder的ViewHolder类，这应该是最原始的写法。我们在onCreateView()中生成一个View对象，然后把他作为参数传给之前泛型xxx的Holder对象并返回。在onBindViewHolder()中通过Holder得到布局中的控件并为它们设置值和点击事件。这样RecyclerView的简单Adapter算是配置完成了。

现在我们看下它的使用方法：

public class MainActivity extends AppCompatActivity {

private RecyclerView recycleView;
private MyAdapter myAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

recycleView = (RecyclerView) findViewById(R.id.recyclerView);

myAdapter = new MyAdapter(this);
recycleView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL,false));
//recycleView.setLayoutManager(new GridLayoutManager(this,2));
recycleView.setAdapter(myAdapter);
}
}

这里还得介绍一下，RecyclerView可以简单的使布局发生改变，比如：

recycleView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL,false));

这句代码可以使RecyclerView的item为线性排列。

recycleView.setLayoutManager(new GridLayoutManager(this,2));

这句可以使item像GridView那样布局。第二个参数代表的是列数。

简单吧。我们看下效果：





好了，今天就到这里。有错误欢迎指出。共勉！