很久之前在公司上遇到一个需求就是需要将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那样布局。第二个参数代表的是列数。
简单吧。我们看下效果:
好了,今天就到这里。有错误欢迎指出。共勉!