YImagePicker使用文档

小红书图片选择器

属性配置

ImagePicker.withCrop(new RedBookCropPresenter())//设置presenter
           .setMaxCount(9)//设置选择数量
           .showCamera(true)//设置显示拍照
           .setColumnCount(4)//设置列数
           .mimeType(MimeType.ofImage())//设置需要加载的文件类型
           .filterMimeType(MimeType.GIF)//设置需要过滤掉的文件类型
           .setFirstImageItem(null)//设置上一次选中的图片
           .setFirstImageUrl(null)//设置上一次选中的图片地址
           .setVideoSinglePick(true)//设置视频单选
           .setCropPicSaveFilePath("剪裁图片保存路径")
           .setMaxVideoDuration(2000L)//设置可选区的最大视频时长
           .pick(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //图片剪裁回调，主线程
                    //注意：剪裁回调里的ImageItem中getCropUrl()才是剪裁过后的图片地址
                }
            });

自定义交互层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);
    }

    /**
     * 加载剪裁区域里的图片
     *
     * @param imageView imageView
     * @param item      当前图片信息
     */
    @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;
    }

    /**
     * 选择超过数量限制提示
     *
     * @param context    上下文
     * @param maxCount   最大数量
     * @param defaultTip 默认提示文本 “最多选择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();
    }

    /**
     * 在单选视频里，点击视频item会触发此回调
     *
     * @param activity  页面
     * @param imageItem 当前选中视频
     */
    @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();
        //设置主题色，包含选中样式的圆形背景色和边框色
        config.setThemeColor(Color.parseColor("#ff2442"));
        //设置item未选中图标
        config.setUnSelectIconID(R.mipmap.picker_icon_unselect);
        //设置相机图标
        config.setCameraIconID(R.mipmap.picker_ic_camera);
        //设置返回图标
        config.setBackIconID(R.mipmap.picker_icon_close_black);
        //设置剪裁区域自适应图标
        config.setFitIconID(R.mipmap.picker_icon_fit);
        //设置剪裁区域充满图标
        config.setFullIconID(R.mipmap.picker_icon_full);
        //设置留白图标
        config.setGapIconID(R.mipmap.picker_icon_haswhite);
        //设置填充图标
        config.setFillIconID(R.mipmap.picker_icon_fill);
        //设置视频暂停图标
        config.setVideoPauseIconID(R.mipmap.picker_icon_video);
        //设置返回按钮颜色
        config.setBackIconColor(Color.WHITE);
        //设置剪裁区域颜色
        config.setCropViewBackgroundColor(Color.parseColor("#111111"));
        //设置拍照图标背景色
        config.setCameraBackgroundColor(Color.BLACK);
        //设置标题栏背景色
        config.setTitleBarBackgroundColor(Color.BLACK);
        //设置下一步按钮选中文字颜色
        config.setNextBtnSelectedTextColor(Color.WHITE);
        //设置下一步按钮未选中文字颜色
        config.setNextBtnUnSelectTextColor(Color.WHITE);
        //设置标题文字颜色
        config.setTitleTextColor(Color.WHITE);
        //设置item列表背景色
        config.setGridBackgroundColor(Color.BLACK);
        //设置下一步按钮未选中时背景drawable
        config.setNextBtnUnSelectBackground(PCornerUtils.cornerDrawable(Color.parseColor("#50B0B0B0"), PViewSizeUtils.dp(context, 30)));
        //设置下一步按钮选中时背景drawable
        config.setNextBtnSelectedBackground(PCornerUtils.cornerDrawable(Color.parseColor("#ff2442"), PViewSizeUtils.dp(context, 30)));
        //设置是否显示下一步数量提示
        config.setShowNextCount(false);
        //设置下一步按钮文字
        config.setNextBtnText("下一步");
        config.setTitleArrowIconID(R.mipmap.picker_arrow_down);

        config.setShowStatusBar(false);
        return config;
    }

Activity样式

ImagePicker.withCrop(new RedBookCropPresenter())//设置presenter
           //...省略若干属性
           .pick(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //图片剪裁回调，主线程
                    //注意：剪裁回调里的ImageItem中getCropUrl()才是剪裁过后的图片地址
                }
            });

Fragment样式

ImagePickAndCropFragment fragment= ImagePicker.withCrop(new RedBookCropPresenter())//设置presenter
           //...省略若干属性
           .pickWithFragment(new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //图片剪裁回调，主线程
                    //注意：剪裁回调里的ImageItem中getCropUrl()才是剪裁过后的图片地址
                }
            });
  • 外部activity需要复写onBackPressed
@Override
public void onBackPressed() {
    if (fragment != null && fragment.onBackPressed()) {
        return;
    }
    super.onBackPressed();
}

微信图片选择器

属性配置

ImagePicker.withMulti(new WXImgPickerPresenter())//指定presenter
           .setMaxCount(9)//设置选择的最大数
           .setColumnCount(4)//设置列数
           .mimeType(MimeType.ofAll())//设置要加载的文件类型，可指定单一类型
           .filterMimeType(MimeType.GIF)//设置需要过滤掉加载的文件类型
           .showCamera(true)//显示拍照
           .setVideoSinglePick(true)//设置视频单选
           .setSinglePickImageOrVideoType(true)//设置图片和视频单一类型选择
           .setMaxVideoDuration(2000L)//设置视频可选取的最大时长
           .setLastImageList(null)//设置上一次操作的图片列表，下次选择时默认恢复上一次选择的状态
           .setShieldList(null)//设置需要屏蔽掉的图片列表，下次选择时已屏蔽的文件不可选择
           .pick(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //图片选择回调，主线程
                }
            });

自定义交互层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, "我是自定义的图片点击事件");
        adapter.preformCheckItem(imageItem);
    }
}

自定义UI样式PickerUiConfig

    @Override
    public PickerUiConfig getUiConfig(Context context) {
        PickerUiConfig config = new PickerUiConfig();
        //是否沉浸式状态栏，状态栏颜色将根据TopBarBackgroundColor指定，
        // 并动态更改状态栏图标颜色
        config.setImmersionBar(true);
        //设置主题色
        config.setThemeColor(Color.parseColor("#09C768"));
        //设置选中和未选中时图标
        config.setSelectedIconID(R.mipmap.picker_wechat_select);
        config.setUnSelectIconID(R.mipmap.picker_wechat_unselect);
        //设置返回图标以及返回图标颜色
        config.setBackIconID(R.mipmap.picker_icon_back_black);
        config.setBackIconColor(Color.BLACK);
        //设置标题栏背景色和对齐方式，设置标题栏文本颜色
        config.setTitleBarBackgroundColor(Color.parseColor("#F1F1F1"));
        config.setTitleBarGravity(Gravity.START);
        config.setTitleColor(Color.BLACK);
        //设置标题栏右上角完成按钮选中和未选中样式，以及文字颜色
        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("完成");
        //设置选择器背景色
        config.setPickerBackgroundColor(Color.WHITE);
        //设置选择器item背景色
        config.setPickerItemBackgroundColor(Color.parseColor("#484848"));
        //设置底部栏颜色
        config.setBottomBarBackgroundColor(Color.parseColor("#333333"));
        //设置拍照按钮图标和背景色
        config.setCameraIconID(R.mipmap.picker_ic_camera);
        config.setCameraBackgroundColor(Color.parseColor("#484848"));

        //标题栏模式，从标题栏选择相册
        config.setPickStyle(PickerUiConfig.PICK_STYLE_TITLE);
        //设置选择器自定义item样式
        config.setPickerItemView(new CustomPickerItem(context));
        return config;
    }

自定义Item样式和逻辑

继承BaseItemView，并在Presenter的getUiConfig中设置 config.setPickerItemView(new CustomPickerItem(context));即可。可参考demo里CustomPickerItem类实现

/**
 * 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) {
                    //图片选择回调，主线程
                }
            });

Fragment样式

MultiImagePickerFragment fragment = ImagePicker.withMulti(new WXImgPickerPresenter())
               //...省略若干属性
                .pickWithFragment(new OnImagePickCompleteListener() {
                    @Override
                    public void onImagePickComplete(ArrayList<ImageItem> items) {
                        //图片选择回调，主线程
                    }
                })
  • 外部activity需要复写onBackPressed
@Override
public void onBackPressed() {
    if (fragment != null && fragment.onBackPressed()) {
        return;
    }
    super.onBackPressed();
}

调用预览

普通预览

//配置需要预览的所有图片列表
ArrayList<ImageItem> allPreviewImageList = new ArrayList<>();
//默认选中的图片索引
int defaultPosition = 0;
//开启普通预览
ImagePicker.preview(this, new WXImgPickerPresenter(), allPreviewImageList, defaultPosition, null);

编辑预览

//配置需要预览的所有图片列表
ArrayList<ImageItem> allPreviewImageList = new ArrayList<>();
//默认选中的图片索引
int defaultPosition = 0;
//开启编辑预览
ImagePicker.preview(this, new WXImgPickerPresenter(), allPreviewImageList, defaultPosition, new OnImagePickCompleteListener() {
        @Override
        public void onImagePickComplete(ArrayList<ImageItem> items) {
            //图片编辑回调，主线程
        }
    });

调用单图剪裁

 ImagePicker.withMulti(new WXImgPickerPresenter())
            .mimeType(MimeType.ofImage())
            .filterMimeType(MimeType.GIF)
            .setCropRatio(1,1)//设置剪裁比例
            .cropSaveFilePath("剪裁图片保存路径")
            .cropRectMinMargin(50)//设置剪裁框间距，单位px
            .cropAsCircle()//圆形剪裁
            .crop(this, new OnImagePickCompleteListener() {
                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //图片剪裁回调，主线程
                }
            });

调用拍照

ImagePicker.takePhoto(this, "拍照保存路径", new OnImagePickCompleteListener() {
            @Override
            public void onImagePickComplete(ArrayList<ImageItem> items) {
                //拍照回调，主线程
            }
        });

调用拍照并剪裁

//配置剪裁属性
MultiSelectConfig selectConfig = new MultiSelectConfig();
selectConfig.setCropRatio(1, 1);//设置剪裁比例
selectConfig.setCropRectMargin(50);//设置剪裁框间距，单位px
selectConfig.setCropSaveFilePath("剪裁图片保存路径");
selectConfig.setCircle(false);//是否圆形剪裁
ImagePicker.takePhotoAndCrop(this, new WXImgPickerPresenter(), selectConfig, new OnImagePickCompleteListener() {
    @Override
    public void onImagePickComplete(ArrayList<ImageItem> items) {
            //剪裁回调，主线程
        }
    });

设置选择器调用失败回调

所有OnImagePickCompleteListener回调都可以设置OnImagePickCompleteListener2监听

ImagePicker.withMulti(new WXImgPickerPresenter())
            //...省略若干属性
            .pick(new OnImagePickCompleteListener2() {
                 @Override
                public void onPickFailed(PickerError error) {
                    //调用选择器失败回调
                }

                @Override
                public void onImagePickComplete(ArrayList<ImageItem> items) {
                    //图片选择回调，主线程
                }
            })

错误码对照

详见PickerError类

  • CANCEL ：-26883 选择器返回，即取消选择
  • MEDIA_NOT_FOUND ：-26884 没有媒体文件
  • PRESENTER_NOT_FOUND ：-26885 没有配置presenter
  • UI_CONFIG_NOT_FOUND ：-26886 没有配置presenter里的UiConfig
  • SELECT_CONFIG_NOT_FOUND ：-26887 配置选项错误
  • OTHER ：-26888 其他错误
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容