iOS, Custom Keyboard with Collection View, Constraints Issue

Question

I am trying to create a custom keyboard for iOS which includes a collection view with images. Currently I am trying without a storyboard(had several issues with the storyboard and it is not easy to describe). So I am just adding the "nextKeyboardButton" (comes by default when adding the new target on XCode), then added another button (switches the icon types on the UICollectionViewCell and finally the UICollectionView.

My code:

class KeyboardViewController: UIInputViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource {

    @IBOutlet var nextKeyboardButton: UIButton!
    @IBOutlet var switchTypedButton: UIButton!

    var isEmoji: Bool! = true;
    var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Collection View
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.scrollDirection = UICollectionViewScrollDirection.horizontal
        layout.sectionInset = UIEdgeInsets(top: 10, left: 10, bottom: 30, right: 10)
        layout.itemSize = CGSize(width: 50, height: 50)

        collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
        collectionView.dataSource = self
        collectionView.delegate = self
        collectionView.register(IconViewCell.self, forCellWithReuseIdentifier: "Cell")
        collectionView.backgroundColor = UIColor.white
        collectionView.showsHorizontalScrollIndicator = false

        self.view.addSubview(collectionView)


        // Perform custom UI setup here
        self.nextKeyboardButton = UIButton(type: .system)
        self.nextKeyboardButton.setTitle(NSLocalizedString("ABC", comment: "Title for 'Next Keyboard' button"), for: [])
        self.nextKeyboardButton.sizeToFit()
        self.nextKeyboardButton.translatesAutoresizingMaskIntoConstraints = false
        self.nextKeyboardButton.addTarget(self, action: #selector(handleInputModeList(from:with:)), for: .allTouchEvents)

        self.view.addSubview(self.nextKeyboardButton)

        // Perform custom UI setup here
        self.switchTypedButton = UIButton(type: .system)
        self.switchTypedButton.setTitle("View Gifs", for: [])
        self.switchTypedButton.sizeToFit()
        self.switchTypedButton.translatesAutoresizingMaskIntoConstraints = false
        self.switchTypedButton.addTarget(self, action: #selector(self.switchTypedFunction), for: .touchUpInside)

        self.view.addSubview(self.switchTypedButton)

        self.nextKeyboardButton.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 10).isActive = true
        self.nextKeyboardButton.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

        self.switchTypedButton.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -10).isActive = true
        self.switchTypedButton.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

        self.collectionView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
        self.collectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
        self.collectionView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        self.collectionView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
    }
}

The error I am getting is:

Probably at least one of the constraints in the following list is one you don't want. 
Try this: 
    (1) look at each constraint and try to figure out which you don't expect; 
    (2) find the code that added the unwanted constraint or constraints and fix it. 
(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
"<NSAutoresizingMaskLayoutConstraint:0x174097c00 h=--& v=--& UICollectionView:0x11000aa00.height == 0   (active)>",
"<NSLayoutConstraint:0x174097430 V:|-(0)-[UICollectionView:0x11000aa00]   (active, names: '|':UIInputView:0x10fe00990 )>",
"<NSLayoutConstraint:0x1740974d0 UICollectionView:0x11000aa00.bottom == UIInputView:0x10fe00990.bottom   (active)>",  <<<<<<<------- ERROR
"<NSLayoutConstraint:0x174097930 'UIView-Encapsulated-Layout-Height' UIInputView:0x10fe00990.height == 667   (active)>"
)

So I can see that the error is probably at UICollectionView:0x11000aa00.bottom == UIInputView:0x10fe00990.bottom but I cannot understand why this is wrong and it is making it fail.

Ps. In the simulator it is working find but it does not in an iPhone 6S.

score 0 · Answer 1 · edited May 25 '17 at 06:39

0

Are you setting the collectionView's translatesAutoresizingMaskIntoConstraints to false? I noticed you did for the nextKeyboardButton.

I remember seeing Apple(?) documentation a while ago that said if you see errors listed for NSAutoresizingMaskLayoutConstraint, check that the mask is turned off.

edited May 25 '17 at 06:39

codercat

22,873
9
61
85

answered Oct 18 '16 at 23:56

I've tried that too - unfortunately it does not change anything. – manosim Oct 19 '16 at 08:43

score 0 · Answer 2 · answered Oct 19 '16 at 12:38

Add this line before you add the collectionView as a subview to the view:

collectionView.translatesAutoresizingMaskIntoConstraints = false So that the autoresizing constraints are removed

and this line after the addSubview: self.view.addConstraint(NSLayoutConstraint(item: self.collectionView, attribute: .height, relatedBy: .equal, toItem: self.view, attribute: .height, multiplier: 1.0, constant: 0.0))

so that the height for the collection view is specified. Otherwise it will collapse to zero height.

iOS, Custom Keyboard with Collection View, Constraints Issue

2 Answers2

Linked