在Swift中建立个人资料图片的圆形图片集：如何将最后一张照片隐藏在第一张照片下？

我认为尝试分割图像以超过/低于z索引不会取得太大的成功。

一种方法是使用遮罩以使图像视图看起来重叠。

总体思路是：

• 子类 UIImageView
• 在layoutSubviews（）中
• 将cornerRadius应用于图层以使图像变圆
• 从“重叠视图”获得矩形
• 将该矩形转换为本地坐标
• 将矩形扩展到所需的“轮廓”宽度
• 从那个矩形得到一条椭圆形的路径
• 结合自我之路
• 将其用作遮罩层

这是一个例子。

我不完全确定您的尺寸计算在做什么……试图按EventDetailsFacepileView原样在视图的右下角给我小图像？

因此，我EventDetailsFacepileView通过以下几种方式修改了您：

• 使用名为“ pro1”到“ pro5”的本地图片（您应该可以用替换SDWebImage）
• 使用自动布局约束而不是显式框架
• 使用MyOverlapImageView类来处理遮罩

代码-无@IBOutlet连接，因此只需将空白视图控制器设置为OverlapTestViewController：

class OverlapTestViewController: UIViewController {
    
    let facePileView = MyFacePileView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        facePileView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(facePileView)
        
        facePileView.dimension = 120
        let sz = facePileView.sizeThatFits(.zero)
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            facePileView.widthAnchor.constraint(equalToConstant: sz.width),
            facePileView.heightAnchor.constraint(equalTo: facePileView.widthAnchor),
            facePileView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            facePileView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
        ])
        
        facePileView.profilePicNames = [
            "pro1", "pro2", "pro3", "pro4", "pro5"
        ]
        
    }
    
}

class MyFacePileView: UIView {
    var dimension: CGFloat = 66.0
    lazy var radius: CGFloat = dimension / 1.68
    
    private var profilePicViews: [MyOverlapImageView] = []
    
    var profilePicNames: [String] = [] {
        didSet {
            updateView()
        }
    }
    
    func updateView() {
        self.profilePicViews = profilePicNames.map({ (profilePic) -> MyOverlapImageView in
            let imageView = MyOverlapImageView()
            if let img = UIImage(named: profilePic) {
                imageView.image = img
            }
            return imageView
        })
        
        // add MyOverlapImageViews to self
        //  and set width / height constraints
        self.profilePicViews.forEach { (imageView) in
            self.addSubview(imageView)
            imageView.translatesAutoresizingMaskIntoConstraints = false
            imageView.widthAnchor.constraint(equalToConstant: dimension).isActive = true
            imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor).isActive = true
        }
        
        // start at "12 o'clock"
        var curAngle: CGFloat = .pi * 1.5
        // angle increment
        let incAngle: CGFloat = ( 360.0 / CGFloat(self.profilePicViews.count) ) * .pi / 180.0

        // calculate position for each image view
        //  set center constraints
        self.profilePicViews.forEach { imgView in
            let xPos = cos(curAngle) * radius
            let yPos = sin(curAngle) * radius
            imgView.centerXAnchor.constraint(equalTo: centerXAnchor, constant: xPos).isActive = true
            imgView.centerYAnchor.constraint(equalTo: centerYAnchor, constant: yPos).isActive = true
            curAngle += incAngle
        }
        
        // set "overlapView" property for each image view
        let n = self.profilePicViews.count
        for i in (1..<n).reversed() {
            self.profilePicViews[i].overlapView = self.profilePicViews[i-1]
        }
        self.profilePicViews[0].overlapView = self.profilePicViews[n - 1]

        self.layer.borderColor = UIColor.green.cgColor
        self.layer.borderWidth = 2
        
    }
    
    override func sizeThatFits(_ size: CGSize) -> CGSize {
        let requiredSize = dimension * 2.0 + radius / 2.0
        return CGSize(width: requiredSize,
                      height: requiredSize)
    }

}

class MyOverlapImageView: UIImageView {
    
    // reference to the view that is overlapping me
    weak var overlapView: MyOverlapImageView?
    
    // width of "outline"
    var outlineWidth: CGFloat = 6
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // make image round
        layer.cornerRadius = bounds.size.width * 0.5
        layer.masksToBounds = true

        let mask = CAShapeLayer()
        
        if let v = overlapView {
            // get bounds from overlapView
            //  converted to self
            //  inset by outlineWidth (negative numbers will make it grow)
            let maskRect = v.convert(v.bounds, to: self).insetBy(dx: -outlineWidth, dy: -outlineWidth)
            // oval path from mask rect
            let path = UIBezierPath(ovalIn: maskRect)
            // path from self bounds
            let clipPath = UIBezierPath(rect: bounds)
            // append paths
            clipPath.append(path)
            mask.path = clipPath.cgPath
            mask.fillRule = .evenOdd
            // apply mask
            layer.mask = mask
        }
    }
    
}

结果：

（我通过搜索google来抓取随机图像sample profile pictures）