根据设备尺寸圈出收集视图图像 [英] circle collectionview image according to device size

问题描述

您好在我的水平collectionview中，我想圈出图像，如果我设置静态的高度和宽度，它可以工作，但是如果我设置约束，它就不工作 iam使用此方法来圈出我的图片

Hello in my horizontal collectionview i want to circle image , if i set static height and width it works but it does not work if i set constraint iam using this method to circle my image

    public static func circularImageWhite(photoImageView: UIImageView?)
{
    photoImageView!.layer.frame = photoImageView!.layer.frame.insetBy(dx: 0, dy: 0)
    photoImageView!.layer.borderColor = UIColor.white.cgColor
    photoImageView!.layer.cornerRadius = photoImageView!.frame.height/2
    photoImageView!.layer.masksToBounds = false
    photoImageView!.clipsToBounds = true
    photoImageView!.layer.borderWidth = 1
    photoImageView!.contentMode = UIViewContentMode.scaleAspectFill
}

我想在每个设备上画圈图像

i want to circle image on every device

推荐答案

关于您的代码的所有信息都是错误的.

Everything about your code is wrong.

photoImageView!.layer.frame = photoImageView!.layer.frame.insetBy(dx: 0, dy: 0)

那条线是没有意义的.如果将帧插入零，则不会更改它.所以那条线什么都不做.

That line is meaningless. If you inset the frame by zero you are not changing it. So that line does nothing at all.

photoImageView!.layer.masksToBounds = false
photoImageView!.clipsToBounds = true

图层的masksToBounds和视图的clipsToBounds实际上是完全相同的属性.因此，您要将相同的属性设置为false，然后在下一行返回到true.因此，这两行中的第一行什么也不做.

A layer's masksToBounds and a view's clipsToBounds are actually the very same property. So you are setting the same property to false and then back to true in the very next line. Thus the first of those two lines does nothing at all.

photoImageView!.layer.cornerRadius = photoImageView!.frame.height/2

这实际上是问题的核心.问题是您要根据框架高度设置拐角半径.但这假设您知道框架是什么.你不知道就像您自己说的那样，如果在视图上设置自动布局约束，则此方法无效.为什么?由于事情发生的顺序:

That is actually the heart of the matter. The problem is that you are setting the corner radius according to the frame height. But that assumes you know what the frame is. You don't. As you yourself said, this doesn't work if you set autolayout constraints on your view. Why? Because of the order in which things happen:

1. 首先，使用当前框架高度设置转角半径.

1. First, you use the current frame height to set the corner radius.

然后，约束开始生效并更改框架.因此，现在您之前设置的拐角半径不再适合"图像视图.

Then, the constraints kick in and change the frame. So now the corner radius that you set before doesn't "fit" the image view any more.

此外，设置拐角半径是将视图裁剪为圆形的一种糟糕方法.正确的方法是将视图 蒙版为实际的圆.

Moreover, setting the corner radius is a lousy way to clip a view to a circle. The correct way is to mask the view to an actual circle.

因此，总而言之:您应该使用覆盖其自身layoutSubviews的UIImageView子类，以将其自身的蒙版设置为适合当前大小的圆.由于大小因约束而变化时，将调用layoutSubviews，并且您的代码将更改遮罩以适合其大小.

So, to sum up: You should use a UIImageView subclass that overrides its own layoutSubviews to set its own mask to a circle that fits the current size. As the size changes due to constraints, layoutSubviews will be called and your code will change the mask to fit properly.

(白色圆形边框可以是绘制圆的另一层或子视图.)

(The white circular border can be yet another layer or subview that draws the circle.)

这个问题经常发生，我经常看到cornerRadius以同样的方式被误用，所以这是一个实际的实现:

The matter comes up quite often, and I often see the cornerRadius misused in this same way, so here's an actual implementation:

class CircleImageView : UIImageView {
     override func layoutSubviews() {
        super.layoutSubviews()
        self.layer.sublayers = nil
        let radius = min(self.bounds.height, self.bounds.width)/2
        let cen = CGPoint(x:self.bounds.width/2, y:self.bounds.height/2)
        let r = UIGraphicsImageRenderer(size:self.bounds.size)
        var im : UIImage?
        var outline : UIImage?
        r.image { ctx in
            let con = ctx.cgContext
            UIColor.black.setFill()
            con.addArc(center: cen, radius: radius, 
                startAngle: 0, endAngle: .pi*2, clockwise: true)
            let p = con.path
            con.fillPath()
            im = ctx.currentImage
            con.clear(CGRect(origin:.zero, size:self.bounds.size))
            con.addPath(p!)
            UIColor.clear.setFill()
            UIColor.white.setStroke() // border color, change as desired
            con.setLineWidth(4) // border width, change as desired
            con.strokePath()
            outline = ctx.currentImage
        }
        // the circle mask
        let iv = UIImageView(image:im)
        iv.contentMode = .center
        iv.frame = self.bounds
        self.mask = iv
        // the border
        let iv2 = UIImageView(image:outline)
        iv2.contentMode = .center
        iv2.frame = self.bounds
        self.addSubview(iv2)
    }
}

结果:

使用CircleImageView作为图像视图，您将获得正确的结果.我再说一遍:重要的是，无论随后如何调整CircleImageView本身的大小，它都将继续起作用.

Use CircleImageView as your image view and you'll get the right result. I repeat: the important thing is that this will continue to work no matter how the CircleImageView itself is subsequently resized.

这篇关于根据设备尺寸圈出收集视图图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！