RecyclerView+ImageLoader打造多选图库

在上一篇博客《Universal-ImageLoader源码解析》中，我们从源码的角度分析了ImageLoader，这篇博客我们就开始结合RecyclerView和ImageLoader打造一个图片系统。

需求

在我的项目中有一个多图选择的需求，但是系统的图库只能选择一张图片，所以我们只能自己来做一个简单的图片。利用RecyclerView和ImageLoader可以很轻松的实现这个功能，下面我们先来看看效果吧。

Activity的实现

activity的实现很简单，我们先来看看代码，

public class GalleryActivity extends BaseActivity {    private RecyclerView mRecyclerView;    private GridLayoutManager mLayoutManager;    private ArrayList<GalleryImage> mImages; // 所有图片    private ImageGalleryAdapter mAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.gallery_layout);        setupViews();        // 获取图片        new OpusBiz().getImages(new OnImagesListener() {            @Override            public void onResult(ArrayList<GalleryImage> images) {                if(images == null || images.isEmpty()) return;                mImages = images;                setAdapter();            }        });    }    @Override    protected void setupViews() {        super.setupViews();        setNormalTitle(R.string.select_image_text);        mTitleBar.setRightText(R.string.ok);        mRecyclerView = (RecyclerView) findViewById(R.id.rv_gallery);        mLayoutManager = new GridLayoutManager(this, 4, GridLayoutManager.HORIZONTAL, false);        mRecyclerView.setLayoutManager(mLayoutManager);        mRecyclerView.setItemAnimator(new DefaultItemAnimator());    }    private void setAdapter() {        mAdapter = new ImageGalleryAdapter(mRecyclerView, mImages);        mRecyclerView.setAdapter(mAdapter);    }    @Override    protected void onRightClick() {        ArrayList<GalleryImage> images = mAdapter.getSelected();        Intent intent = getIntent();        intent.putExtra(Constants.EXTRA_GALLERY_IMAGE, images);        setResult(RESULT_OK, intent);        onLeftClick();    }}

首先我们看看setupViews，这里面find了RecyclerView，并且给他设置了一个GridLayoutManager，这样我们的RecyclerView显示出来就是一个网格的布局了，是不是很简单！new OpusBiz().getImages()是从通过系统数据库获取图片并回调，这里面的代码我们稍后再看，最后我们new了一个ImageGalleryAdapter,并且将这个Adapter设置给了RecyclerView。

接下来我们看看怎么获取的图片吧。

图片的获取

public class OpusBiz {    /**     * 从系统数据库中获取图库图片     * @param li     */    public void getImages(final OnImagesListener li) {        final Handler handler = new Handler() {            @Override            public void handleMessage(Message msg) {                if(msg.what == Constants.MSG_SUCCESS)                    li.onResult((ArrayList<GalleryImage>) msg.obj);            }        };        new Thread(new Runnable() {            @Override            public void run() {                handler.obtainMessage(Constants.MSG_SUCCESS, getImages()).sendToTarget();            }        }).start();    }    /**     * 从系统数据库中获取图库图片     * @return     */    private ArrayList<GalleryImage> getImages() {        ArrayList<GalleryImage> images = new ArrayList<GalleryImage>();        GalleryImage image;        final String[] columns = { MediaStore.Images.Media.DATA,                MediaStore.Images.Media._ID };        final String orderBy = MediaStore.Images.Media.DATE_TAKEN;        Cursor imagecursor = App.getInstance().getContentResolver()                .query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns,                        null, null, orderBy + " DESC");        for (int i = 0; i < imagecursor.getCount(); i++) {            imagecursor.moveToPosition(i);            int dataColumnIndex = imagecursor                    .getColumnIndex(MediaStore.Images.Media.DATA);            image = new GalleryImage();            image.setUri(imagecursor.getString(dataColumnIndex));            images.add(image);        }        return images;    }    /**     * 获取图库图片     */    public interface OnImagesListener {        public void onResult(ArrayList<GalleryImage> images);    }}

这里面开启了一个线程去查询系统数据库，获取图片的路径，然后然后一个ArrayList中，最后回调。
接下来我们继续看看Adapter怎么写的

ImageGalleryAdapter

public class ImageGalleryAdapter extends    RecyclerView.Adapter<ImageGalleryAdapter.ImageViewHolder> {    private RecyclerView mRecyclerView;    private ArrayList<GalleryImage> mImages;    private ArrayList<GalleryImage> mSelected;    public ImageGalleryAdapter(RecyclerView recyclerView, ArrayList<GalleryImage> images) {        mRecyclerView = recyclerView;        mImages = images;        mSelected = new ArrayList<GalleryImage>(UploadOpusActivity.MAX_COUNT);    }    public ArrayList<GalleryImage> getSelected() {        return mSelected;    }    @Override    public int getItemCount() {        return mImages.size();    }    @Override    public void onBindViewHolder(final ImageViewHolder holder, int position) {        final GalleryImage image = mImages.get(holder.getLayoutPosition());        String uri = image.getUri();        if(!uri.startsWith("file://")) uri = "file://" + image.getUri();        ImageLoaderUtils.getInstance().displayImage(uri, holder.image);        holder.item.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                boolean isChecked = !image.isChecked();                // 如果是选择状态                if(isChecked) {                    // 则需要判断当前选择了几个                    if(mSelected.size() >= UploadOpusActivity.MAX_COUNT) return;                    // 添加到选择的列表中                    mSelected.add(image);                }else {                    // 取消选择                    mSelected.remove(image);                }                // 纯粹为了显示                holder.cb.setChecked(isChecked);                image.setChecked(isChecked);            }        });        holder.cb.setChecked(image.isChecked());    }    @Override    public ImageViewHolder onCreateViewHolder(ViewGroup parent, int position) {        View view = LayoutInflater.from(parent.getContext())                .inflate(R.layout.gallery_item, parent, false);        return new ImageViewHolder(view);    }    class ImageViewHolder extends RecyclerView.ViewHolder {        View item;        ImageView image;        CheckBox cb;        public ImageViewHolder(View view) {            super(view);            item = view;            image = (ImageView) view.findViewById(R.id.iv_gallery_item_image);            cb = (CheckBox) view.findViewById(R.id.cb_gallery_item_check);            int size = mRecyclerView.getMeasuredHeight() / 4;            LayoutParams p = image.getLayoutParams();            p.width = size;            p.height = size;        }    }}

也是一个简单的RecyclerView的adapter，主要看onBindViewHolder里的代码，

ImageLoaderUtils.getInstance().displayImage(uri, holder.image);holder.item.setOnClickListener(new OnClickListener() {  @Override  public void onClick(View v) {    boolean isChecked = !image.isChecked();    // 如果是选择状态    if(isChecked) {      // 则需要判断当前选择了几个      if(mSelected.size() >= UploadOpusActivity.MAX_COUNT) return;      // 添加到选择的列表中      mSelected.add(image);    }else {      // 取消选择      mSelected.remove(image);    }    // 纯粹为了显示    holder.cb.setChecked(isChecked);    image.setChecked(isChecked);  }});holder.cb.setChecked(image.isChecked());

首先通过ImageLoader加载了图片，然后监听了整个item的点击事件，如果是将要去选择，我们需要判断选择的最大数，如果大于我们允许的最大选择数则直接返回，否则，将选择的图片放到选择类别中，如果当前是选择状态，则就是要去取消选择，直接从选择列表中移除。最后，我们改变了CheckBox的选择状态。
最后的最后，附上对ImageLoader封装的代码，

public class ImageLoaderUtils {    private static ImageLoaderUtils sInstance;    private DisplayImageOptions mOptions;    public synchronized static ImageLoaderUtils getInstance() {        if(sInstance == null) sInstance = new ImageLoaderUtils();        return sInstance;    }    private ImageLoaderUtils() {        setDefault();    }    private void setDefault() {        mOptions = new DisplayImageOptions.Builder()        .showImageOnLoading(R.drawable.default_icon)        .showImageForEmptyUri(R.drawable.default_icon)        .showImageOnFail(R.drawable.default_icon)        .cacheInMemory(true)        .cacheOnDisk(true)        .bitmapConfig(Config.RGB_565) // 2倍图        .considerExifParams(true)        .displayer(new SimpleBitmapDisplayer()).build();    }    /**     * 设置默认的图标     * @param res     * @return     */    public ImageLoaderUtils defaultIcon(int res) {        mOptions = new DisplayImageOptions.Builder()        .showImageOnLoading(res)        .showImageForEmptyUri(res)        .showImageOnFail(res)        .cacheInMemory(true)        .cacheOnDisk(true)        .bitmapConfig(Config.RGB_565) // 2倍图        .considerExifParams(true)        .displayer(new SimpleBitmapDisplayer()).build();        return sInstance;    }    /**     * 获取图片     * @param url 图片url     * @param l 回调     */    public void loadImage(final String url, final ImageLoaderListener l) {        ImageLoader.getInstance().loadImage(url, mOptions, l);    }    /**     * 显示圆形图片     * @param uri     * @param imageView     * @param radius  半径     */    public void displayRoundImage(String uri, ImageView imageView, int radius) {        DisplayImageOptions options = new DisplayImageOptions.Builder()        .showImageOnLoading(R.drawable.default_icon)        .showImageForEmptyUri(R.drawable.default_icon)        .showImageOnFail(R.drawable.default_icon)        .cacheInMemory(true)        .cacheOnDisk(true)        .considerExifParams(true)        .bitmapConfig(Config.RGB_565) // 2倍图        .displayer(new RoundedBitmapDisplayer(radius)).build();        displayImage(uri, imageView, options);    }    public void displayImage(String uri, ImageView imageView) {        displayImage(uri, imageView, mOptions);//      ImageLoader.getInstance().displayImage(uri, imageView, mOptions);        setDefault(); // 恢复默认    }    private void displayImage(String uri, ImageView imageView, DisplayImageOptions options) {        if(uri == null) return;        ImageLoader.getInstance().displayImage(uri, imageView, options);    }    public static abstract class ImageLoaderListener implements ImageLoadingListener {        @Override        public void onLoadingStarted(String imageUri, View view) {        }        @Override        public void onLoadingFailed(String imageUri, View view,                FailReason failReason) {        }        @Override        public void onLoadingCancelled(String imageUri, View view) {        }    }}

整体代码非常简单，实现了一个可多选图片的图库功能。