使用Auto Layout代码对齐自定义UIView出现空白屏，求排查错误

嘿，我来帮你梳理下代码里的问题，这几个点直接导致了你的自定义视图无法显示：

1. 自定义Square视图的初始化逻辑问题 #

在你的makeSquare方法里，手动设置self.layer.frame = self.bounds完全没必要，而且时机不对：

• 当开启Auto Layout（设置translatesAutoresizingMaskIntoConstraints = false）后，视图的frame会由约束决定，初始化时传入的frame会被直接忽略。
• 直接设置self.backgroundColor比操作layer的backgroundColor更简单，也符合UIView的常规使用逻辑。
• 你没有给Square视图提供明确的尺寸来源，Auto Layout无法计算它的宽高，最终导致视图被压缩到0x0的大小，自然看不到内容。

2. Auto Layout约束的关键错误 #

你的约束设置存在几个逻辑问题：

• 缺少明确的宽高约束：仅设置greaterThanOrEqualTo类型的边缘约束，无法让Auto Layout确定视图的具体宽高，必须添加固定宽高约束，或者给视图设置intrinsicContentSize。
• trailing约束逻辑颠倒：sq1.trailingAnchor.constraint(greaterThanOrEqualTo: margin.trailingAnchor, constant: 20) 会让视图右边缘超出margin的右边缘20pt，这和你想让视图在margin内的预期相反，应该用lessThanOrEqualTo并配合负常数。
• 缺少垂直居中约束：只设置了水平居中（centerXAnchor），没有固定垂直方向的位置，加上没有高度约束，视图的垂直尺寸和位置都无法被Auto Layout确定。

修正后的代码 #

自定义Square视图代码 #

简化初始化逻辑，直接设置背景色，无需手动操作layer：

import UIKit

class Square: UIView{
    init(color: UIColor) {
        super.init(frame: .zero) // Auto Layout会管理frame，这里传.zero即可
        self.backgroundColor = color
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

控制器代码 #

补充宽高约束，修正trailing约束逻辑，并添加垂直居中约束：

import UIKit

class TestViewController: UIViewController{
    var margin: UILayoutGuide!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        margin = self.view.layoutMarginsGuide
        
        let sq1 = Square(color: UIColor.blue)
        view.addSubview(sq1)
        sq1.translatesAutoresizingMaskIntoConstraints = false
        
        // 水平+垂直居中
        sq1.centerXAnchor.constraint(equalTo: margin.centerXAnchor).isActive = true
        sq1.centerYAnchor.constraint(equalTo: margin.centerYAnchor).isActive = true
        
        // 设置明确的宽高
        sq1.widthAnchor.constraint(equalToConstant: 200).isActive = true
        sq1.heightAnchor.constraint(equalToConstant: 100).isActive = true
        
        // 可选：添加边缘间距约束，确保屏幕较小时视图不会超出margin范围
        sq1.topAnchor.constraint(greaterThanOrEqualTo: margin.topAnchor, constant: 20).isActive = true
        sq1.leadingAnchor.constraint(greaterThanOrEqualTo: margin.leadingAnchor, constant: 20).isActive = true
        sq1.trailingAnchor.constraint(lessThanOrEqualTo: margin.trailingAnchor, constant: -20).isActive = true
        sq1.bottomAnchor.constraint(greaterThanOrEqualTo: margin.bottomAnchor, constant: 20).isActive = true
    }
}

如果不想固定宽高，也可以给Square视图设置intrinsicContentSize，让Auto Layout自动使用这个默认尺寸：

class Square: UIView{
    private let intrinsicSize = CGSize(width: 200, height: 100)
    
    init(color: UIColor) {
        super.init(frame: .zero)
        self.backgroundColor = color
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override var intrinsicContentSize: CGSize {
        return intrinsicSize
    }
}

这种情况下，控制器里就不需要添加宽高约束了，其他约束保持不变即可。

内容的提问来源于stack exchange，提问作者jamesMcKey