如何使用uCrop库自定义图片裁剪Activity的UI界面

你所使用的com.github.yalantis:ucrop:2.2.2裁剪库支持完全自定义裁剪界面UI，默认裁剪界面效果如下：

1. 基础样式配置（推荐满足大部分定制需求） #

通过UCrop提供的Options配置类直接修改UI属性，无需修改布局：

• 颜色定制
  可修改工具栏、状态栏、裁剪框、网格线等所有可见元素的颜色：

  UCrop.Options options = new UCrop.Options();
  // 设置顶部工具栏背景色
  options.setToolbarColor(ContextCompat.getColor(context, R.color.custom_toolbar_color));
  // 设置状态栏背景色
  options.setStatusBarColor(ContextCompat.getColor(context, R.color.custom_status_color));
  // 设置裁剪框边框颜色
  options.setCropFrameColor(ContextCompat.getColor(context, R.color.custom_frame_color));
  // 设置裁剪网格线颜色
  options.setCropGridColor(ContextCompat.getColor(context, R.color.custom_grid_color));
  // 设置工具栏文字、图标颜色
  options.setToolbarWidgetColor(ContextCompat.getColor(context, R.color.custom_text_color));
  

• 元素显隐控制
  可以根据需求隐藏不需要的UI元素：

  // 隐藏裁剪区域网格线
  options.setShowCropGrid(false);
  // 隐藏裁剪区域边框
  options.setShowCropFrame(false);
  // 隐藏底部缩放、旋转控制条
  options.setHideBottomControls(true);
  

• 裁剪规则定制
  可限制裁剪比例、是否允许自由调整裁剪框：

  // 固定裁剪比例为1:1，可根据需求设置其他比例
  options.withAspectRatio(1, 1);
  // 关闭自由裁剪模式，用户不可调整裁剪比例
  options.setFreeStyleCropEnabled(false);
  

2. 全量自定义布局（满足深度定制需求） #

如果基础配置无法满足设计要求，可以直接重写库的布局文件实现完全自定义：

• 在你项目的res/layout目录下新建和库同名的布局文件ucrop_activity.xml，替换原有布局的结构、样式即可，注意必须保持布局内控件的id和库原生布局的id完全一致，否则会出现控件找不到的空指针异常。
• 可自定义顶部工具栏的菜单选项，配置自定义菜单资源：

  options.setToolbarMenu(R.menu.custom_crop_menu);
  

  后续在裁剪页的回调中监听自定义菜单的点击事件即可。

3. 配置生效 #

所有配置完成后，启动裁剪页时传入Options参数即可生效：

UCrop.of(图片源Uri, 裁剪后输出Uri)
     .withOptions(options)
     .start(当前Activity);

内容的提问来源于stack exchange，提问作者IRON MAN