UICollectionView top cells disappear while animating keyboard appearance - ios

Question

I have UICollectionView with cells inside. Everything works well except one thing.
During keyboard appearance animation, top cells that are about to go offscreen just disappear in place without any animation https://www.youtube.com/watch?v=hMt6DiJD5KU
I have tried to implement finalLayoutAttributesForDisappearingItem but it has no any effect.
Also tried to expand rect in layoutAttributesForElementsInRect
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let rect = CGRect(x: rect.minX, y: rect.midY - 312, width: rect.width, height: rect.height + 312)
return itemAttributesCache.filter { $0.frame.intersects(rect) }
}
but also with no luck.
The only working solution that i found is to expand UICollectionView.frame above the screen to the keyboard height and set UICollectionView.contentInset.top to the keyboard height. It works but absolutely ugly.
Any ideas how to fix it?

Answer 1

To have a proper keyboard appearance in your collection view:
1) Get the size of keyboard.
2) Adjust the bottom content inset of collection view by keyboard height.
3) Scroll the target text field into view.
You need to register for keyboard changing notifications.
(keyboardWillHideNotification and keyboardWillChangeFrameNotification)
Use notification center:
Inside class:
let notificationCenter = NotificationCenter.default
In viewDidLoad:
notificationCenter.addObserver(self, selector: #selector(adjustForKeyboard), name:NSNotification.Name.UIKeyboardWillHide, object: nil)
notificationCenter.addObserver(self, selector: #selector(adjustForKeyboard), name: NSNotification.Name.UIKeyboardWillChangeFrame, object: nil)
#objc func adjustForKeyboard(notification: Notification) {
if let keyboardValue = notification.userInfo?[UIKeyboardFrameEndUserInfoKey] as? NSValue {
let keyboardScreenEndFrame = keyboardValue.cgRectValue
let keyboardViewEndFrame = view.convert(keyboardScreenEndFrame, from: view.window)
if notification.name == NSNotification.Name.UIKeyboardWillHide {
collectionView.contentInset = .zero
} else {
collectionView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: keyboardViewEndFrame.height - view.safeAreaInsets.bottom, right: 0)
}
}
}
Reset the content inset when keyboard dismissed.
I'm using textField delegate method.
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
print("returned")
textField.resignFirstResponder()
return true
}
For more details, please refer these links:
https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
and
https://www.hackingwithswift.com/example-code/uikit/how-to-adjust-a-uiscrollview-to-fit-the-keyboard