Question

我正在尝试制作一个自定义警报视图，并面临一些问题，即所显示的视图正在切割视图的下半部分（下图）

如何显示

How it's being displayed

期望输出：

Desired output

所以基本上，我有一个名为CustomAlertView的XIB，它由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]

}

我有另一个类负责使用customAlertView创建一个警报CustomAlert。这个CustomAlert类使用以下代码创建 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链接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.选择fileowner并删除该类（默认为NSObject）。 2.选择文件所有者，然后删除所有插座。 3.选择您的内容视图，并为其指定class = CustomAlertView。 4.选择CustomAlertView并建立所有插座连接。

最终Xib：

你有一个工作警报：

PS：相应调整用户界面。

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类中添加以下内容：

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]

3 个答案: