AutoLayout Constraints or StackView

I am needing some serious help with auto layout. I have a total of 12 buttons that I am trying to layout as a keyboard. It should look like this in the end.

Currently it looks like this

Here are my current constraints.

I really need some help working this out.Can Someone anyone help. I am new to programming and to XCODE. But this should not be this hard. Can I please get some help. I have watched tutorial after tutorial about Auto Layout and it is a very confusing concept. I need to layout this simple piano keyboard, please help.

Thanks

Solution

I would recommend to try and setup your constraints programmatically, not in interface builder. This way you are going to be able to understand what is actually happening to your constraints and after be able to do them easily in interface builder.

There are three types of programmatic Autolayout constraint notations: 1. The init(item:attribute:relatedBy:toItem:attribute:multiplier:constant:). Best to use when you need a percentage based layout(multiplier). 2. Anchor Notation(new in iOS9). I don't have experience with the new Anchor notation, but I do know that it is similar to the composition of the constraints in interface builder. But again you are not going to be able to know exactly what the constraints do to each of your views. 3. constraintsWithVisualFormat. Same as number one but simpler. The only down side is that if you are going to size your views percentage-wise it does not have the capability of doing so.

I want you test number 3 only because you can "Visualize" more the constraintsWithVisualFormat notation. But before you begin open the Visual Format language reference to guide yourself.

First, add a new swift file. Name it KeyBoardView and copy the code below into it.

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)
}

}

Remember to import UIKit and Foundation on the top of the file.

Then add this code below to your ViewController in the viewDidLoad method:

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

You can change the frame to match your needs.

All we are doing is adding a custom UIView to the interface. You could do all the constraints setup on your ViewController without the custom UIView too by just adding the properties and the "setup" method on the KeyboardView class to your ViewController class.

For complex view setups like your's I will recommend to setup programmatically because you are always going to be changing everything around but instead of making everything break with interface builder you are going to be able to move exactly the values that you want.

Experiment by changing the values of the metrics, the values in between the dashes and the parenthesis's. Then try to recreate the constraints in with notation 1.

Also know that you can always customize and subclass elements of UIKit.