如何使用自动布局保持圆形imageView轮？ [英] How to keep a round imageView round using auto layout?

问题描述

如何将矩形图像视图转换为可以在自动布局中保持形状而不设置宽度和高度限制的圆形图像视图？从而允许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 cell constraint setup:

以下是配置文件pic约束设置：

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

当我移除底部约束并将相同高度的.637乘数添加到superview时会发生什么。

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

推荐答案

很遗憾，你不能使用 cornerRadius 和autolayout - 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轮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！