企业官网建设流程全解析

圆角 + 裁剪组合使用：SuperImageView 模块化特性的高级玩法

【免费下载链接】SuperImageViewCrop and Rounded Corners added to an ImageView.项目地址: https://gitcode.com/gh_mirrors/su/SuperImageView

如果你正在开发 Android 应用，一定被「图片裁剪」和「图片圆角」这两件事反复折磨过：系统自带的centerCrop不能满足需求，圆角又要自己写 Shader 或者引入笨重的图片加载库。SuperImageView 正是为解决这些痛点而生的开源库，它通过模块化设计，把裁剪与圆角封装成两个独立能力，让开发者像搭积木一样，自由组合出想要的图片效果。今天这篇文章，就带大家解锁 SuperImageView 模块化特性的高级玩法——圆角与裁剪组合使用，一套配置同时搞定两种效果。

SuperImageView 是什么？Android 图片裁剪与圆角的一站式方案

SuperImageView 本质上是一个增强版 ImageView，核心类 SuperImageView.java 直接继承自AppCompatImageView，因此在任何需要 ImageView 的地方都可以无缝替换。

它的设计思路非常巧妙：能力模块化。项目将功能拆分为两个独立模块：

• superimageview-imagecrop：图片裁剪模块，负责按方向裁剪图片
• superimageview-roundedcorners：图片圆角模块，负责绘制圆角

两个模块通过 Crop.java 和 RoundedCorners.java 两个接口与核心类解耦。也就是说，裁剪和圆角既可以单独使用，也可以同时叠加在一个 SuperImageView 上，互不干扰——这正是「组合使用」的前提条件。

图片裁剪：8 个方向随心选，告别单一 centerCrop

普通 ImageView 只有centerCrop、fitXY等有限的缩放模式，而 SuperImageView 的裁剪模块提供了多达8 种裁剪方向，几乎覆盖了所有视觉需求：

• 顶部对齐：topLeft、centerTop、topRight
• 中部对齐：centerLeft、centerRight
• 底部对齐：bottomLeft、centerBottom、bottomRight

这 8 个方向的取值定义在裁剪模块的 attrs.xml 中，而底层的坐标换算逻辑由 ImageTransformation.java 完成——它会根据图片尺寸与控件尺寸自动计算缩放矩阵和平移量，开发者完全不需要手动算坐标。

以上面的横向球体图片为例，无论屏幕尺寸如何变化，你都可以让图片精确地「贴」在控件的左侧、右侧或中间，这在做菜单栏、横幅广告、卡片封面时特别实用。裁剪类型的枚举定义可以参考 CropType.java。

图片圆角：整体统一与四角独立，两种模式任你选

圆角模块同样功能齐全，支持两种设置方式：

1. 统一圆角：通过siv_cornerRadius一个属性，四个角同时生效
2. 独立圆角：通过siv_cornerRadiusTopLeft、siv_cornerRadiusTopRight、siv_cornerRadiusBottomLeft、siv_cornerRadiusBottomRight四个属性，分别控制每个角的弧度

这意味着你既可以做出经典的「胶囊圆角」，也可以只圆化左上角、右下角，做出不对称的卡片质感。圆角的具体绘制实现位于 RoundedCornersImage.java，它接管了 View 的绘制阶段，性能开销极小。

圆角 + 裁剪组合使用：一段 XML 同时搞定两种效果

了解了两个模块的独立用法之后，重头戏来了——如何在同一张图片上同时实现裁剪和圆角？

由于 SuperImageView 是模块化设计，组合使用非常简单：只需在布局中，把两个模块的实现类分别填入siv_cropImplementation和siv_roundedCornersImplementation两个属性即可：

<com.codeforvictory.android.superimageview.SuperImageView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/avatar" android:layout_width="match_parent" android:layout_height="200dp" android:src="@drawable/photo" app:siv_cropImplementation="com.codeforvictory.android.superimageview.crop.CroppedImage" app:siv_roundedCornersImplementation="com.codeforvictory.android.superimageview.roundedcorners.RoundedCornersImage" />

随后在裁剪模块的命名空间下配置裁剪方向，在圆角模块的命名空间下配置圆角弧度，组合效果即刻生效：

app:siv_crop="centerTop" app:siv_cornerRadius="16dp"

整个过程只需要配置几个属性，无需编写任何 Java 代码。SuperImageView 内部会通过反射实例化对应的功能实现，并在onDraw()阶段叠加绘制，两个特性像积木一样严丝合缝地组合在一起。

动态配置：代码中也能自由切换裁剪方向与圆角

除了 XML 静态配置，SuperImageView 也支持运行时动态控制。通过getFeature()方法可以拿到已初始化的功能实例，随时调整参数：

SuperImageView imageView = findViewById(R.id.avatar); CroppedImage crop = imageView.getFeature(CroppedImage.class); crop.setCropType(CropType.BOTTOM_LEFT); // 动态切换裁剪方向

如果你在不同页面需要不同裁剪方向（比如头像页用centerTop，封面页用centerBottom），这套动态配置机制能让同一份布局代码复用到底。

组合使用的典型应用场景

• 用户头像：上方裁剪 + 全圆角，秒变圆形头像
• 卡片封面：底部裁剪 + 顶部圆角，营造沉浸式视觉
• 轮播 Banner：中部裁剪 + 统一圆角，适配不同屏幕比例
• 侧滑菜单：左侧/右侧裁剪，配合半透明圆角，正是项目作者最初的灵感来源

官方示例代码中也内置了这些玩法：圆角示例见 RoundedCornerImagesActivity.java，裁剪示例见 ImageCroppingActivity.java，两个示例的布局文件中也展示了siv_cropImplementation与siv_roundedCornersImplementation的标准写法。

结语

SuperImageView 通过模块化的优雅设计，把「图片裁剪」和「图片圆角」这两个高频需求变成了开箱即用的能力。学会圆角与裁剪组合使用，你就能用极少的代码，轻松实现复杂多样的图片展示效果。想亲手体验的话，运行以下命令克隆项目，跑一跑官方示例，很快就能上手：

git clone https://gitcode.com/gh_mirrors/su/SuperImageView

从今天起，让图片效果不再是开发路上的绊脚石吧！🎉

【免费下载链接】SuperImageViewCrop and Rounded Corners added to an ImageView.项目地址: https://gitcode.com/gh_mirrors/su/SuperImageView