我的自定义 UIview 类中的主视图边框位于另一个视图之上

来自 Apple 的文档：“边框......合成在接收器的内容和子层之上......”

layer.border因此，如果我们向视图添加子视图，并像这样设置视图的属性：

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        let mainView = UIView(frame: .init(x: 40, y: 100, width: 120, height: 100))
        let subView = UIView(frame: .init(x: 60, y: 60, width: 100, height: 60))
        
        mainView.backgroundColor = .systemBlue
        subView.backgroundColor = .systemYellow
        
        view.addSubview(mainView)
        mainView.addSubview(subView)
        
        mainView.layer.borderColor = UIColor.red.cgColor
        mainView.layer.borderWidth = 4
        
    }
}

我们得到这个结果：

相反，正如matt评论所说，我们想要绘制（使用CAShapeLayer）带边框的形状：

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        let mainView = UIView(frame: .init(x: 40, y: 100, width: 120, height: 100))
        let subView = UIView(frame: .init(x: 60, y: 60, width: 100, height: 60))
        
        mainView.backgroundColor = .systemBlue
        subView.backgroundColor = .systemYellow

        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = 4
        shapeLayer.strokeColor = UIColor.red.cgColor
        shapeLayer.fillColor = UIColor.systemBlue.cgColor
        
        let path = UIBezierPath(rect: .init(x: 0, y: 0, width: 120, height: 100))
        shapeLayer.path = path.cgPath
        mainView.layer.addSublayer(shapeLayer)
        
        view.addSubview(mainView)
        mainView.addSubview(subView)
        
    }
}

我们得到了这个：

这是经过修改的课程CAShapeLayer- 查找以以下内容开头的相关评论// DonMag -：

class AppStyle: NSObject {
    static let shared = AppStyle()
    
    let primaryColor = UIColor(red: 0.260, green: 0.346, blue: 0.579, alpha: 1.0)
    
    func headerFont(size: CGFloat) -> UIFont {
        return UIFont.systemFont(ofSize: size, weight: .bold)
    }
}

class LeaderboardCircleView: UIView {
    private let mainLabel = UILabel()
    let rankBadgeView = UIView()
    private let rankLabel = UILabel()
    private let scoreLabel = UILabel()
    
    // DonMag - this shape layer will draw the main bordered-circle
    private let mainCircleLayer: CAShapeLayer = CAShapeLayer()
    
    init(mainText: String, rankText: String, backgroundColor: UIColor, score: Int) {
        super.init(frame: .zero)
        setupViews()
        configure(mainText: mainText, rankText: rankText, backgroundColor: backgroundColor, score: score)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    private func updateScoreLabelWith(score: Int) {
        let trophyAttachment = NSTextAttachment()
        trophyAttachment.image = UIImage(systemName: "trophy.fill")?.withTintColor(.systemYellow, renderingMode: .alwaysOriginal)
        trophyAttachment.bounds = CGRect(x: 0, y: -2, width: 16, height: 16)
        
        let trophyString = NSAttributedString(attachment: trophyAttachment)
        let scoreString = NSAttributedString(string: " \(score) pts", attributes: [
            .font: AppStyle.shared.headerFont(size: 12),
            .foregroundColor: UIColor.darkGray
        ])
        
        let fullScoreText = NSMutableAttributedString()
        fullScoreText.append(trophyString)
        fullScoreText.append(scoreString)
        
        scoreLabel.attributedText = fullScoreText
    }
    
    
    private func setupViews() {
        // DonMag - don't set self's layer border properties
        //layer.borderWidth = 2
        //layer.borderColor = UIColor.red.cgColor // AppStyle.shared.primaryColor?.cgColor
        
        // DonMag - main circle properties
        mainCircleLayer.lineWidth = 4
        mainCircleLayer.strokeColor = AppStyle.shared.primaryColor.cgColor
        
        // DonMag - add circle shape layer
        layer.addSublayer(mainCircleLayer)
        
        translatesAutoresizingMaskIntoConstraints = false
        clipsToBounds = false
        
        mainLabel.translatesAutoresizingMaskIntoConstraints = false
        mainLabel.textAlignment = .center
        mainLabel.adjustsFontSizeToFitWidth = true
        mainLabel.minimumScaleFactor = 0.5
        mainLabel.numberOfLines = 2
        mainLabel.font = AppStyle.shared.headerFont(size: 18)
        mainLabel.textColor = .white
        addSubview(mainLabel)
        
        rankBadgeView.translatesAutoresizingMaskIntoConstraints = false
        rankBadgeView.clipsToBounds = true
        rankBadgeView.backgroundColor = AppStyle.shared.primaryColor
        
        // DonMag - not needed
        //rankBadgeView.layer.zPosition = 1  // Sends it behind the border
        
        addSubview(rankBadgeView)
        
        rankLabel.translatesAutoresizingMaskIntoConstraints = false
        rankLabel.textAlignment = .center
        rankLabel.font = AppStyle.shared.headerFont(size: 12)
        rankLabel.textColor = .white
        rankBadgeView.addSubview(rankLabel)
        
        scoreLabel.translatesAutoresizingMaskIntoConstraints = false
        scoreLabel.textAlignment = .center
        scoreLabel.adjustsFontSizeToFitWidth = true
        scoreLabel.minimumScaleFactor = 0.5
        scoreLabel.numberOfLines = 1
        addSubview(scoreLabel)
        
        NSLayoutConstraint.activate([
            mainLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
            mainLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10),
            mainLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
            mainLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            
            rankBadgeView.centerXAnchor.constraint(equalTo: centerXAnchor),
            rankBadgeView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 12),
            rankBadgeView.widthAnchor.constraint(equalToConstant: 30),
            rankBadgeView.heightAnchor.constraint(equalToConstant: 30),
            
            rankLabel.centerXAnchor.constraint(equalTo: rankBadgeView.centerXAnchor),
            rankLabel.centerYAnchor.constraint(equalTo: rankBadgeView.centerYAnchor),
            
            scoreLabel.topAnchor.constraint(equalTo: rankBadgeView.bottomAnchor, constant: 4),
            scoreLabel.centerXAnchor.constraint(equalTo: centerXAnchor)
        ])
        
        // DonMag - not needed
        //bringSubviewToFront(rankBadgeView)
        //rankBadgeView.bringSubviewToFront(scoreLabel)
    }
    
    private func configure(mainText: String, rankText: String, backgroundColor: UIColor, score: Int) {
        mainLabel.text = mainText
        
        // DonMag - set self background to clear
        self.backgroundColor = .clear
        
        // DonMag - main circle layer fill color
        mainCircleLayer.fillColor = backgroundColor.cgColor
        
        rankLabel.text = rankText
        
        let trophyAttachment = NSTextAttachment()
        trophyAttachment.image = UIImage(systemName: "trophy.fill")?.withTintColor(.systemYellow, renderingMode: .alwaysOriginal)
        trophyAttachment.bounds = CGRect(x: 0, y: -2, width: 16, height: 16)
        
        let trophyString = NSAttributedString(attachment: trophyAttachment)
        let scoreString = NSAttributedString(string: " \(score) pts", attributes: [
            .font: AppStyle.shared.headerFont(size: 12),
            .foregroundColor: UIColor.darkGray
        ])
        
        let fullScoreText = NSMutableAttributedString()
        fullScoreText.append(trophyString)
        fullScoreText.append(scoreString)
        
        scoreLabel.attributedText = fullScoreText
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // DonMag - don't set self's corner radius
        //layer.cornerRadius = bounds.width / 2

        // DonMag - oval (circle) path for main circle
        mainCircleLayer.path = UIBezierPath(ovalIn: bounds).cgPath
        
        rankBadgeView.layer.cornerRadius = rankBadgeView.bounds.width / 2
        
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.2
        layer.shadowRadius = 6.0
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.masksToBounds = false
        
        rankBadgeView.layer.shadowColor = UIColor.black.cgColor
        rankBadgeView.layer.shadowOpacity = 0.2
        rankBadgeView.layer.shadowRadius = 4.0
        rankBadgeView.layer.shadowOffset = CGSize(width: 0, height: 2)
        rankBadgeView.layer.masksToBounds = false
    }
    
    func update(mainText: String, rankText: String, backgroundColor: UIColor, score: Int) {
        configure(mainText: mainText, rankText: rankText, backgroundColor: backgroundColor, score: score)
    }
}

现在我们得到了想要的结果，没有重叠的边框：

问题不在于视图的 z-index 排序。

rankBadgeView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 12)
这条线位于主视图底部下方rankBadgeView 12 个点的LeaderboardCircleView位置 ( )。由于徽章严格来说位于边界之外，因此无论 z 位置或 如何，边框都会绘制在其上方bringSubviewToFront()。

即使您设置：

clipsToBounds = false 

图层的边框渲染不符合您预期，无法尊重子视图 zPosition 的边界外属性。在 Core Animation 中，除非您将边框移入子视图或将其遮罩，否则边框会绘制在所有内容之上。

您可以在边界rankBadgeView 内移动

不要将徽章放在主视图下方12 点的位置：

rankBadgeView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -6) 

这样可以让徽章保持在边界内。结合适当的 z 位置，徽章将显示在边界上方。如果有效，请告诉我。