XIB 视图未显示正确的布局 [iOS Swift]

Question

我正在尝试制作自定义警报视图，但遇到了一些问题，即显示的视图截断了视图的下半部分（下图）

显示方式：

期望输出：

所以基本上，我有一个名为 CustomAlertView 的 XIB，由 class 同名的 init 支持，如下所示：

    override init(frame: CGRect) {
    super.init(frame: frame)
    commonInit()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    commonInit()
}

private func commonInit() {
    Bundle.main.loadNibNamed("CustomAlertView", owner: self, options: nil)
    contentView.frame = self.bounds
    contentView.translatesAutoresizingMaskIntoConstraints = true
    addSubview(contentView)
    //contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

}

我有另一个 class 负责使用 customAlertView 创建警报 CustomAlert。此 CustomAlert class 正在使用以下代码创建 backgroundView 和 dialogView（我正在尝试将我的 customAlertView 添加到其中） :

func initialize(title:String, description:String){
    dialogView.clipsToBounds = true

    backgroundView.frame = frame
    backgroundView.backgroundColor = UIColor.black
    backgroundView.alpha = 0.6
    backgroundView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didTappedOnBackgroundView)))
    addSubview(backgroundView)

    dialogView.frame.origin = CGPoint(x: 0, y: 0)
    dialogView.frame.size = CGSize(width: frame.width-32, height: frame.height/3)

    dialogView.backgroundColor = UIColor.white
    dialogView.layer.cornerRadius = 6

    let alertView = CustomAlertView.init(frame: self.bounds)
    alertView.titleLabel.text = title
    alertView.descriptionLabel.text = description
    alertView.cancelButton.backgroundColor = UIColor.brown

    dialogView.addSubview(alertView)


    addSubview(dialogView)
}

我认为我混淆了框架和边界，但找不到解决方案。

我希望将所需的输出完美地放置在 dialogView 中。

编辑

CustomAlert 中我的 .show 函数的代码

func show(animated:Bool){

    self.backgroundView.alpha = 0
    self.dialogView.center = CGPoint(x: self.center.x, y: self.frame.height + self.dialogView.frame.height/2)
    UIApplication.shared.delegate?.window??.rootViewController?.view.addSubview(self)
    if animated {
        UIView.animate(withDuration: 0.33, animations: {
            self.backgroundView.alpha = 0.66
        })
        UIView.animate(withDuration: 0.33, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 10, options: UIViewAnimationOptions(rawValue: 0), animations: {
            self.dialogView.center  = self.center
        }, completion: { (completed) in

        })
    }else{
        self.backgroundView.alpha = 0.66
        self.dialogView.center  = self.center
    }
}

Github link git-alert-view

Answer 1

像这样更改您的 CustomAlertView：

class CustomAlertView: UIView {

    @IBOutlet weak var titleLabel: UILabel!
    @IBOutlet weak var descriptionLabel: UILabel!

    @IBOutlet weak var confirmButton: UIButton!
    @IBOutlet weak var cancelButton: UIButton!

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    static func customAlert() -> CustomAlertView {
        return Bundle.main.loadNibNamed("CustomAlertView", owner: self, options: nil)!.first as! CustomAlertView
    }

}

您的 CustomAlert 的初始化方法如下：

func initialize(title:String, description:String){
    dialogView.clipsToBounds = true

    backgroundView.frame = frame
    backgroundView.backgroundColor = UIColor.black
    backgroundView.alpha = 0.6
    backgroundView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didTappedOnBackgroundView)))
    addSubview(backgroundView)

    dialogView.frame.origin = CGPoint(x: 0, y: 0)
    dialogView.frame.size = CGSize(width: frame.width-32, height: frame.height/3)

    dialogView.backgroundColor = UIColor.white
    dialogView.layer.cornerRadius = 6

    let alertView = CustomAlertView.customAlert()
    alertView.titleLabel.text = title
    alertView.descriptionLabel.text = description
    alertView.cancelButton.backgroundColor = UIColor.brown


    dialogView.addSubview(alertView)

    addSubview(dialogView)

}

在 CustomAlertView xib 中： 1. Select 文件所有者并删除 class（默认为 NSObject）。 2. Select fileowner 然后删除所有网点。 3. Select 你的内容视图并给它 class = CustomAlertView。 4. Select 您的 CustomAlertView 并建立所有插座连接。

最终 XIB：

你有一个工作警报：

PS：相应调整UI。

Answer 2

对于和我遇到同样困难的人，我能够达到想要的结果。

我按照@HAK 的建议使用了 AutoLayouts。但是我没有自己编写 NSLayoutConstraint，而是使用了名为 TinyConstraints.

的 roberthein 库

基本上，我使用如下：

而不是

NSLayoutConstraint.activate([
alertView.topAnchor.constraint(equalTo: superview.topAnchor, constant: 0),
alertView.leadingAnchor.constraint(equalTo: superview.leadingAnchor, constant: 0),
alertView.bottomAnchor.constraint(equalTo: superview.bottomAnchor, constant: 0),
alertView.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: 
0)])

使用 TinyConstraints：

alertView.edges(to: superview)

就是这样

Answer 3

在你的 xib class 中添加：

override func awakeFromNib() {
    super.awakeFromNib()
    xibSetup()}

func xibSetup() {
    guard let view = loadViewFromNib() else { return }
    view.frame = bounds
    view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    addSubview(view)
    contentView = view
}

参考自：https://medium.com/zenchef-tech-and-product/how-to-visualize-reusable-xibs-in-storyboards-using-ibdesignable-c0488c7f525d#.3c0javomy**

XIB 视图未显示正确的布局 [iOS Swift]

XIB view not showing with correct layout [iOS Swift]

xib

uiview

ios

autolayout

swift