I have a messaging app that has the typical UI design of a text field at the bottom of a full screen table view. I am setting that text field to be the view controller's inputAccessoryView
and calling ViewController.becomeFirstResponder()
in order to get the field to show at the bottom of the screen.
I understand this is the Apple recommended way of accomplishing this UI structure and it works perfectly on "classic" devices however when I test on the iPhone X simulator I notice that using this approach, the text field does not respect the new "safe areas". The text field is rendered at the very bottom of the screen underneath the home screen indicator.
I have looked around the the HIG documents but haven't found anything useful regarding the inputAccessoryView
on a view controller.
It's difficult because using this approach I'm not actually in control of any of the constraints directly, I'm just setting the inputAccessoryView
and letting the view controller handle the UI from there. So I can't just constrain the field to the new safe areas.
Has anyone found good documentation on this or know of an alternate approach that works well on the iPhone X?
inputAccessoryView
and safe area on iPhone Xwhen the keyboard is not visible, the inputAccessoryView
is pinned on the very bottom of the screen. There is no way around that and I think this is intended behavior.
the layoutMarginsGuide
(iOS 9+) and safeAreaLayoutGuide
(iOS 11) properties of the view set as inputAccessoryView
both respect the safe area, i.e on iPhone X :
bottomAnchor
accounts for the home button areabottomAnchor
is at the bottom of the inputAccessoryView
, so that it leaves no useless space above the keyboardWorking example :
import UIKit
class ViewController: UIViewController {
override var canBecomeFirstResponder: Bool { return true }
var _inputAccessoryView: UIView!
override var inputAccessoryView: UIView? {
if _inputAccessoryView == nil {
_inputAccessoryView = CustomView()
_inputAccessoryView.backgroundColor = UIColor.groupTableViewBackground
let textField = UITextField()
textField.borderStyle = .roundedRect
_inputAccessoryView.addSubview(textField)
_inputAccessoryView.autoresizingMask = .flexibleHeight
textField.translatesAutoresizingMaskIntoConstraints = false
textField.leadingAnchor.constraint(
equalTo: _inputAccessoryView.leadingAnchor,
constant: 8
).isActive = true
textField.trailingAnchor.constraint(
equalTo: _inputAccessoryView.trailingAnchor,
constant: -8
).isActive = true
textField.topAnchor.constraint(
equalTo: _inputAccessoryView.topAnchor,
constant: 8
).isActive = true
// this is the important part :
textField.bottomAnchor.constraint(
equalTo: _inputAccessoryView.layoutMarginsGuide.bottomAnchor,
constant: -8
).isActive = true
}
return _inputAccessoryView
}
override func loadView() {
let tableView = UITableView()
tableView.keyboardDismissMode = .interactive
view = tableView
}
}
class CustomView: UIView {
// this is needed so that the inputAccesoryView is properly sized from the auto layout constraints
// actual value is not important
override var intrinsicContentSize: CGSize {
return CGSize.zero
}
}