用 SuperImageView 实现定向裁剪:顶部、底部、侧边裁剪的 5 个实战场景
用 SuperImageView 实现定向裁剪顶部、底部、侧边裁剪的 5 个实战场景【免费下载链接】SuperImageViewCrop and Rounded Corners added to an ImageView.项目地址: https://gitcode.com/gh_mirrors/su/SuperImageViewAndroid 开发中ImageView自带的centerCrop只能居中裁剪遇到只保留图片顶部只显示底部内容这类需求就力不从心。SuperImageView是一款为 ImageView 扩展裁剪与圆角能力的开源库支持顶部裁剪、底部裁剪、左侧裁剪、右侧裁剪以及四个角落的定向裁剪一个控件就能解决图片位置对齐难题。本篇文章将结合 5 个真实业务场景带你快速掌握 SuperImageView 的定向裁剪用法。什么是 SuperImageView 定向裁剪SuperImageView 的核心思路很简单把裁剪位置从系统默认的居中扩展为可指定方向的 9 种模式。它通过内部的 ImageTransformation.java 计算缩放矩阵与平移量配合 CropType.java 中定义的TOP、BOTTOM、LEFT、RIGHT、TOP_LEFT、TOP_RIGHT、BOTTOM_LEFT、BOTTOM_RIGHT等常量让图片无论原始尺寸如何都能精确贴合指定区域。在布局中使用只需一行属性app:siv_cropImplementationcom.codeforvictory.android.superimageview.crop.CroppedImage在代码中动态切换裁剪方向则通过 CroppedImage.java 的setCropType()方法完成。接下来看 5 个典型场景。场景 1顶部裁剪——电商横幅图片的固定头部电商首页的 Banner 通常只关心图片的上半部分比如活动主标题、LOGO 所在区域。使用TOP裁剪模式无论图片原始高度是多少都会以顶部为锚点填满容器底部多余内容自动裁掉。这种顶部裁剪在实现图片顶部固定 底部滑入其他内容的轮播卡片时尤其好用视觉上完全无感且不会像centerCrop那样把主角裁丢。场景 2底部裁剪——图片水印与作者信息展示很多内容 App 会在图片底部叠加作者昵称、时间戳等信息此时希望图片始终以底部为基准对齐。SuperImageView 的BOTTOM裁剪模式会固定底部区域上半部分被裁剪配合半透明遮罩层就能做出底部内容永不丢失的沉浸式卡片。这一场景在瀑布流信息流中非常常见也是 SuperImageView 诞生时在游戏菜单中的原始诉求之一。场景 3左侧裁剪——头像列表与侧边栏缩略图当容器较窄、原图较宽时LEFT裁剪模式会固定图片左侧右侧多余部分裁掉。适合商品缩略图、聊天头像等需要左边主体对齐的界面比如人物照片只保留左半张脸的特写需求用LEFT一行配置即可。场景 4右侧裁剪——双列瀑布流中的补位图片与左侧裁剪对称RIGHT模式固定图片右侧。在双列瀑布流里为了对齐两列底部常常需要对图片做方向性裁剪右侧裁剪能让主体位于右侧的图片例如朝右行驶的汽车保持构图完整避免centerCrop造成的主题偏移。场景 5角落裁剪——四角定位与宫格封面如果你需要只显示图片的左上角、右上角、左下角或右下角SuperImageView 同样提供TOP_LEFT、TOP_RIGHT、BOTTOM_LEFT、BOTTOM_RIGHT四种角落裁剪。典型用途包括九宫格拼图的角落对齐、游戏道具图标的四角定位以及需要与圆角功能组合使用的封面卡片。角落裁剪可以和圆角功能RoundedCorners自由组合让图片同时具备指定方向裁剪 圆角显示的效果。快速上手一个完整的定向裁剪示例想立刻体验效果可以先克隆示例工程git clone https://gitcode.com/gh_mirrors/su/SuperImageView然后运行samples模块其中 ImageCroppingActivity.java 演示了本地图片的多种裁剪方向ImagesRecyclerAdapter.java 则展示了在 RecyclerView 中结合 Glide 为网络图片动态设置裁剪类型的写法。核心代码如下通过getFeature(CroppedImage.class)拿到裁剪能力再调用setCropType()指定方向配合 Glide 加载网络图即可在列表滚动时实时切换顶部裁剪、底部裁剪或侧边裁剪。小结SuperImageView 用极小的学习成本解决了 Android 原生 ImageView 无法定向裁剪的痛点顶部裁剪、底部裁剪、侧边裁剪与四角裁剪共 8 种方向 关闭裁剪足以覆盖电商、社交、游戏等绝大多数 UI 场景。搭配 官方裁剪文档 与示例源码相信你很快就能在自己的项目里用起来。【免费下载链接】SuperImageViewCrop and Rounded Corners added to an ImageView.项目地址: https://gitcode.com/gh_mirrors/su/SuperImageView创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考