RecyclerView的使用
今天关于是写ListView还是RecyclerView着实纠结了一会，毕竟这二者都很重要，不过最近做的东西里用的是RecyclerView，所以还是先写RecyclerView了，而且代码也撸好了。好了日常唠嗑（1/1），下面进入正题。
本文包含以下几个方面：
- 使用RecyclerView实现ListView的效果
- RecyclerView加载图片出现OOM时的一些处理
- RecyclerView实现瀑布流
- RecyclerView滑动卡顿的一些优化
RecyclerView与ListView原理是类似的：都是仅仅维护少量的View并且可以展示大量的数据，不过RecyclerView相比ListView更加高级和灵活。RecyclerView本身只负责View的回收和复用，这从它名字本身也能看出一些端倪。既然RecyclerView只关心View的回收和复用，那么这玩意到底该怎么才能玩起来？
好问题，虽然是我自己问的……借用一句别人说的：真正牛逼的人是不需要什么都管的，只要底下有人就行。LayoutManager负责Item布局和展示,Item之间的间隔由ItemDecoration来解决，Item的增加与删除的动画由ItemAnimator来解决，Adapter用来将数据与Item界面绑定。
好了作了基本的了解，开始上码吧，有关如何在Android Studio中使用RecyclerView和我的代码获取方法，将在文末作相应的说明。首先第一要实现的，就是和ListView类似的效果，先看效果图，原谅我不会做动图……
效果1
效果2
好了，看完效果，开码，首先是主界面的xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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.luo_pc.testforrecyclerview.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
</LinearLayout>
没啥玩意，就是一个线性布局里加一个RecyclerView，接下来与ListView一样，列表item的xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#ffffff"
>
<ImageView
android:id="@+id/iv_item_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/tv_item_desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#000000"
/>
</LinearLayout>
主界面代码：
public class SecondActivity extends AppCompatActivity{
private ArrayList<ItemBean> itemList;
private RecyclerView rv_test;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rv_test = (RecyclerView) findViewById(R.id.rv_test);
initData();
//设置线性layoutManager
rv_test.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
mAdapter myAdapter = new mAdapter();
//设置myAdapter的数据
myAdapter.setData(itemList);
//设置Adapter
rv_test.setAdapter(myAdapter);
}
private void initData(){
itemList = new ArrayList<ItemBean>();
itemList.add(new ItemBean(R.drawable.bird, "南小鸟1"));
itemList.add(new ItemBean(R.drawable.xiyangyang, "喜羊羊"));
itemList.add(new ItemBean(R.drawable.bird3, "南小鸟2"));
itemList.add(new ItemBean(R.drawable.blackcat, "黑猫"));
itemList.add(new ItemBean(R.drawable.dog, "狗与剪刀"));
itemList.add(new ItemBean(R.drawable.nike3, "妮可妮可"));
itemList.add(new ItemBean(R.drawable.paojie, "炮姐"));
itemList.add(new ItemBean(R.drawable.saber1, "吾王1"));
itemList.add(new ItemBean(R.drawable.saber2, "吾王2"));
}
}
上面的ItemBean代码：
public class ItemBean {
//R.drawable....
private int img;
private String desc;
public ItemBean(int img,String desc){
this.img = img;
this.desc = desc;
}
public int getImg(){
return img;
}
public void setImg(int img) {
this.img = img;
}
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
}
接下来就是重头戏了，Adapter的代码。我们需要创建一个类继承RecyclerView.Adapter，以此来创建RecyclerView的适配器，继承RecyclerView.Adapter需要实现 onCreateViewHolder()、onBindViewHolder()和getItemCount()方法，而onCreateView的返回值是RecyclerView.ViewHolder，所以我们需要创建一个RecyclerView.ViewHolder。而RecyclerView.ViewHolder是一个抽象类，所以我们必须新建一个类继承该类，该抽象类中的构造函数也必须实现。说了这么多，可能有点绕，让我们从代码中学习如何操作。
class mAdapter extends RecyclerView.Adapter{
//数据
private ArrayList<ItemBean> itemList;
// private ImageResizer imgResizer = new ImageResizer();
//设置数据
private void setData(ArrayList<ItemBean> itemList){
this.itemList = itemList;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//得到item的view
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_item, parent, false);
//返回viewholder
return new mViewHolder(view);
}
//绑定数据
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
ItemBean it = itemList.get(position);
mViewHolder mholder = (mViewHolder)holder;
//设置imageView的图片
mholder.iv_item_img.setImageResource(it.getImg());
// mholder.iv_item_img.setImageBitmap(imgResizer.decodeSampledBitmapFromResource(getResources(),it.getImg()));
//设置textView的文字
mholder.tv_item_desc.setText(it.getDesc());
}
@Override
public int getItemCount() {
return itemList.size();
}
class mViewHolder extends RecyclerView.ViewHolder{
ImageView iv_item_img;
TextView tv_item_desc;
public mViewHolder(View itemView) {
super(itemView);
iv_item_img = (ImageView) itemView.findViewById(R.id.iv_item_img);
tv_item_desc = (TextView)itemView.findViewById(R.id.tv_item_desc);
}
}
}
我这有些地方写的不是很好，在写一个类继承RecyclerView.Holder时这么写会更好
class mAdapter extends RecyclerView<mViewHolder>{}
如此在onBindViewHolder方法中便可以直接使用holder了，而不必再强转。
好了代码也写完了，是时候跑一波了！我的图片都是在百度上找的，随便下了那么几张。跑的时候果然不负我望，OOM!
OOM
诶？OOM？那么我之前放的效果图是怎么回事？没错……我压缩了一下图片，才跑出来开头放的效果图……关于该如何操作，容我细细道来。
我从网上下的图都是比较大的，大多为jpg格式，用个看图软件打开显示是1125*1674像素在windows系统上是436K大小。对于jpg我不太了解，只知道这换算成ARGB_8888每个像素占4byte，得7M了。而且
反正是OOM了，容我说一下我的处理方法：
压缩
图片有不同的形状与大小。在大多数情况下它们的实际大小都比需要呈现的尺寸大很多。考虑到在有限的内存下工作，理想情况是我们只需要在内存中加载一个低分辨率的图片即可。
BitmapFactory提供了一些解码的方法，用来从不同的资源中创建一个Bitmap。每一种解码方法都可以通过BitmapFactory.Options设置一些附加的标记，以此来指定解码选项。设置inJustDecodeBounds属性为true可以在解码的时候获取到图片的原始宽/高信息，并不会真正的去加载图片。
获取到图片的宽高意义何在呢？你可能会有这样的疑问，事实上只要指定Options的inSampleSize并在decode时传入Options，再将inJustDecodeBounds设置为false，就可以获得压缩后的Bitmap。而我们获取了原始图片的宽高，就可以根据我们所需要的宽高计算出压缩的比例。例如一个ARGB_8888的Bitmap分辨率为2048x1536直接加载所需的内存是12M，而指定inSampleSize为4，那么会得到一个512x384的Bitmap，所需的内存仅为0.75M。
上代码：
public static Bitmap decodeBitmapFromResource(Resources res,int resId,int reqWidth,int reqHeight){
BitmapFactory.Options options = new BitmapFactory.Options();
//可以只获取宽高而不加载
options.inJustDecodeBounds = true;
BitmapFactory.decodeResource(res,resId,options);
//计算压缩比例
options.inSampleSize = calculateInSampleaSize(options,reqWidth,reqHeight);
//解码
options.inJustDecodeBounds = false;
return BitmapFactory.decodeResource(res,resId,options);
}
private static int calculateInSampleaSize(BitmapFactory.Options options, int reqWidth, int reqHeight) {
// 图片的高宽
final int height = options.outHeight;
final int width = options.outWidth;
//默认不压缩
int inSampleSize = 1;
if (height > reqHeight || width > reqWidth) {
final int halfHeight = height / 2;
final int halfWidth = width / 2;
while ((halfHeight / inSampleSize) > reqHeight
&& (halfWidth / inSampleSize) > reqWidth) {
//这里设置inSampleSize为2的幂是因为解码器最终还是会对非2的幂的数进行向下处理，
// 获取到最靠近2的幂的数
inSampleSize *= 2;
}
}
return inSampleSize;
}
当我们使用ImageView加载期望大小为100*100像素的图片时就可以按照如下格式写：
mImageView.setImageBitmap(
decodeBitmapFromResource(getResources(),R.id.drawa,100,100));
压缩的流程大概就到这了，继续回到RecyclerView，上面的代码实现了和ListView类似的效果，接下来要实现的是瀑布流的效果。说的高大上，其实大致流程与之前差不多，不过改一下LayoutManager就行了，直接上完整的代码：
public class MainActivity extends AppCompatActivity {
private RecyclerView rv_test;
private ArrayList<ItemBean> itemList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
rv_test = (RecyclerView) findViewById(R.id.rv_test);
//设置layoutManager
rv_test.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
myAdapter mAdapter = new myAdapter();
mAdapter.setItemList(itemList);
rv_test.setAdapter(mAdapter);
}
private void initData() {
itemList = new ArrayList<ItemBean>();
itemList.add(new ItemBean(R.drawable.bird, "南小鸟1"));
itemList.add(new ItemBean(R.drawable.xiyangyang, "喜羊羊"));
itemList.add(new ItemBean(R.drawable.bird3, "南小鸟2"));
itemList.add(new ItemBean(R.drawable.blackcat, "黑猫"));
itemList.add(new ItemBean(R.drawable.dog, "狗与剪刀"));
itemList.add(new ItemBean(R.drawable.nike3, "妮可妮可"));
itemList.add(new ItemBean(R.drawable.paojie, "炮姐"));
itemList.add(new ItemBean(R.drawable.saber1, "吾王1"));
itemList.add(new ItemBean(R.drawable.saber2, "吾王2"));
}
class myAdapter extends RecyclerView.Adapter {
private ArrayList<ItemBean> ItemList;
ImageResizer imgResizer = new ImageResizer();
BitmapMemoryCache lruBitmapCache = new BitmapMemoryCache();
public void setItemList(ArrayList<ItemBean> ItemList) {
this.ItemList = ItemList;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_item, parent, false);
return new myViewHolder(view);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
myViewHolder mholder = (myViewHolder) holder;
ItemBean it = itemList.get(position);
if(lruBitmapCache.getBitmapFromMemory(it.getDesc()) != null){
mholder.iv_item_img.setImageBitmap(lruBitmapCache.getBitmapFromMemory(it.getDesc()));
}else{
//缓存图片
lruBitmapCache.addBitmapToMemory(it.getDesc(),imgResizer.decodeSampledBitmapFromResource(getResources(),
it.getImg()));
mholder.iv_item_img.setImageBitmap(imgResizer.decodeSampledBitmapFromResource(getResources(),
it.getImg()));
}
mholder.tv_item_desc.setText(it.getDesc());
}
@Override
public int getItemCount() {
return ItemList.size();
}
class myViewHolder extends RecyclerView.ViewHolder {
ImageView iv_item_img;
TextView tv_item_desc;
public myViewHolder(View itemView) {
super(itemView);
iv_item_img = (ImageView) itemView.findViewById(R.id.iv_item_img);
tv_item_desc = (TextView) itemView.findViewById(R.id.tv_item_desc);
}
}
}
}
效果图：
瀑布流
其中有两个类是之前没有的，ImageResizer和BitmapMemoryCache，前者是用来压缩的，后者是用来缓存的。因为是瀑布流，所以我没有设置期望的宽高，直接设置inSampleSize为4，压缩之后图片还是大了，在滑动的时候列表有卡顿现象，所以做了LruCache。大致就是这样，代码如下：
ImageResizer
public class ImageResizer {
public Bitmap decodeSampledBitmapFromResource(Resources res, int resId) {
BitmapFactory.Options options = new BitmapFactory.Options();
//解析图片而不会真正的加载
options.inJustDecodeBounds = true;
BitmapFactory.decodeResource(res, resId, options);
options.inSampleSize = 4;
options.inJustDecodeBounds = false;
return BitmapFactory.decodeResource(res,resId,options);
}
}
BitmapMemoryCache
public class BitmapMemoryCache {
private final String TAG = "BitmapMemoryCache";
int maxMemory = (int)(Runtime.getRuntime().maxMemory() / 1024);
int catchSize = maxMemory / 8;
LruCache<String,Bitmap> lruCache = new LruCache<String,Bitmap>(catchSize){
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getRowBytes() * value.getHeight() / 1024;
}
};
public void addBitmapToMemory(String key,Bitmap bitmap){
if(getBitmapFromMemory(key) == null){
lruCache.put(key,bitmap);
Log.i(TAG," "+maxMemory);
}
}
public Bitmap getBitmapFromMemory(String key){
return lruCache.get(key);
}
}
做了缓存之后，第一次滑动……说实话还是有点卡，但是之后的确没有卡顿的现象了。果然人不能作死，没事加载大图作死不好！这里因为我的图比较少，从打的log来看我手机为一个app分配的内存是128M，1/8的内存16M来做缓存够了。如果图片比较多，内存做缓存不够的话，可以考虑用DisLruCache，不过sdk里是没有的，需要去下。关于滑动的优化还没有说完，不过今天暂时不打算继续了，明天或者有空的时候继续回来填这个坑。还有本来想写个RecyclerView上拉刷新的例子，可惜扯着扯着扯歪了，给忘了……有空再来来补上。
以后有机会再写一篇关于缓存的文吧，这里就不多写了。
最后本文源码可以在我的github获取
在Android Studio中使用RecyclerView请在build.gradle中添加
compile 'com.android.support:recyclerview-v7:23.4.0'
eclipse中请自行百度……
资料来源：《Android开发艺术探索》
Google官方培训文档中文版
