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

问题描述

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

How do I turn a rectangular image view into a circular image view that can hold shape in auto layout without setting width and height restraints? Thereby allowing the imageView to define it’s size, and size bigger and smaller relative to objects around it with leading, trailing, top, and bottom constraints.

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

I asked a similar question the other day, but I think this might be posed in a more concise way. Thanks so much!

编辑

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

Ok, I started over to make this as simple as possible. I have a view named "Cell" and a UIImageView named "dog" within the cell, and that's it. I don't have "unable to simultaneously satisfy constraints" in the console anymore, just two simple views using auto layout. I'm still trying to use this code to round the UIImageView:

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

这是单元格约束设置:

这是配置文件图片约束设置:

Here is the profile pic constraint setup:

这是没有代码的结果，没有四舍五入，但又漂亮又方形:

Here is the result without the code, no rounding, but nice and square:

这是带有要四舍五入的代码的结果:

Here is the result with the code to round:

这对我来说毫无意义，因为没有四舍五入代码，图像是方形的，而代码是菱形的.如果它是方形的，它不应该是一个没有问题的圆形吗?

This makes no sense to me, because without the rounding code the image is square, and with the code it's diamond shaped. If it's square shouldn't it be a circle with no issues?

编辑 2

当我移除底部约束并将 0.637 的乘数添加到超级视图的相等高度时，会发生以下情况.

Here's what happens when I remove the bottom constraint and add a multiplier of .637 for equal height to superview.

推荐答案

很遗憾，你不能使用 cornerRadius 和自动布局来做到这一点 - CGLayer 不受自动布局的影响，所以视图大小的任何更改都不会更改已设置的半径，正如您所注意到的那样，圆会失去其形状.

Unfortunately you cannot do this using cornerRadius and autolayout — the CGLayer is not affected by autolayout, so any change in the size of the view will not change the radius which has been set once causing, as you have noticed, the circle to lose its shape.

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

You can create a custom subclass of UIImageView and override layoutSubviews in order to set the cornerRadius each time the bounds of the imageview change.

编辑

示例可能如下所示:

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 以便它知道如何绘制图像(这意味着图片可能会被裁剪).

And obviously you would have to constrain the Foobar instance's width to be the same as the height (to maintain a circle). You would probably also want to set the Foobar instance's contentMode to UIViewContentMode.ScaleAspectFill so that it knows how to draw the image (this means that the image is likely to be cropped).

这篇关于如何使用自动布局保持圆形 imageView 圆形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！