小红书图片选择器
属性配置
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 其他错误
