如何使用自动布局保持圆形图像视图?

问题描述

如何将矩形图像视图转换为可以在自动布局中保持形状而无需设置宽度和高度限制的圆形图像视图?从而允许 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，以便在每次图像视图的边界更改时设置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.

编辑

一个例子可能是这样的:

An example might look something like this:

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).

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