AutoLayout 约束或 StackView

Question

我需要一些关于自动布局的认真帮助。我总共有 12 个按钮，我试图将它们布局为键盘。最后应该是这个样子。

目前看起来像这样

这是我目前的限制条件。

我真的需要一些帮助来解决这个问题 out.Can 任何人都可以提供帮助。我是编程和 XCODE 的新手。但这不应该这么难。我能得到一些帮助吗？我看了一个又一个关于自动布局的教程，这是一个非常令人困惑的概念。我需要布置这个简单的钢琴键盘，请帮忙

谢谢

Answer 1

我建议尝试以编程方式设置约束，而不是在界面生成器中。通过这种方式，您将能够了解您的约束实际发生了什么，并且能够在界面构建器中轻松完成它们。

程序化自动布局约束符号分为三种类型： 1. init(item:attribute:relatedBy:toItem:attribute:multiplier:constant:)。当您需要基于百分比的布局（乘数）时最好使用。 2. 锚符号（iOS9 中的新功能）。我没有使用新的 Anchor 表示法的经验，但我知道它类似于界面构建器中的约束组合。但同样，您将无法准确了解约束对您的每个视图的作用。 3. constraintsWithVisualFormat。与第一个相同，但更简单。唯一的缺点是，如果您要按百分比调整视图的大小，它没有这样做的能力。

我希望你测试数字 3，因为你可以 "Visualize" 更多 constraintsWithVisualFormat 表示法。但在您开始之前，请打开 Visual Format language 参考以指导您自己。

首先，添加一个新的 swift 文件。将其命名为 KeyBoardView 并将下面的代码复制到其中。

class KeyboardView: UIView {
var redKey : UIView!
var orangeKey : UIView!
var yellowKey : UIView!
var greenKey : UIView!
var lightBlueKey : UIView!
var darkBlueKey : UIView!
var purpleKey : UIView!
var blackKey1 : UIView!
var blackKey2 : UIView!
var blackKey3 : UIView!
var blackKey4 : UIView!
var blackKey5 : UIView!


override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.clearColor()
    setup()
}

required init(coder aDecoder: NSCoder) {
    fatalError("This class does not support NSCoding")
}

func setup () {
    redKey = UIView()
    redKey.backgroundColor = UIColor.redColor()
    redKey.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(redKey!, atIndex: 10)

    orangeKey = UIView()
    orangeKey.backgroundColor = UIColor.orangeColor()
    orangeKey.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(orangeKey!, atIndex: 10)

    yellowKey = UIView()
    yellowKey.backgroundColor = UIColor.yellowColor()
    yellowKey.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(yellowKey, atIndex: 10)

    greenKey = UIView()
    greenKey.backgroundColor = UIColor.greenColor()
    greenKey.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(greenKey, atIndex: 10)

    lightBlueKey = UIView()
    lightBlueKey.backgroundColor = UIColor.blueColor()
    lightBlueKey.alpha = 0.5
    lightBlueKey.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(lightBlueKey, atIndex: 10)

    darkBlueKey = UIView()
    darkBlueKey.backgroundColor = UIColor.blueColor()
    darkBlueKey.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(darkBlueKey, atIndex: 10)

    purpleKey = UIView()
    purpleKey.backgroundColor = UIColor.purpleColor()
    purpleKey.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(purpleKey, atIndex: 10)

    blackKey1 = UIView()
    blackKey1.backgroundColor = UIColor.blackColor()
    blackKey1.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(blackKey1, atIndex: 11)

    blackKey2 = UIView()
    blackKey2.backgroundColor = UIColor.blackColor()
    blackKey2.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(blackKey2, atIndex: 11)

    blackKey3 = UIView()
    blackKey3.backgroundColor = UIColor.blackColor()
    blackKey3.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(blackKey3, atIndex: 11)

    blackKey4 = UIView()
    blackKey4.backgroundColor = UIColor.blackColor()
    blackKey4.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(blackKey4, atIndex: 11)

    blackKey5 = UIView()
    blackKey5.backgroundColor = UIColor.blackColor()
    blackKey5.translatesAutoresizingMaskIntoConstraints = false
    self.insertSubview(blackKey5, atIndex: 11)

    let views = [
        "redKey" : redKey,
        "orangeKey" : orangeKey,
        "yellowKey" : yellowKey,
        "greenKey" : greenKey,
        "lightBlueKey" : lightBlueKey,
        "darkBlueKey" : darkBlueKey,
        "purpleKey" : purpleKey,
        "blackKey1" : blackKey1,
        "blackKey2" : blackKey2,
        "blackKey3" : blackKey3,
        "blackKey4" : blackKey4,
        "blackKey5" : blackKey5,
    ]

    let colorKeySpan = self.bounds.width/7
    let blackKeyWidth = self.bounds.width/12
    let blackKeyHeight = self.bounds.height/2.5
    let scaleGap = self.bounds.width/6

    let metrics = [
        "colorKeySpan" : colorKeySpan,
        "blackKeyWidth" : blackKeyWidth,
        "blackKeyHeight" : blackKeyHeight,
        "scaleGap" : scaleGap,
    ]

    let redKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[redKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let redKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[redKey(colorKeySpan)]-0-[orangeKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(redKeyVConstraint)
    self.addConstraints(redKeyHConstraint)

    let orangeKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[orangeKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let orangeKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[orangeKey(colorKeySpan)]-0-[yellowKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(orangeKeyVConstraint)
    self.addConstraints(orangeKeyHConstraint)

    let yellowKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[yellowKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let yellowKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[yellowKey(colorKeySpan)]-0-[greenKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(yellowKeyVConstraint)
    self.addConstraints(yellowKeyHConstraint)

    let greenKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[greenKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let greenKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[greenKey(colorKeySpan)]-0-[lightBlueKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(greenKeyVConstraint)
    self.addConstraints(greenKeyHConstraint)

    let lightBlueKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[lightBlueKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let lightBlueKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[lightBlueKey(colorKeySpan)]-0-[darkBlueKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(lightBlueKeyVConstraint)
    self.addConstraints(lightBlueKeyHConstraint)

    let darkBlueKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[darkBlueKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let darkBlueKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[darkBlueKey(colorKeySpan)]-0-[purpleKey]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(darkBlueKeyVConstraint)
    self.addConstraints(darkBlueKeyHConstraint)

    let purpleKeyVConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[purpleKey]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let purpleKeyHConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[purpleKey(colorKeySpan)]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(purpleKeyVConstraint)
    self.addConstraints(purpleKeyHConstraint)

    let blackKey1VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey1(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let blackKey1HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:|-blackKeyWidth-[blackKey1(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(blackKey1VConstraint)
    self.addConstraints(blackKey1HConstraint)

    let blackKey2VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey2(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let blackKey2HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[blackKey1]-blackKeyWidth-[blackKey2(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(blackKey2VConstraint)
    self.addConstraints(blackKey2HConstraint)

    let blackKey3VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey3(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let blackKey3HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[blackKey2]-scaleGap-[blackKey3(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(blackKey3VConstraint)
    self.addConstraints(blackKey3HConstraint)

    let blackKey4VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey4(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let blackKey4HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[blackKey3]-blackKeyWidth-[blackKey4(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(blackKey4VConstraint)
    self.addConstraints(blackKey4HConstraint)

    let blackKey5VConstraint = NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[blackKey5(blackKeyHeight)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    let blackKey5HConstraint = NSLayoutConstraint.constraintsWithVisualFormat("H:[blackKey4]-blackKeyWidth-[blackKey5(blackKeyWidth)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: metrics, views: views)
    self.addConstraints(blackKey5VConstraint)
    self.addConstraints(blackKey5HConstraint)
}

}

记得在文件顶部导入 UIKit 和 Foundation。

然后在 viewDidLoad 方法中将下面的代码添加到您的 ViewController 中：

let keyboardView = KeyboardView(frame: UIScreen.mainScreen().bounds)
self.view.addSubview(keyView

您可以更改框架以满足您的需要。

我们所做的只是向界面添加自定义 UIView。您也可以在没有自定义 UIView 的情况下对 ViewController 进行所有约束设置，只需将 KeyboardView class 上的属性和 "setup" 方法添加到您的 ViewController class.

对于像您这样的复杂视图设置，我建议以编程方式进行设置，因为您总是要更改周围的所有内容，而不是让界面生成器破坏所有内容，您将能够准确地移动您想要的值.

通过更改指标值（破折号和括号之间的值）进行试验。然后尝试使用符号 1 重新创建约束。

还知道您始终可以自定义和子class UIKit 元素。

AutoLayout 约束或 StackView

AutoLayout Constraints or StackView

ipad

autolayout

ios9

xcode7

swift2