如何使用Swift快速编程对齐多个事物

Posted 2021-04-19

我正在学习如何在Swift中进行编码，遇到了一个我很难弄清的问题。我创建了三个元素，标签，textView和一个按钮。我正在尝试使用Swift（没有情节提要）动态地对齐它们。问题在于，根据屏幕的不同，文本视图在较小的屏幕上会与其他元素重叠，而在较大的屏幕上它会很好地工作。我想知道是否有人可以帮助我弄清楚我要去哪里错了。

这里是代码：

let legalLabel = UILabel(frame: CGRect(x:0, y: 50, width: self.view.frame.size.width, height: 80))
    legalLabel.font = UIFont(name: "Chalkduster", size: 40)
    legalLabel.backgroundColor = .black
    legalLabel.center.x = self.view.center.x
    //legalLabel.center.y = self.view.center.y
    legalLabel.textAlignment = .center
    legalLabel.text = "Disclaimer"
    legalLabel.textColor = .white
    self.view.addSubview(legalLabel)


    let paragrahLabel = UITextView(frame: CGRect(x: 0, y: 90, width: self.view.frame.size.width, height: 375))
    paragrahLabel.font = UIFont(name: "Chalkboard SE", size: 13)
    paragrahLabel.center.x = self.view.center.x
    paragrahLabel.center.y = self.view.center.y
    paragrahLabel.textAlignment = .center
    paragrahLabel.text =
        "By playing this game, all players agree to the conditions below. 

 If players are consuming alcoholic beverages while playing, all players must vow they are of legal age according to their local laws. Slighty Drunk does not take any liability and is not responsbile for actions caused by the players nor are they responsible to the players. 

 Please Play Responsibly.
 DO NOT DRINK AND DRIVE.

 All players must also acknowledge, understand the risks and dangers associated with drinking alcohol.

 This game does not condone excessive drinking nor does the creator.

 Thank You!"
    paragrahLabel.textColor = .white
    paragrahLabel.backgroundColor = .black
    paragrahLabel.isEditable = false
    paragrahLabel.isUserInteractionEnabled = false
    self.view.addSubview(paragrahLabel)


   let continueButton = UIButton(frame: CGRect(x: 0, y: 550, width: 300, height: 50))
    continueButton.setTitle("Continue", for: .normal)
    continueButton.layer.borderWidth = 1;
    continueButton.layer.cornerRadius = 22;
    continueButton.layer.borderColor = UIColor.white.cgColor
    continueButton.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
    continueButton.center.x = self.view.center.x
    continueButton.center.y =  paragrahLabel.center.y + 250
    self.view.addSubview(continueButton)

这是我想要的样子。 Image

谢谢您的帮助。

答案

我将在解决方案中进行一些解释。这利用了VFL布局。更多信息here

这是假设您在view / viewController中

    lazy var legalLabel: UILabel = {
        let legalLabel = UILabel()
        legalLabel.translatesAutoresizingMaskIntoConstraints = false // we inform the view that we will be adding our own layout constraints here
        legalLabel.backgroundColor = .black
        legalLabel.textAlignment = .center
        legalLabel.text = "Disclaimer"
        legalLabel.textColor = .white
        legalLabel.setContentHuggingPriority(.required, for: .vertical)
        legalLabel.setContentCompressionResistancePriority(.required, for: .vertical) // make sure that it only occupies only the space it needs
        return legalLabel
    }()

// <other elements>

设置完所有这些之后，您需要添加约束。我更喜欢使用其他方法来使其更清洁

    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[label]|", options: [], metrics: nil, views: ["label": legalLabel]))
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[descLabel]|", options: [], metrics: nil, views: ["descLabel": descLabel]))
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[button]|", options: [], metrics: nil, views: ["button": continueButton]))
// align everyting vertically. You might need to read more on vfl constraints. basically I put everyting on top of each other and added a bottom padding between button and superView. this way the button will always be attached to view above it, in our case the desclabel
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[label][descLabel]-10-[button(==44)]->=0-|", options: [], metrics: nil, views: ["button": continueButton, "descLabel": descLabel, "label": legalLabel]))

注意，这没有考虑到设备的安全布局。