• 小紅書圖片選擇器
  • 屬性配置
  • 自定義交互層ICropPickerBindPresenter
  • 自定義UI樣式CropUiConfig
  • Activity樣式
  • Fragment樣式
• 微信圖片選擇器
  • 屬性配置
  • 自定義交互層IMultiPickerBindPresenter
  • 自定義UI樣式PickerUiConfig
    • 自定義Item樣式和邏輯
  • Activity樣式
  • Fragment樣式
• 調(diào)用預(yù)覽
  • 普通預(yù)覽
  • 編輯預(yù)覽
• 調(diào)用單圖剪裁
• 調(diào)用拍照
• 調(diào)用拍照并剪裁
• 設(shè)置選擇器調(diào)用失敗回調(diào)
  • 錯(cuò)誤碼對(duì)照

小紅書圖片選擇器

屬性配置

ImagePicker.withCrop(new RedBookCropPresenter())//設(shè)置presenter
           .setMaxCount(9)//設(shè)置選擇數(shù)量
           .showCamera(true)//設(shè)置顯示拍照
           .setColumnCount(4)//設(shè)置列數(shù)
           .mimeType(MimeType.ofImage())//設(shè)置需要加載的文件類型
           .filterMimeType(MimeType.GIF)//設(shè)置需要過(guò)濾掉的文件類型
           .setFirstImageItem(null)//設(shè)置上一次選中的圖片
           .setFirstImageUrl(null)//設(shè)置上一次選中的圖片地址
           .setVideoSinglePick(true)//設(shè)置視頻單選
           .setCropPicSaveFilePath("剪裁圖片保存路徑")
           .setMaxVideoDuration(2000L)//設(shè)置可選區(qū)的最大視頻時(shí)長(zhǎng)
           .pick(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //圖片剪裁回調(diào)叉趣，主線程
                    //注意：剪裁回調(diào)里的ImageItem中g(shù)etCropUrl()才是剪裁過(guò)后的圖片地址
                }
            });

自定義交互層ICropPickerBindPresenter

public class RedBookCropPresenter implements ICropPickerBindPresenter {

    @Override
    public void displayListImage(ImageView imageView, ImageItem item, int size) {
        Glide.with(imageView.getContext()).load(item.path).into(imageView);
    }

    /**
     * 加載剪裁區(qū)域里的圖片
     *
     * @param imageView imageView
     * @param item      當(dāng)前圖片信息
     */
    @Override
    public void displayCropImage(ImageView imageView, ImageItem item) {
        Glide.with(imageView.getContext()).load(item.path)
                .apply(new RequestOptions().format(DecodeFormat.PREFER_ARGB_8888))
                .into(imageView);
    }

    @Override
    public CropUiConfig getUiConfig(Context context) {
        CropUiConfig config = new CropUiConfig();
        return config;
    }

    /**
     * 選擇超過(guò)數(shù)量限制提示
     *
     * @param context    上下文
     * @param maxCount   最大數(shù)量
     * @param defaultTip 默認(rèn)提示文本 “最多選擇maxCount張圖片”
     */
    @Override
    public void overMaxCountTip(Context context, int maxCount, String defaultTip) {
        if (context == null) {
            return;
        }
        AlertDialog.Builder builder = new AlertDialog.Builder(context);
        builder.setMessage(defaultTip);
        builder.setPositiveButton(com.ypx.imagepicker.R.string.picker_str_isee,
                new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.dismiss();
                    }
                });
        AlertDialog dialog = builder.create();
        dialog.show();
    }

    /**
     * 在單選視頻里，點(diǎn)擊視頻item會(huì)觸發(fā)此回調(diào)
     *
     * @param activity  頁(yè)面
     * @param imageItem 當(dāng)前選中視頻
     */
    @Override
    public void clickVideo(Activity activity, ImageItem imageItem) {
        Toast.makeText(activity, imageItem.path, Toast.LENGTH_SHORT).show();
    }
}

自定義UI樣式CropUiConfig

@Override
    public CropUiConfig getUiConfig(Context context) {
        CropUiConfig config = new CropUiConfig();
        //設(shè)置主題色，包含選中樣式的圓形背景色和邊框色
        config.setThemeColor(Color.parseColor("#ff2442"));
        //設(shè)置item未選中圖標(biāo)
        config.setUnSelectIconID(R.mipmap.picker_icon_unselect);
        //設(shè)置相機(jī)圖標(biāo)
        config.setCameraIconID(R.mipmap.picker_ic_camera);
        //設(shè)置返回圖標(biāo)
        config.setBackIconID(R.mipmap.picker_icon_close_black);
        //設(shè)置剪裁區(qū)域自適應(yīng)圖標(biāo)
        config.setFitIconID(R.mipmap.picker_icon_fit);
        //設(shè)置剪裁區(qū)域充滿圖標(biāo)
        config.setFullIconID(R.mipmap.picker_icon_full);
        //設(shè)置留白圖標(biāo)
        config.setGapIconID(R.mipmap.picker_icon_haswhite);
        //設(shè)置填充圖標(biāo)
        config.setFillIconID(R.mipmap.picker_icon_fill);
        //設(shè)置視頻暫停圖標(biāo)
        config.setVideoPauseIconID(R.mipmap.picker_icon_video);
        //設(shè)置返回按鈕顏色
        config.setBackIconColor(Color.WHITE);
        //設(shè)置剪裁區(qū)域顏色
        config.setCropViewBackgroundColor(Color.parseColor("#111111"));
        //設(shè)置拍照?qǐng)D標(biāo)背景色
        config.setCameraBackgroundColor(Color.BLACK);
        //設(shè)置標(biāo)題欄背景色
        config.setTitleBarBackgroundColor(Color.BLACK);
        //設(shè)置下一步按鈕選中文字顏色
        config.setNextBtnSelectedTextColor(Color.WHITE);
        //設(shè)置下一步按鈕未選中文字顏色
        config.setNextBtnUnSelectTextColor(Color.WHITE);
        //設(shè)置標(biāo)題文字顏色
        config.setTitleTextColor(Color.WHITE);
        //設(shè)置item列表背景色
        config.setGridBackgroundColor(Color.BLACK);
        //設(shè)置下一步按鈕未選中時(shí)背景drawable
        config.setNextBtnUnSelectBackground(PCornerUtils.cornerDrawable(Color.parseColor("#50B0B0B0"), PViewSizeUtils.dp(context, 30)));
        //設(shè)置下一步按鈕選中時(shí)背景drawable
        config.setNextBtnSelectedBackground(PCornerUtils.cornerDrawable(Color.parseColor("#ff2442"), PViewSizeUtils.dp(context, 30)));
        //設(shè)置是否顯示下一步數(shù)量提示
        config.setShowNextCount(false);
        //設(shè)置下一步按鈕文字
        config.setNextBtnText("下一步");
        config.setTitleArrowIconID(R.mipmap.picker_arrow_down);

        config.setShowStatusBar(false);
        return config;
    }

Activity樣式

ImagePicker.withCrop(new RedBookCropPresenter())//設(shè)置presenter
           //...省略若干屬性
           .pick(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //圖片剪裁回調(diào)捂人，主線程
                    //注意：剪裁回調(diào)里的ImageItem中g(shù)etCropUrl()才是剪裁過(guò)后的圖片地址
                }
            });

Fragment樣式

ImagePickAndCropFragment fragment= ImagePicker.withCrop(new RedBookCropPresenter())//設(shè)置presenter
           //...省略若干屬性
           .pickWithFragment(new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //圖片剪裁回調(diào)虐沥，主線程
                    //注意：剪裁回調(diào)里的ImageItem中g(shù)etCropUrl()才是剪裁過(guò)后的圖片地址
                }
            });

• 外部activity需要復(fù)寫onBackPressed

@Override
public void onBackPressed() {
    if (fragment != null && fragment.onBackPressed()) {
        return;
    }
    super.onBackPressed();
}

微信圖片選擇器

屬性配置

ImagePicker.withMulti(new WXImgPickerPresenter())//指定presenter
           .setMaxCount(9)//設(shè)置選擇的最大數(shù)
           .setColumnCount(4)//設(shè)置列數(shù)
           .mimeType(MimeType.ofAll())//設(shè)置要加載的文件類型蒸苇，可指定單一類型
           .filterMimeType(MimeType.GIF)//設(shè)置需要過(guò)濾掉加載的文件類型
           .showCamera(true)//顯示拍照
           .setVideoSinglePick(true)//設(shè)置視頻單選
           .setSinglePickImageOrVideoType(true)//設(shè)置圖片和視頻單一類型選擇
           .setMaxVideoDuration(2000L)//設(shè)置視頻可選取的最大時(shí)長(zhǎng)
           .setLastImageList(null)//設(shè)置上一次操作的圖片列表窃这，下次選擇時(shí)默認(rèn)恢復(fù)上一次選擇的狀態(tài)
           .setShieldList(null)//設(shè)置需要屏蔽掉的圖片列表城舞，下次選擇時(shí)已屏蔽的文件不可選擇
           .pick(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //圖片選擇回調(diào)钧唐，主線程
                }
            });

自定義交互層IMultiPickerBindPresenter

public class WXImgPickerPresenter implements IMultiPickerBindPresenter {

    @Override
    public void displayListImage(ImageView imageView, ImageItem item, int size) {
        Glide.with(imageView.getContext()).load(item.path).into(imageView);
    }

    @Override
    public void displayPerViewImage(ImageView imageView, String url) {
        Glide.with(imageView.getContext()).load(url).apply(new RequestOptions()
                .format(DecodeFormat.PREFER_ARGB_8888)).into(imageView);
    }

    @Override
    public PickerUiConfig getUiConfig(Context context) {
        return null;
    }

    @Override
    public void tip(Context context, String msg) {
        Toast.makeText(context, msg, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void imageItemClick(Context context, ImageItem imageItem, ArrayList<ImageItem> selectImageList,
                               ArrayList<ImageItem> allSetImageList, MultiGridAdapter adapter) {
        if (selectImageList == null || adapter == null) {
            return;
        }
        tip(context, "我是自定義的圖片點(diǎn)擊事件");
        adapter.preformCheckItem(imageItem);
    }
}

自定義UI樣式PickerUiConfig

    @Override
    public PickerUiConfig getUiConfig(Context context) {
        PickerUiConfig config = new PickerUiConfig();
        //是否沉浸式狀態(tài)欄忙灼，狀態(tài)欄顏色將根據(jù)TopBarBackgroundColor指定，
        // 并動(dòng)態(tài)更改狀態(tài)欄圖標(biāo)顏色
        config.setImmersionBar(true);
        //設(shè)置主題色
        config.setThemeColor(Color.parseColor("#09C768"));
        //設(shè)置選中和未選中時(shí)圖標(biāo)
        config.setSelectedIconID(R.mipmap.picker_wechat_select);
        config.setUnSelectIconID(R.mipmap.picker_wechat_unselect);
        //設(shè)置返回圖標(biāo)以及返回圖標(biāo)顏色
        config.setBackIconID(R.mipmap.picker_icon_back_black);
        config.setBackIconColor(Color.BLACK);
        //設(shè)置標(biāo)題欄背景色和對(duì)齊方式逾柿，設(shè)置標(biāo)題欄文本顏色
        config.setTitleBarBackgroundColor(Color.parseColor("#F1F1F1"));
        config.setTitleBarGravity(Gravity.START);
        config.setTitleColor(Color.BLACK);
        //設(shè)置標(biāo)題欄右上角完成按鈕選中和未選中樣式缀棍，以及文字顏色
        int r = PViewSizeUtils.dp(context, 2);
        config.setOkBtnSelectBackground(PCornerUtils.cornerDrawable(Color.parseColor("#09C768"), r));
        config.setOkBtnUnSelectBackground(PCornerUtils.cornerDrawable(Color.parseColor("#B4ECCE"), r));
        config.setOkBtnSelectTextColor(Color.WHITE);
        config.setOkBtnUnSelectTextColor(Color.parseColor("#50ffffff"));
        config.setOkBtnText("完成");
        //設(shè)置選擇器背景色
        config.setPickerBackgroundColor(Color.WHITE);
        //設(shè)置選擇器item背景色
        config.setPickerItemBackgroundColor(Color.parseColor("#484848"));
        //設(shè)置底部欄顏色
        config.setBottomBarBackgroundColor(Color.parseColor("#333333"));
        //設(shè)置拍照按鈕圖標(biāo)和背景色
        config.setCameraIconID(R.mipmap.picker_ic_camera);
        config.setCameraBackgroundColor(Color.parseColor("#484848"));

        //標(biāo)題欄模式，從標(biāo)題欄選擇相冊(cè)
        config.setPickStyle(PickerUiConfig.PICK_STYLE_TITLE);
        //設(shè)置選擇器自定義item樣式
        config.setPickerItemView(new CustomPickerItem(context));
        return config;
    }

自定義Item樣式和邏輯

繼承BaseItemView机错，并在Presenter的getUiConfig中設(shè)置 config.setPickerItemView(new CustomPickerItem(context));即可爬范。可參考demo里CustomPickerItem類實(shí)現(xiàn)

/**
 * Time: 2019/8/8 15:42
 * Author:ypx
 * Description:自定義item基類
 */
public abstract class BaseItemView extends LinearLayout {
    protected View view;

    protected abstract int getLayoutId();

    protected abstract void initView(View view);

    protected abstract void bindData(ImageItem imageItem,
                                     RecyclerView.Adapter adapter,
                                     int position,
                                     ArrayList<ImageItem> selectImageList,
                                     MultiGridAdapter.OnActionResult result);


    protected BaseItemView(Context context) {
        super(context);
        init();
    }

    private void init() {
        view = LayoutInflater.from(getContext()).inflate(getLayoutId(), this, true);
        initView(view);
    }

    public void initData(MultiSelectConfig selectConfig, IMultiPickerBindPresenter presenter, PickerUiConfig uiConfig) {
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT);
        params.height = getScreenWidth() / selectConfig.getColumnCount() - dp(2);
        setLayoutParams(params);
        view.setLayoutParams(params);
    }


    protected void setLayoutParams(RelativeLayout.LayoutParams params) {
        params.leftMargin = dp(1);
        params.topMargin = dp(1);
        params.rightMargin = dp(1);
        params.bottomMargin = dp(1);
    }

    protected int dp(float dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dp, getContext().getResources().getDisplayMetrics());
    }

    protected int getScreenWidth() {
        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        assert wm != null;
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }
}

Activity樣式

ImagePicker.withMulti(new WXImgPickerPresenter())
            //...省略若干屬性
            .pick(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //圖片選擇回調(diào)弱匪，主線程
                }
            });

Fragment樣式

MultiImagePickerFragment fragment = ImagePicker.withMulti(new WXImgPickerPresenter())
               //...省略若干屬性
                .pickWithFragment(new OnImagePickCompleteListener() {
                    @Override
                    public void onImagePickComplete(ArrayList<ImageItem> items) {
                        //圖片選擇回調(diào)青瀑，主線程
                    }
                })

• 外部activity需要復(fù)寫onBackPressed

@Override
public void onBackPressed() {
    if (fragment != null && fragment.onBackPressed()) {
        return;
    }
    super.onBackPressed();
}

調(diào)用預(yù)覽

普通預(yù)覽

//配置需要預(yù)覽的所有圖片列表
ArrayList<ImageItem> allPreviewImageList = new ArrayList<>();
//默認(rèn)選中的圖片索引
int defaultPosition = 0;
//開(kāi)啟普通預(yù)覽
ImagePicker.preview(this, new WXImgPickerPresenter(), allPreviewImageList, defaultPosition, null);

編輯預(yù)覽

//配置需要預(yù)覽的所有圖片列表
ArrayList<ImageItem> allPreviewImageList = new ArrayList<>();
//默認(rèn)選中的圖片索引
int defaultPosition = 0;
//開(kāi)啟編輯預(yù)覽
ImagePicker.preview(this, new WXImgPickerPresenter(), allPreviewImageList, defaultPosition, new OnImagePickCompleteListener() {
        @Override
        public void onImagePickComplete(ArrayList<ImageItem> items) {
            //圖片編輯回調(diào)璧亮，主線程
        }
    });

調(diào)用單圖剪裁

 ImagePicker.withMulti(new WXImgPickerPresenter())
            .mimeType(MimeType.ofImage())
            .filterMimeType(MimeType.GIF)
            .setCropRatio(1,1)//設(shè)置剪裁比例
            .cropSaveFilePath("剪裁圖片保存路徑")
            .cropRectMinMargin(50)//設(shè)置剪裁框間距，單位px
            .cropAsCircle()//圓形剪裁
            .crop(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //圖片剪裁回調(diào)斥难，主線程
                }
            });

調(diào)用拍照

ImagePicker.takePhoto(this, "拍照保存路徑", new OnImagePickCompleteListener() {
            @Override
            public void onImagePickComplete(ArrayList<ImageItem> items) {
                //拍照回調(diào)枝嘶，主線程
            }
        });

調(diào)用拍照并剪裁

//配置剪裁屬性
MultiSelectConfig selectConfig = new MultiSelectConfig();
selectConfig.setCropRatio(1, 1);//設(shè)置剪裁比例
selectConfig.setCropRectMargin(50);//設(shè)置剪裁框間距，單位px
selectConfig.setCropSaveFilePath("剪裁圖片保存路徑");
selectConfig.setCircle(false);//是否圓形剪裁
ImagePicker.takePhotoAndCrop(this, new WXImgPickerPresenter(), selectConfig, new OnImagePickCompleteListener() {
    @Override
    public void onImagePickComplete(ArrayList<ImageItem> items) {
            //剪裁回調(diào)哑诊，主線程
        }
    });

設(shè)置選擇器調(diào)用失敗回調(diào)

所有OnImagePickCompleteListener回調(diào)都可以設(shè)置OnImagePickCompleteListener2監(jiān)聽(tīng)

ImagePicker.withMulti(new WXImgPickerPresenter())
            //...省略若干屬性
            .pick(new OnImagePickCompleteListener2() {
                 @Override
                public void onPickFailed(PickerError error) {
                    //調(diào)用選擇器失敗回調(diào)
                }

                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //圖片選擇回調(diào)群扶，主線程
                }
            })

錯(cuò)誤碼對(duì)照

詳見(jiàn)PickerError類

• CANCEL ：-26883 選擇器返回，即取消選擇
• MEDIA_NOT_FOUND ：-26884 沒(méi)有媒體文件
• PRESENTER_NOT_FOUND ：-26885 沒(méi)有配置presenter
• UI_CONFIG_NOT_FOUND ：-26886 沒(méi)有配置presenter里的UiConfig
• SELECT_CONFIG_NOT_FOUND ：-26887 配置選項(xiàng)錯(cuò)誤
• OTHER ：-26888 其他錯(cuò)誤