Android 實現一個仿微信的圖片選擇器

時間 2019-11-16

原文原文鏈接

如今大部分的App都上傳圖片的功能，好比設置用戶頭像、聊天發送圖片、發表動態、論壇帖子等。上傳圖片須要先從選擇手機中選擇要上傳的圖片，因此圖片選擇器在App中是很常見的組件，通常的手機都會自帶一個圖片選擇器。不過不少App並不喜歡用手機自帶的選擇器，而是本身實現一個圖片選擇器。好比微信的圖片選擇器就作的很好。因此我也仿照微信的樣式和交互效果，本身作了一個圖片選擇器：ImageSelector。ImageSelector支持圖片的單選、限數量的多選和不限數量的多選。支持圖片預覽和圖片文件夾的切換。項目已經上傳到了個人GitHub，歡迎你們下載和使用。
本篇文章我將爲你們介紹ImageSelector是如何現實的。因爲ImageSelector的項目代碼比較多，因此這篇文章只講解ImageSelector的實現思路和分析主要的項目代碼。想要看完整代碼的同窗請到GitHub下載項目。至於ImageSelector的使用，在個人另外一篇文章中有詳細的介紹：《Android 仿微信的圖片選擇器ImageSelector的使用》。
先上效果圖：javascript

要實現一個圖片選擇器，須要作的主要就是如下幾個事情：
一、從手機存儲卡中掃描加載圖片。
二、用一個列表將圖片顯示出來。
三、選擇圖片。
四、把選中的圖片返回給調用者。java

準備工做
首先須要導入兩個第三方庫。android

//圖片加載庫，用於加載圖片
compile 'com.github.bumptech.glide:glide:3.7.0'
//圖片縮放庫，用於圖片的預覽
compile 'com.github.chrisbanes:PhotoView:2.0.0'複製代碼

第一步：從手機存儲卡中掃描加載圖片
讀取手機存儲卡須要先申請權限：git

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />複製代碼

對Android 6.0以上的系統作動態權限處理。github

/** * 檢查權限並加載SD卡里的圖片。 */
    private void checkPermissionAndLoadImages() { 
        int hasWriteContactsPermission = ContextCompat.checkSelfPermission(getApplication(),
                Manifest.permission.WRITE_EXTERNAL_STORAGE);
        if (hasWriteContactsPermission == PackageManager.PERMISSION_GRANTED) {
            //有權限，加載圖片。
            loadImageForSDCard();
        } else {
            //沒有權限，申請權限。
            ActivityCompat.requestPermissions(ImageSelectorActivity.this,
                    new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE}, PERMISSION_REQUEST_CODE);
        }
    }

    /** * 處理權限申請的回調。 */
    @Override
    public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
        if (requestCode == PERMISSION_REQUEST_CODE) {
            if (grantResults.length > 0
                    && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                //容許權限，加載圖片。
                loadImageForSDCard();
            } else {
                //拒絕權限，彈出提示框。
                showExceptionDialog();
            }
        }
    }複製代碼

接着就是從手機存儲卡中掃描加載圖片。數組

/** * 從SDCard加載圖片。 */
    private void loadImageForSDCard() {
        ImageModel.loadImageForSDCard(this, new ImageModel.DataCallback() {
            @Override
            public void onSuccess(ArrayList<Folder> folders) {
                //folders是圖片文件夾的列表，每一個文件夾中都有若干張圖片。
            }
        });
    }複製代碼

我將掃描手機存儲卡的操做封裝在ImageModel類，並經過DataCallback把掃描的結果返回給調用者。返回的結果是一個文件夾的列表，這是由於咱們的圖片選擇器須要實現文件夾切換的功能，因此我把掃描出來的圖片按文件夾進行了拆分。
下面看文件夾實體類Folder 和圖片實體類 Image：微信

/** * 圖片文件夾實體類 */
public class Folder {

    private String name;
    private ArrayList<Image> images;

    public Folder(String name) {
        this.name = name;
    }

    public Folder(String name, ArrayList<Image> images) {
        this.name = name;
        this.images = images;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public ArrayList<Image> getImages() {
        return images;
    }

    public void setImages(ArrayList<Image> images) {
        this.images = images;
    }

    public void addImage(Image image) {
        if (image != null && StringUtils.isNotEmptyString(image.getPath())) {
            if (images == null) {
                images = new ArrayList<>();
            }
            images.add(image);
        }
    }
}

/** *圖片實體類 */
public class Image {

    private String path;
    private long time;
    private String name;

    public Image(String path, long time, String name) {
        this.path = path;
        this.time = time;
        this.name = name;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public long getTime() {
        return time;
    }

    public void setTime(long time) {
        this.time = time;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}複製代碼

注意，最核心的代碼來了：使用ContentProvider掃描手機中的全部圖片。ide

public class ImageModel {

    /** * 從SDCard加載圖片 */
    public static void loadImageForSDCard(final Context context, final DataCallback callback) {
        //因爲掃描圖片是耗時的操做，因此要在子線程處理。
        new Thread(new Runnable() {
            @Override
            public void run() {
                //掃描圖片
                Uri mImageUri = MediaStore.Images.Media.EXTERNAL_CONTENT_URI;
                ContentResolver mContentResolver = context.getContentResolver();
                Cursor mCursor = mContentResolver.query(mImageUri, new String[]{
                                MediaStore.Images.Media.DATA,
                                MediaStore.Images.Media.DISPLAY_NAME,
                                MediaStore.Images.Media.DATE_ADDED,
                                MediaStore.Images.Media._ID},
                        null,
                        null,
                        MediaStore.Images.Media.DATE_ADDED);

                ArrayList<Image> images = new ArrayList<>();
                //讀取掃描到的圖片
                while (mCursor.moveToNext()) {
                    // 獲取圖片的路徑
                    String path = mCursor.getString(
                            mCursor.getColumnIndex(MediaStore.Images.Media.DATA));
                    //獲取圖片名稱
                    String name = mCursor.getString(
                            mCursor.getColumnIndex(MediaStore.Images.Media.DISPLAY_NAME));
                    //獲取圖片時間
                    long time = mCursor.getLong(
                            mCursor.getColumnIndex(MediaStore.Images.Media.DATE_ADDED));
                    images.add(new Image(path, time, name));
                }
                mCursor.close();
                Collections.reverse(images);
                callback.onSuccess(splitFolder(images));
            }
        }).start();
    }

    /** * 把圖片按文件夾拆分，第一個文件夾保存全部的圖片 */
    private static ArrayList<Folder> splitFolder(ArrayList<Image> images) {
        ArrayList<Folder> folders = new ArrayList<>();
        folders.add(new Folder("所有圖片", images));
        if (images != null && !images.isEmpty()) {
            int size = images.size();
            for (int i = 0; i < size; i++) {
                String path = images.get(i).getPath();
                String name = getFolderName(path);
                if (StringUtils.isNotEmptyString(name)) {
                    Folder folder = getFolder(name, folders);
                    folder.addImage(images.get(i));
                }
            }
        }
        return folders;
    }

    /** * 根據圖片路徑，獲取圖片文件夾名稱 */
    private static String getFolderName(String path) {
        if (StringUtils.isNotEmptyString(path)) {
            String[] strings = path.split(File.separator);
            if (strings.length >= 2) {
                return strings[strings.length - 2];
            }
        }
        return "";
    }

    private static Folder getFolder(String name, List<Folder> folders) {
        if (folders != null && !folders.isEmpty()) {
            int size = folders.size();
            for (int i = 0; i < size; i++) {
                Folder folder = folders.get(i);
                if (name.equals(folder.getName())) {
                    return folder;
                }
            }
        }
        Folder newFolder = new Folder(name);
        folders.add(newFolder);
        return newFolder;
    }

    public interface DataCallback {
        void onSuccess(ArrayList<Folder> folders);
    }
}複製代碼

到這裏，咱們就已經拿到了手機裏的全部圖片了，接下來就是展現圖片列表。動畫

第二步：展現圖片
這個很是的簡單，其實就是寫一個圖片列表。this

//圖片列表
    private RecyclerView rvImage;

    // 初始化圖片列表
    private void initImageList() {
        mLayoutManager = new GridLayoutManager(this, 3);
        rvImage.setLayoutManager(mLayoutManager);
        mAdapter = new ImageAdapter(this, mMaxCount, isSingle);
        rvImage.setAdapter(mAdapter);
    }複製代碼

這裏的ImageAdapter，就是圖片列表的Adapter。

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ViewHolder> {

    private Context mContext;
    private ArrayList<Image> mImages;
    private LayoutInflater mInflater;

    private int mMaxCount;
    private boolean isSingle;

    /** * @param maxCount 圖片的最大選擇數量，小於等於0時，不限數量，isSingle爲false時纔有用。 * @param isSingle 是否單選 */ 
    public ImageAdapter(Context context, int maxCount, boolean isSingle) {
        mContext = context;
        this.mInflater = LayoutInflater.from(mContext);
        mMaxCount = maxCount;
        this.isSingle = isSingle;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.adapter_images_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final ViewHolder holder, final int position) {
        final Image image = mImages.get(position);
        Glide.with(mContext).load(new File(image.getPath()))
                .diskCacheStrategy(DiskCacheStrategy.NONE).into(holder.ivImage);
    }

    @Override
    public int getItemCount() {
        return mImages == null ? 0 : mImages.size();
    }

    static class ViewHolder extends RecyclerView.ViewHolder {

        ImageView ivImage;
        ImageView ivSelectIcon;
        ImageView ivMasking;

        public ViewHolder(View itemView) {
            super(itemView);
            ivImage = (ImageView) itemView.findViewById(R.id.iv_image);
            ivSelectIcon = (ImageView) itemView.findViewById(R.id.iv_select);
            ivMasking = (ImageView) itemView.findViewById(R.id.iv_masking);
        }
    }
}複製代碼

第三步：選擇圖片
點擊選擇圖片，主要是對圖片列表的ImageAdapter中的item進行操做，因此我就直接寫在了ImageAdapter類裏。選中的圖片用一個數組保存。

//保存選中的圖片
    private ArrayList<Image> mSelectImages = new ArrayList<>();
    //點擊選中/取消選中圖片
    holder.ivSelectIcon.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              if (mSelectImages.contains(image)) {
                  //若是圖片已經選中，就取消選中
                  unSelectImage(image);
                  setItemSelect(holder, false);
              } else if (isSingle) {
                  //若是是單選，就先清空已經選中的圖片，再選中當前圖片
                  clearImageSelect();
                  selectImage(image);
                  setItemSelect(holder,true);
              } else if (mMaxCount <= 0 || mSelectImages.size() < mMaxCount) {
                  //若是不限制圖片的選中數量，或者圖片的選中數量尚未達到最大限制，就直接選中當前圖片。
                  selectImage(image);
                  setItemSelect(holder, true);
              }
          }
      });

    /** * 選中圖片 */
    private void selectImage(Image image){
        mSelectImages.add(image);
    }

    /** * 取消選中圖片 */
    private void unSelectImage(Image image){
        mSelectImages.remove(image);
    }

    /** * 設置圖片選中和未選中的效果 */
    private void setItemSelect(ViewHolder holder, boolean isSelect) {
        if (isSelect) {
            holder.ivSelectIcon.setImageResource(R.drawable.icon_image_select);
            holder.ivMasking.setAlpha(0.5f);
        } else {
            holder.ivSelectIcon.setImageResource(R.drawable.icon_image_un_select);
            holder.ivMasking.setAlpha(0.2f);
        }
    }複製代碼

第四步：把選中的圖片返回給調用者
點擊「肯定」按鈕時，把選中的圖片經過Intent返回給調用者。

private void confirm() {
        //由於圖片的實體類是Image，而咱們返回的是String數組，因此要進行轉換。
        ArrayList<Image> selectImages = mAdapter.getSelectImages();
        ArrayList<String> images = new ArrayList<>();
        for (Image image : selectImages) {
            images.add(image.getPath());
        }

        //點擊肯定，把選中的圖片經過Intent傳給上一個Activity。
        Intent intent = new Intent();
        intent.putStringArrayListExtra(ImageSelectorUtils.SELECT_RESULT, images);
        setResult(RESULT_OK, intent);
        //關閉頁面
        finish();
    }複製代碼

到這裏，圖片選擇器的基本現實思路和主要的功能代碼就介紹完了。在這個ImageSelector項目中，還有不少其餘的知識，好比圖片文件夾切換、手機橫豎屏切換、圖片預覽、動畫效果、點擊效果等，這裏就不一一介紹了，有興趣的同窗能夠去看完整的項目代碼。在項目中，我也給出了很詳細的代碼註釋，方便你們閱讀。

最後給出ImageSelector的項目地址：github.com/donkinglian…