Custom Keyboard Storyboard with Xcode 8 beta

Question

I'm having some problems designing my custom keyboard from the storyboard in Xcode 8 beta 6.
For some reason when I launch the keyboard on a iOS 10 device this is the result:

This is how i design it in the Storyboard, Top View:


Bottom View:

So it displays only the height of the bottom view.
I don't have this problem with iOS 9.
Any ideas on what is going wrong?

UPDATE:
this it's how the keyboard gets loaded in iOS 9:

UPDATE 2:
Even creating the view programmatically this way in viewDidLoad() doesn't work:

self.view.backgroundColor = UIColor.orange

let bottomView = UIView()

bottomView.backgroundColor = UIColor.blue

self.view.addSubview(bottomView)

bottomView.translatesAutoresizingMaskIntoConstraints = false

let trailing = bottomView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
let leading = bottomView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor)
let bottom = bottomView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -50)
let top = bottomView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0)

NSLayoutConstraint.activate([trailing, leading, bottom, top])

I wrote to apple bug report.
Hope to get news from them

Answer 1

I had this same issue. I assume you don't have a height set on the green block because you want it to fill up the remaining space of the keyboard. If you want the keyboard to be a CONSTANT height you can simply set a height constraint on the green block and you're done, but because of screen sizes and orientations you probably don't want one height for everything.

In iOS 9 the default size for a custom keyboard was the same as the system keyboard. So if you run this in iOS 9, the green block fills up the remaining space based on those dimensions. In iOS 10 for some reason there is no default height, and because your green block has no height constraint it thinks the height is zero.

To fix it you need to set a height for your keyboard. This is the code I wrote to handle it (and so far so good). Place this in the keyboardviewcontroller class before the ViewDidLoad and you should be good to go:

//***************************

//create constraint variable before function
var constraint = NSLayoutConstraint()

//function to set height
func setKeyboardHeight () {
    let screenSize = UIScreen.mainScreen().bounds.size
    let screenH = screenSize.height;

    self.view.removeConstraint(constraint)

    //you can set the values below as needed for your keyboard
    if screenH >= 768 {
        //for iPad landscape or portrait
        self.constraint = NSLayoutConstraint(item: self.view, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 0.0, constant: 300.0)
        self.view.addConstraint(self.constraint)

    } else if screenH >= 414 {
        //for iPhone portrait AND iPhone Plus landscape or portrait
        self.constraint = NSLayoutConstraint(item: self.view, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 0.0, constant: 220.0)
        self.view.addConstraint(self.constraint)

    } else {
        //for iPhone landscape
        self.constraint = NSLayoutConstraint(item: self.view, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 0.0, constant: 140.0)
        self.view.addConstraint(self.constraint)
    }
}

//sets height when keyboard loads
override func updateViewConstraints() {
    super.updateViewConstraints()
    // Add custom view sizing constraints here
    setKeyboardHeight()
}

//sets or changes height when device rotates
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    setKeyboardHeight()
}

//***************************

Answer 2

Please let me know if I am missing something about the issue. If additional information is necessary use the comments and I will update the answer.

I think you may want to lower the Content Compression Resistance Priority of the topview if you want the bottom view to expand. It's not clear in your question if you want to maintain proportional spacing between the topView and the bottomView.

You can run the app in the Simulator or on the device and then turn on view debugging and try to find out what is happening to the topView. It most likely is of size zero or hiding behind some unexpected view. When in view debugging you want to click the view to see it's outline. There is also an option to see the constraints so that you can determine which one may be affecting the view in an unexpected way.