在Xcode Storyboard中调整图片尺寸适配UIImageView实现圆角效果

问题核心原因 #

圆角属性默认作用于UIImageView的图层边界，当内部图片尺寸小于UIImageView尺寸、且填充模式未设置为撑满时，图片不会触及UIImageView的边界，自然不会触发圆角裁剪。仅调整UIImageView的约束只会修改视图本身的尺寸，不会改变内部图片的填充规则，因此无法解决问题。

具体解决步骤 #

• 第一步：设置正确的图片填充模式
  优先选择UIViewContentModeScaleAspectFill，既可以让图片撑满整个UIImageView，还能保持图片原有宽高比，不会出现拉伸变形。如果接受图片拉伸适配，也可选择UIViewContentModeScaleToFill。
• 第二步：开启边界裁剪
  必须开启clipsToBounds属性，否则超出UIImageView边界的图片内容不会被裁剪，圆角效果同样无法生效。
• 第三步：设置圆角数值
  根据需求给layer.cornerRadius赋值即可，若需要实现全圆角，可将数值设置为UIImageView高度的1/2（仅适用于正方形UIImageView）。

代码示例 #

Swift 版本 #

let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
imageView.image = UIImage(named: "your_image")
// 设置填充模式
imageView.contentMode = .scaleAspectFill
// 开启边界裁剪
imageView.clipsToBounds = true
// 设置圆角为10pt
imageView.layer.cornerRadius = 10

Objective-C 版本 #

UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
imageView.image = [UIImage imageNamed:@"your_image"];
// 设置填充模式
imageView.contentMode = UIViewContentModeScaleAspectFill;
// 开启边界裁剪
imageView.clipsToBounds = YES;
// 设置圆角为10pt
imageView.layer.cornerRadius = 10;

Storyboard/Xib 配置方式 #

1. 选中目标UIImageView，打开Attributes Inspector面板
2. 在View分类下，将Content Mode修改为Aspect Fill，同时勾选Clips To Bounds选项
3. 若要可视化设置圆角，可打开Identity Inspector面板，在User Defined Runtime Attributes中添加一条配置：Key Path填layer.cornerRadius，Type选Number，Value填你需要的圆角数值

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