小红书同款图片裁剪控件深度解析MeiWidgetView之MCropImageView与CoordinatorLayout联动原理【免费下载链接】MeiWidgetView一款汇总了郭霖鸿洋以及自己平时收集的自定义控件集合库小红书项目地址: https://gitcode.com/gh_mirrors/me/MeiWidgetViewMeiWidgetView 是一款 Android 自定义控件集合库其中的小红书同款图片裁剪控件MCropImageView完整复刻了小红书的图片裁剪交互双指缩放、单指平移、九宫格辅助线、越界阻尼回弹再配合CoordinatorLayout联动实现顶部图片与底部列表的滚动展开/收起。本文带你从源码角度完整理解它的设计原理与集成方法即使你是自定义控件新手也能轻松上手 一、效果与使用场景想象小红书发笔记的页面顶部一张大图下方是图片九宫格缩略图列表。手指上滑时顶部图片区域像抽屉一样收起露出底部列表快速甩动时会吸附到展开或收起状态同时图片支持双指缩放和滑动查看。这个体验由 MeiWidgetView 中的三个控件协作完成上图即为 Demo 中用于裁剪的示例图片源码ic_gril.png完整效果可运行 Demo 页面 MeiCropImageActivity.java 查看。二、快速上手3 步集成Step 1添加依赖。在app的build.gradle中引入 widget 模块或按 README.md 中的方式引入远程依赖。Step 2搭建布局。参考官方示例布局 mei_crop_activity.xml结构为容器里套两个控件CoordinatorLinearLayout可滚动的垂直容器父级MCropImageView图片裁剪控件CoordinatorRecyclerView缩略图列表子级Step 3绑定联动回调。在 Activity 中把 RecyclerView 的滚动事件转发给容器、把容器的展开状态同步回列表核心接线代码见 MeiCropImageActivity.java。之后点击缩略图调用setImagePath()即可换图。三、MCropImageView 核心原理源码位于 MCropImageView.java它继承自AppCompatImageView但几乎完全抛弃了ImageView的默认缩放改用矩阵Matrix驱动一切缩放平移都体现在同一个mMatrix上。3.1 矩阵驱动 首次布局构造时设置ScaleType.MATRIX图片的位置完全由矩阵控制。首次布局在onGlobalLayout()中完成源码 L297-L336先平移dx/dy把图片移到控件正中心再根据充满或留白样式选择maxBaseScale铺满或minBaseScale留白作为基础缩放比mBaseScale同时动态修正最大缩放比mMaxScale避免小图被无限放大。3.2 三种显示样式一键切换控件暴露了三个切换方法源码 L261-L295方法效果changeLeaveBlankStyle()留白样式图片整体居中四周留白changeFullStyle()充满样式图片铺满控件changeCuttingStyle()裁切样式按 4:3横图或 3:4竖图居中裁切即小红书效果裁切样式下layout()会根据mIsWidthLarger横图/竖图自动收缩高度或宽度到 3/4保证输出比例恒为 4:3 或 3:4这正是小红书图片永远比例统一的秘密。3.3 双指缩放与单指平移双指缩放ScaleGestureDetector监听缩放以两指中点为焦点postScale实现手指捏合在哪图片就从哪缩放的直觉体验单指平移GestureDetector的onScroll里对四个方向分别做越界阻尼处理源码 L581-L695。当图片滑出边界时位移量会按阻尼系数DAMP_FACTOR 9衰减——越界越远滑动越涩就像微信里拖动超出边界的内容超过最大偏移量则完全锁死不动。3.4 松手回弹10 帧步进缩放手指松开时如果缩放比超出[mBaseScale, mMaxScale]区间控件不会啪地一下弹回而是把总缩放比例开 10 次方getRelativeValue()通过Handler每帧缩小/放大一小步10 帧内平滑归位源码 L703-L729。动画结束后再执行boundCheck()L145-L183若图片仍越界用 200ms 的ValueAnimator把它平移回合法区域——这就是松手后图片自动滑回的顺滑感来源。3.5 九宫格辅助线拖动过程中mIsDragging trueonDraw会实时绘制 3×3 九宫格线条源码 L481-L516线条边界还会跟随图片实际可见区域裁剪并延迟 400ms 自动消失。这正是小红书构图时闪现的那几条辅助线。3.6 导出裁剪结果与性能细节导出convertToBitmap()L552-L570按当前布局重绘到 Bitmap留白区域填充指定颜色拿到即可直接上传压缩setImagePath()走 BitmapUtils.getCompressBitmap()按屏幕尺寸计算inSampleSize压缩解码防止大图 OOM缓存内置LruCache按路径缓存 Bitmap在onDetachedFromWindow时统一evictAll()防内存泄漏。四、CoordinatorLayout 联动原理自定义 CoordinatorLayout 由两个类组成CoordinatorLinearLayout.java可滚动容器与 CoordinatorRecyclerView.java可感知父级滚动的列表。4.1 展开/收起如何联动展开态手指在列表上向上滑deltaY 0CoordinatorRecyclerView.onTouchEvent()把偏移量通过onScroll()回调给容器容器执行setScrollY(scrollY deltaY)顶部图片随之上移——列表推着图片走收起态只有当列表滚到底部canScrollVertically(-1) false后继续下滑才转交容器图片才缓缓下拉展开源码 L90-L104。4.2 甩动吸附Fling 判定手指抬起时VelocityTracker算出速度并回调onFiling()CoordinatorLinearLayout L113-L129速度超过最小抛掷速度且距离足够 → 直接吸附到完全展开或完全收起否则按1/6 阈值MAX_EXPAND_FACTOR 6判断当前已展开超过 1/6 就保持展开否则收起最终用OverScroller以 500ms 平滑滚动到目标位置期间通过computeScroll()驱动并通知列表恢复自身高度resetRecyclerHeight()保证列表内部滚动不受影响。这套事件上抛 阈值吸附 插值滚动的组合正是 Material 头部大图的经典交互而这里只用两个普通布局类就实现了非常适合学习 CoordinatorLayout 事件分发思路。五、关键源码地图模块文件说明裁剪控件MCropImageView.java矩阵缩放、阻尼、九宫格滚动容器CoordinatorLinearLayout.java展开/收起与吸附动画联动列表CoordinatorRecyclerView.java事件转发与高度管理图片工具BitmapUtils.java压缩与固定比例裁剪Demo 页面MeiCropImageActivity.java完整接线示例六、总结MCropImageView的本质是一个被矩阵完全掌控的 ImageView居中、缩放、阻尼、回弹全部通过变换矩阵完成样式切换只改两个布尔开关思路干净利落小红书体验的顺滑感来自三处细节开 n 次方的分帧缩放动画、越界阻尼衰减、1/6 阈值 OverScroller 吸附联动机制本质是子列表把手势上抛、父容器接管滚动理解了它你再去看官方CoordinatorLayout的 Behavior 体系就会轻松很多。仓库内还有小红书任意拖拽标签RandomDragTagLayout、仿头条视频拖拽photodrag、GIF 圆角控件等 20 控件值得逐个拆解学习 【免费下载链接】MeiWidgetView一款汇总了郭霖鸿洋以及自己平时收集的自定义控件集合库小红书项目地址: https://gitcode.com/gh_mirrors/me/MeiWidgetView创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/8 18:15:15 · 阅读 1.2k 小红书同款图片裁剪控件深度解析：MeiWidgetView之MCropImageView与CoordinatorLayout联动原理
小红书同款图片裁剪控件深度解析MeiWidgetView之MCropImageView与CoordinatorLayout联动原理【免费下载链接】MeiWidgetView一款汇总了郭霖鸿洋以及自己平时收集的自定义控件集合库小红书项目地址: https://gitcode.com/gh_mirrors/me/MeiWidgetViewMeiWidgetView 是一款 Android 自定义控件集合库其中的小红书同款图片裁剪控件MCropImageView完整复刻了小红书的图片裁剪交互双指缩放、单指平移、九宫格辅助线、越界阻尼回弹再配合CoordinatorLayout联动实现顶部图片与底部列表的滚动展开/收起。本文带你从源码角度完整理解它的设计原理与集成方法即使你是自定义控件新手也能轻松上手 一、效果与使用场景想象小红书发笔记的页面顶部一张大图下方是图片九宫格缩略图列表。手指上滑时顶部图片区域像抽屉一样收起露出底部列表快速甩动时会吸附到展开或收起状态同时图片支持双指缩放和滑动查看。这个体验由 MeiWidgetView 中的三个控件协作完成上图即为 Demo 中用于裁剪的示例图片源码ic_gril.png完整效果可运行 Demo 页面 MeiCropImageActivity.java 查看。二、快速上手3 步集成Step 1添加依赖。在app的build.gradle中引入 widget 模块或按 README.md 中的方式引入远程依赖。Step 2搭建布局。参考官方示例布局 mei_crop_activity.xml结构为容器里套两个控件CoordinatorLinearLayout可滚动的垂直容器父级MCropImageView图片裁剪控件CoordinatorRecyclerView缩略图列表子级Step 3绑定联动回调。在 Activity 中把 RecyclerView 的滚动事件转发给容器、把容器的展开状态同步回列表核心接线代码见 MeiCropImageActivity.java。之后点击缩略图调用setImagePath()即可换图。三、MCropImageView 核心原理源码位于 MCropImageView.java它继承自AppCompatImageView但几乎完全抛弃了ImageView的默认缩放改用矩阵Matrix驱动一切缩放平移都体现在同一个mMatrix上。3.1 矩阵驱动 首次布局构造时设置ScaleType.MATRIX图片的位置完全由矩阵控制。首次布局在onGlobalLayout()中完成源码 L297-L336先平移dx/dy把图片移到控件正中心再根据充满或留白样式选择maxBaseScale铺满或minBaseScale留白作为基础缩放比mBaseScale同时动态修正最大缩放比mMaxScale避免小图被无限放大。3.2 三种显示样式一键切换控件暴露了三个切换方法源码 L261-L295方法效果changeLeaveBlankStyle()留白样式图片整体居中四周留白changeFullStyle()充满样式图片铺满控件changeCuttingStyle()裁切样式按 4:3横图或 3:4竖图居中裁切即小红书效果裁切样式下layout()会根据mIsWidthLarger横图/竖图自动收缩高度或宽度到 3/4保证输出比例恒为 4:3 或 3:4这正是小红书图片永远比例统一的秘密。3.3 双指缩放与单指平移双指缩放ScaleGestureDetector监听缩放以两指中点为焦点postScale实现手指捏合在哪图片就从哪缩放的直觉体验单指平移GestureDetector的onScroll里对四个方向分别做越界阻尼处理源码 L581-L695。当图片滑出边界时位移量会按阻尼系数DAMP_FACTOR 9衰减——越界越远滑动越涩就像微信里拖动超出边界的内容超过最大偏移量则完全锁死不动。3.4 松手回弹10 帧步进缩放手指松开时如果缩放比超出[mBaseScale, mMaxScale]区间控件不会啪地一下弹回而是把总缩放比例开 10 次方getRelativeValue()通过Handler每帧缩小/放大一小步10 帧内平滑归位源码 L703-L729。动画结束后再执行boundCheck()L145-L183若图片仍越界用 200ms 的ValueAnimator把它平移回合法区域——这就是松手后图片自动滑回的顺滑感来源。3.5 九宫格辅助线拖动过程中mIsDragging trueonDraw会实时绘制 3×3 九宫格线条源码 L481-L516线条边界还会跟随图片实际可见区域裁剪并延迟 400ms 自动消失。这正是小红书构图时闪现的那几条辅助线。3.6 导出裁剪结果与性能细节导出convertToBitmap()L552-L570按当前布局重绘到 Bitmap留白区域填充指定颜色拿到即可直接上传压缩setImagePath()走 BitmapUtils.getCompressBitmap()按屏幕尺寸计算inSampleSize压缩解码防止大图 OOM缓存内置LruCache按路径缓存 Bitmap在onDetachedFromWindow时统一evictAll()防内存泄漏。四、CoordinatorLayout 联动原理自定义 CoordinatorLayout 由两个类组成CoordinatorLinearLayout.java可滚动容器与 CoordinatorRecyclerView.java可感知父级滚动的列表。4.1 展开/收起如何联动展开态手指在列表上向上滑deltaY 0CoordinatorRecyclerView.onTouchEvent()把偏移量通过onScroll()回调给容器容器执行setScrollY(scrollY deltaY)顶部图片随之上移——列表推着图片走收起态只有当列表滚到底部canScrollVertically(-1) false后继续下滑才转交容器图片才缓缓下拉展开源码 L90-L104。4.2 甩动吸附Fling 判定手指抬起时VelocityTracker算出速度并回调onFiling()CoordinatorLinearLayout L113-L129速度超过最小抛掷速度且距离足够 → 直接吸附到完全展开或完全收起否则按1/6 阈值MAX_EXPAND_FACTOR 6判断当前已展开超过 1/6 就保持展开否则收起最终用OverScroller以 500ms 平滑滚动到目标位置期间通过computeScroll()驱动并通知列表恢复自身高度resetRecyclerHeight()保证列表内部滚动不受影响。这套事件上抛 阈值吸附 插值滚动的组合正是 Material 头部大图的经典交互而这里只用两个普通布局类就实现了非常适合学习 CoordinatorLayout 事件分发思路。五、关键源码地图模块文件说明裁剪控件MCropImageView.java矩阵缩放、阻尼、九宫格滚动容器CoordinatorLinearLayout.java展开/收起与吸附动画联动列表CoordinatorRecyclerView.java事件转发与高度管理图片工具BitmapUtils.java压缩与固定比例裁剪Demo 页面MeiCropImageActivity.java完整接线示例六、总结MCropImageView的本质是一个被矩阵完全掌控的 ImageView居中、缩放、阻尼、回弹全部通过变换矩阵完成样式切换只改两个布尔开关思路干净利落小红书体验的顺滑感来自三处细节开 n 次方的分帧缩放动画、越界阻尼衰减、1/6 阈值 OverScroller 吸附联动机制本质是子列表把手势上抛、父容器接管滚动理解了它你再去看官方CoordinatorLayout的 Behavior 体系就会轻松很多。仓库内还有小红书任意拖拽标签RandomDragTagLayout、仿头条视频拖拽photodrag、GIF 圆角控件等 20 控件值得逐个拆解学习 【免费下载链接】MeiWidgetView一款汇总了郭霖鸿洋以及自己平时收集的自定义控件集合库小红书项目地址: https://gitcode.com/gh_mirrors/me/MeiWidgetView创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考