如何使用自动布局保持圆形imageView轮？

Question

如何将矩形图像视图转换为可以在自动布局中保持形状而不设置宽度和高度限制的圆形图像视图？从而允许imageView定义它的大小,并且相对于其周围的对象,其大小越来越小,具有前导,尾随,顶部和底部约束.

前几天我问了一个类似的问题,但我认为这可能会以更简洁的方式提出.非常感谢!

编辑

好的,我开始尝试尽可能简单.我有一个名为"Cell"的视图和一个名为"dog"的UIImageView,就是这样.我不再在控制台中"无法同时满足约束",只是使用自动布局的两个简单视图.我仍在尝试使用此代码来绕过UIImageView:

profileImageView.layer.cornerRadius = profileImageView.frame.size.width / 2
profileImageView.clipsToBounds = true

这是单元格约束设置:

这是配置文件pic约束设置:

这是没有代码的结果,没有舍入,但是很好和正方形:

以下是圆形代码的结果:

这对我来说没有意义,因为没有舍入代码,图像是方形的,并且代码是菱形的.如果它是正方形不应该是一个没有问题的圆圈？

编辑2

这是当我删除底部约束并为superview添加相同高度的.637乘数时发生的情况.

Answer 1

不幸的是你无法使用cornerRadius和autolayout 这样做- CGLayer不受autolayout的影响,所以视图大小的任何变化都不会改变一旦设置的半径,正如你所注意到的那样,圆圈会失去它的形状.

您可以创建UIImageView和覆盖的自定义子类,layoutSubviews以便cornerRadius每次更改imageview的边界时进行设置.

编辑

示例可能如下所示:

class Foo: UIImageView {
    override func layoutSubviews() {
        super.layoutSubviews()

        let radius: CGFloat = self.bounds.size.width / 2.0

        self.layer.cornerRadius = radius
    }
}

显然,您必须将Foobar实例的宽度约束为与高度相同(以保持圆形).您可能还希望将Foobar实例设置为contentMode,UIViewContentMode.ScaleAspectFill以便它知道如何绘制图像(这意味着可能会裁剪图像).

Answer 2

在viewWillLayoutSubviews中设置半径将解决问题

override func viewWillLayoutSubviews() {
  super.viewWillLayoutSubviews()
  profileImageView.layer.cornerRadius = profileImageView.frame.height / 2.0
}

Answer 3

在你的.h文件中创建新界面

@interface CornerClip : UIImageView

@end

和.m文件中的实现一样

@implementation cornerClip


-(void)layoutSubviews
{
    [super layoutSubviews];

    CGFloat radius = self.bounds.size.width / 2.0;

    self.layer.cornerRadius = radius;

}

@end

现在只需将class作为"CornerClip"给你的imageview.100%工作......享受

Answer 4

首先，我应该提到只有当宽度和高度相等时，您才能为 UIView/UIImageView 获得圆形。理解这一点很重要。在所有其他情况下（当 width != height 时），您不会得到圆形，因为您的 UI 实例的初始形状是矩形。

好的，有了这个，UIKit SDK 为开发人员提供了一种机制来操纵 UIview 的图层实例以某种方式更改图层的任何参数，包括设置一个mask用自定义元素替换 UIView 元素的初始形状。这些工具是IBDesignable/IBInspectable。目标是直接通过 Interface Builder 预览我们的自定义视图。

因此，使用这些关键字我们可以编写我们的自定义类，它将只处理单个条件，无论我们是否需要为我们的 UI 元素圆角。

例如，让我们创建从UIImageView扩展的类。

@IBDesignable
class UIRoundedImageView: UIImageView {

    @IBInspectable var isRoundedCorners: Bool = false {
        didSet { setNeedsLayout() }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        if isRoundedCorners {
            let shapeLayer = CAShapeLayer()
            shapeLayer.path = UIBezierPath(ovalIn:
                CGRect(x: bounds.origin.x, y: bounds.origin.y, width: bounds.width, height: bounds.height
            )).cgPath
            layer.mask = shapeLayer
        }
        else {
            layer.mask = nil
        }

    }

}

为您的 UIImageView 元素（狗图片所在的位置）设置类名后，在您的故事板中，您将获得一个新选项，出现在Attributes Inspector菜单中（详细信息见截图）。

最后的结果应该是这样的。

Answer 5

添加 1:1 的纵横比约束，使其imageView保持圆形，无论高度或宽度如何变化。