关于使用矩形图像创建圆形UIImageView的问题答案

【问题标题】：Questions about creating circular UIImageView using rectangular image关于使用矩形图像创建圆形UIImageView的问题
【发布时间】：2016-02-04 02:12:22
【问题描述】：

现在我想创建一个圆形图像视图，当我对其应用不同形状（如矩形）的图像时，它仍然可以保持圆形形状。谷歌搜索后，我有以下代码：

self.avatarImageView = ({
    UIImageView *imageView = [UIImageView new];
    imageView.translatesAutoresizingMaskIntoConstraints = NO;
    imageView.image = [UIImage imageNamed:@"blueRoundRect"];
    imageView.alpha = 1.0;
    imageView;
});
[self.view addSubview:self.avatarImageView];

[self.avatarImageView mas_makeConstraints:^(MASConstraintMaker *make){
    make.top.equalTo(self.loginButton.mas_bottom);
    make.width.equalTo(@(2 * avatarImageViewRadius));
    make.height.equalTo(@(2 * avatarImageViewRadius));
    make.centerX.equalTo(self.view.mas_centerX);
}];
self.avatarImageView.layer.cornerRadius = avatarImageViewRadius;    //Create a circular avatar imageView.
self.avatarImageView.layer.masksToBounds = YES;

代码是用viewDidLoad 编写的，如您所见，我在Masonry 的帮助下进行自动布局。但是当我运行应用程序时，imageView 仍然是矩形，但图像形状似乎从矩形变为圆角矩形（我使用的原始图像是矩形蓝色图像）。有什么想法吗？

如果我创建一个新类 AvatarImageView 并将以下代码放入其中：

- (instancetype)initWithImage:(UIImage *)image
{
    self = [super initWithImage:image];

    if (self)
    {
        self.translatesAutoresizingMaskIntoConstraints = NO;
        self.image = image;
    }

    return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    self.layer.cornerRadius = self.frame.size.width / 2;
    self.layer.masksToBounds = YES;
}

在视图控制器的viewDidLoad 中我写道：

self.avatarImageView = [[BBTAvatarImageView alloc] initWithImage:[UIImage imageNamed:@"blueRoundRect"]];
[self.view addSubview:self.avatarImageView];
[self.avatarImageView mas_makeConstraints:^(MASConstraintMaker *make){
    make.top.equalTo(self.loginButton.mas_bottom);
    make.width.equalTo(@(2 * avatarImageViewRadius));
    make.height.equalTo(@(2 * avatarImageViewRadius));
    make.centerX.equalTo(self.view.mas_centerX);
}];

但结果和以前一样。

【问题讨论】：

您的图像视图 (avatarImageView) 似乎比容器视图 (self.view) 大，因此被裁剪。尝试增加容器大小或减少avatarImageViewRadius。
截图简直就是imageView，灰框不是self.view的边界而是self.avatarImageView的边界
你到底是怎么得到那个灰框的？是否有一些代码可以在 imageView 的图层上设置边框颜色，或者其他什么？
不，这是视图调试器的截图，它会自动添加一个框架。
哦，我想我明白了。您的原始方形图像比 imageView 小，因此它居中。将 imageView 的内容模式设置为拉伸/缩放以填充，因此它会占用整个图像视图。

标签： ios objective-c uiimageview

【解决方案1】：

你可以通过取一个正方形并对其应用圆角来得到一个圆，圆角半径等于边长的 1/2。

你不能从一个圆角矩形得到一个椭圆形，除非你可以把角变成一个非圆形，Apple 不再支持。您必须自己构建角形状。

如果您尝试在 viewDidLoad 中设置圆形，它可能无法正常工作。在 viewDidLoad 中，您的视图控制器的视图尚未针对当前屏幕尺寸和旋转调整大小/布局。您想在 layoutSubviews 中计算尺寸和角半径值。

【讨论】：

我创建了一个新的AvatarImageView 类并将设置其角半径的代码放入方法layoutSubviews 中，并在ViewController 中创建了它的一个实例，但结果仍然相同。
啊，当我将self.view 的背景设置为蓝色时，我就明白了。原来是因为图片周围有白色边框！?

【解决方案2】：

这可以帮助你循环图像

self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
self.imageView.clipsToBounds = YES;
[self.imageView setImage:image];

【讨论】：