FindJpg(4)-列表的卡顿优化和RecyclerView的简单使用

一、列表的卡顿优化

• 之前的博文有讲到避免在getView中执行耗时操作，这样很容易造成卡顿，但加载图片是个耗时的操作，所以这种操作必须通过异步的方式来处理。但仅仅采用异步操作不一定能很好地解决卡顿问题，比如用户频繁地上下滑动，会在一瞬间产生上百个异步任务，这些异步任务会造成线程池的拥堵并随即带来大量的UI更新操作，而UI操作运行在主线程，这样就会造成一定程度的卡顿。
• 解决问题的思路就是控制异步任务的执行频率，那么可以考虑在列表滑动时停止图片加载，等滑动停止时再加载图片，这样仍然能获得良好的用户体验。这里给RecyclerView setOnScrollListener,并在OnScrollListener的onScrollStateChanged方法中判断列表是否处于滑动状态来决定是否加载图片。
• 具体代码如下：

MyMainActivity.java

recyclerView.setOnScrollListener(newRecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, intnewState) {
        if (newState == SCROLL_STATE_IDLE) {
            idle = true;
            myAdapter.notifyDataSetChanged();
        } else {
            idle = false;
        }
    }

});

@Override
public void onBindViewHolder(MyViewHolder myViewHolder, inti) {
    myViewHolder.tv.setText(jpgs_name[i]);
    if (idle)
        imageLoader.bindBitmap(jpgs_path.get(i),myViewHolder.jpg,100,100);
    else
        myViewHolder.jpg.setImageDrawable(context.getResources().getDrawable(R.drawable.image_default));
}

二、RecyclerView的简单使用

• RecyclerView可以通过导入support-v7对其进行使用，据官方的介绍，该控件用于在有限的窗口中展示大量数据集，其实这样功能的控件我们并不陌生，例如：ListView、GridView。那么为什么还需要RecyclerView这样的控件呢？因为整体上看RecyclerView架构，提供了一种插拔式的体验，高度的解耦，异常的灵活，通过设置它提供的不同LayoutManager，ItemDecoration , ItemAnimator实现令人瞠目的效果。
• RecyclerView的使用代码：

 recyclerView= (RecyclerView) findViewById(R.id.id_recyclerview);
//        recyclerView.setLayoutManager(new LinearLayoutManager(this));
//        设置布局管理器
        recyclerView.setLayoutManager(newStaggeredGridLayoutManager(3,0));
//        设置Item的增加删除动画
        recyclerView.setItemAnimator(newDefaultItemAnimator());

        recyclerView.setAdapter(myAdapter=new MyAdapter(getApplicationContext(),s,s2, imageLoader));

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    private ImageLoader imageLoader;
    private List<String> jpgs_path = new ArrayList<String>();
    private String[] jpgs_name;
    private Context context;

    public MyAdapter(Context context, String[] jpgs_path,String[] jpgs_name,ImageLoader imageLoader) {
        this.context= context;
        for (String jpg_path : jpgs_path) {
            this.jpgs_path.add(jpg_path);
        }
        this.imageLoader= imageLoader;
        this.jpgs_name = jpgs_name;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        MyViewHolder myViewHolder = new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.my_item,viewGroup,
                false));
        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder myViewHolder, inti) {
        myViewHolder.tv.setText(jpgs_name[i]);
        if (idle)
            imageLoader.bindBitmap(jpgs_path.get(i),myViewHolder.jpg,100,100);
        else
            myViewHolder.jpg.setImageDrawable(context.getResources().getDrawable(R.drawable.image_default));
    }


    @Override
    public int getItemCount() {
        return jpgs_path.size();
    }


    public void removeData(intposition) {
        jpgs_path.remove(position);
        notifyItemRemoved(position);
    }


    class MyViewHolder extends RecyclerView.ViewHolder {

        TextView tv;
        ImageView jpg;

        public MyViewHolder(View view) {
            super(view);
            tv = (TextView) view.findViewById(R.id.tv);
            jpg = (ImageView) view.findViewById(R.id.jpg);
        }
    }
}

Activity的布局文件：

<?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">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/id_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="正在搜索图片,请稍后……"
    android:textSize="4mm"
    android:layout_centerInParent="true"/>
</RelativeLayout>

Item的布局文件：

<?xml version="1.0"encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="180dp"
    android:layout_height="180dp">
    <LinearLayout
        android:orientation="vertical"
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
<ImageView
    android:id="@+id/jpg"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"
    android:src="@drawable/image_default"/>
    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="1"/>
    </LinearLayout>
</FrameLayout>

Demo地址:FindJpg