Search code examples
iosswiftuicollectionviewkeyboardcustom-keyboard

Collection View as Custom Keyboard not working


I am building application where you have custom keyboard.

Inside it's class I have created collection view, here is code:

class KeyboardViewController: UIInputViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDataSource, UICollectionViewDelegate {

let stickerImages = [
    UIImage(named: "Image-1"),
    UIImage(named: "Image-2"),
    UIImage(named: "Image-3"),
    UIImage(named: "Image-4"),
    UIImage(named: "Image-5")
]

@IBOutlet var nextKeyboardButton: UIButton!
@IBOutlet var collectionView: UICollectionView!

override func updateViewConstraints() {
    super.updateViewConstraints()
}

override func viewDidLoad() {
    super.viewDidLoad()

    let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.scrollDirection = UICollectionView.ScrollDirection.vertical
    layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    layout.itemSize = CGSize(width: 50, height: 50)

    collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
    collectionView.dataSource = self
    collectionView.delegate = self
    collectionView.register(StickersCell.self, forCellWithReuseIdentifier: StickersCell.reuseIdentifier)
    collectionView.backgroundColor = UIColor.white
    collectionView.showsHorizontalScrollIndicator = false
    collectionView.backgroundColor = UIColor.red

    collectionView.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(collectionView)

    self.nextKeyboardButton = UIButton(type: .system)

    self.nextKeyboardButton.setTitle(NSLocalizedString("Next Keyboard", comment: "Title for 'Next Keyboard' button"), for: [])
    self.nextKeyboardButton.sizeToFit()
    self.nextKeyboardButton.translatesAutoresizingMaskIntoConstraints = false
    self.nextKeyboardButton.backgroundColor = UIColor.white

    self.nextKeyboardButton.addTarget(self, action: #selector(handleInputModeList(from:with:)), for: .allTouchEvents)

    self.view.addSubview(self.nextKeyboardButton)

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

    self.collectionView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    self.collectionView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    self.collectionView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
    self.collectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
}

override func textWillChange(_ textInput: UITextInput?) {
    // The app is about to change the document's contents. Perform any preparation here.
}

override func textDidChange(_ textInput: UITextInput?) {
    // The app has just changed the document's contents, the document context has been updated.

    var textColor: UIColor
    let proxy = self.textDocumentProxy
    if proxy.keyboardAppearance == UIKeyboardAppearance.dark {
        textColor = UIColor.white
    } else {
        textColor = UIColor.black
    }
    self.nextKeyboardButton.setTitleColor(textColor, for: [])
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

    return stickerImages.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: StickersCell.reuseIdentifier, for: indexPath) as! StickersCell

    cell.setImage(stickerImages[indexPath.item]!)

    return cell
}}

And here is my Collection View cell class:

class StickersCell: UICollectionViewCell {

static let reuseIdentifier: String = "StickersCell"

lazy var imageView: UIImageView = {
    let imageView = UIImageView(frame: .zero)
    imageView.contentMode = .scaleAspectFit
    imageView.translatesAutoresizingMaskIntoConstraints = false
    return imageView
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    contentView.clipsToBounds = true
    contentView.addSubview(imageView)

    imageView.leftAnchor.constraint(equalTo: contentView.leftAnchor).isActive = true
    imageView.rightAnchor.constraint(equalTo: contentView.rightAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
    imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func setImage(_ image: UIImage) {
    imageView.image = image
}}

This code works just fine when adding collection view to any UIView or UIViewController, but when trying to add it to keyboard it throws such errors:

Errors

As far as I understand I have placed constraints wrong, but I don't understand what exactly is wrong, especially when it's working fine in simple views or view controllers.

I have googled allot and couldn't find any solutions... Also this SO questions didn't help as well:

  1. First question
  2. Second question
  3. Third question

I have also tried moving code that creates collection view into viewDidAppear and viewWillAppear methods but same no luck.

Another strange thing: If I add simple UIView with same constraints to keyboard - everything is working fine. Problem seems to be specifically with collection view.

So, what I have missed? Would be grateful for any help, since I'm battling with this issue for over a week already...

UPDATE:

After reading Apple dev forums, idea came up to my mind: I have created UITableView same as UICollectionView before and strangely it works. So there's next question: Are you able to use UICollectionView as custom keyboard at all?


Solution

  • After battling with this issue for 2 weeks finally found working workaround:

    For some reason you can't use UIImageView or MSStickerView inside UICollectionViewCell same as in iMessage Extension, so instead I just added transparent UIButton with UIImage inside this button and it worked!

    Still don't know why you can't use images or views and couldn't find any specific info about it, but my solutions works and I hope this will help someone in future.