Custom Keyboard InputAccessoryView not visible in iOS 11

Question

I have implemented Custom input accessory view it was working fine till iOS 10.3.1. But it\'s not visible in iOS 11 beta.

Have anyone experience this issue?

Answer 1

Beta 3 has just come out and some people said it solved the problem, but for me it didn't.

However I tried setting the accessory view to something stupid (100pxls high) and spotted that the Undo/Redo/Paste bar on the iPads was incorrectly sitting over the top of my accessory bar. So I added the following code to get rid of Apples bar (it was pointless for my custom picker anyway) and the problem went away

Hope this helps somebody

- (void)textFieldDidBeginEditing:(UITextField*)textField  
{  
    UITextInputAssistantItem* item = [textField inputAssistantItem];  
    item.leadingBarButtonGroups = @[];  
    item.trailingBarButtonGroups = @[];  
}  

Answer 2

Swift 4 solution

let toolBarRect = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 44)
let toolBar = UIView(frame: toolBarRect)
toolBar.backgroundColor = .lightGray

let nextButton = UIButton()
nextButton.setTitleColor(.black, for: .normal)
nextButton.setTitle("Next", for: .normal)
nextButton.addTarget(self, action: #selector(self.onNextButtonTouch), for: .touchUpInside)
nextButton.translatesAutoresizingMaskIntoConstraints = false
toolBar.addSubview(nextButton)

NSLayoutConstraint.activate(
    [
        nextButton.heightAnchor.constraint(equalToConstant: Constants.keyboardToolBarHeight),
        nextButton.trailingAnchor.constraint(equalTo: toolBar.trailingAnchor, constant: -16),
        nextButton.centerYAnchor.constraint(equalTo: toolBar.centerYAnchor, constant: 0)
    ]
)

self.yourTextField.inputAccessoryView = toolBar

Answer 3

UIToolBar is broken in iOS 11. But you can get the same thing done using UIView as inputAccessoryView. Sample code snippet here:

CGFloat width = [[UIScreen mainScreen] bounds].size.width;
UIView* toolBar = [[UIView alloc] initWithFrame:CGRectMake(0.0f,0.0f, width, 44.0f)];
toolBar.backgroundColor = [UIColor colorWithRed:0.97f  green:0.97f blue:0.97f alpha:1.0f];

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(20.0 , 0.0f, width, 44.0f)];
[titleLabel setFont:[UIFont fontWithName:@"Helvetica" size:13]];
[titleLabel setBackgroundColor:[UIColor clearColor]];
[titleLabel setTextColor:[UIColor redColor]];
[titleLabel setText:@"Title"];
[titleLabel setTextAlignment:NSTextAlignmentLeft];
[toolBar addSubview:titleLabel];

UIButton *doneBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[doneBtn setTitle:@"Done" forState:UIControlStateNormal];
doneBtn.tintColor = [UIColor colorWithRed:(float)179/255 green:(float)27/255 blue:(float)163/255 alpha:1];
[doneBtn.titleLabel setFont:[UIFont fontWithName:@"Helvetica" size:16]];
[doneBtn addTarget:self action:@selector(btnTxtDoneAction) forControlEvents:UIControlEventTouchUpInside];
[doneBtn setFrame:CGRectMake(width-70, 6, 50, 32)];
[toolBar addSubview:doneBtn];

[toolBar sizeToFit];

txtMessageView.inputAccessoryView = toolBar;

Hope this help..:)

Answer 4

PSA: If you use a UIToolbar as your custom view, it's currently broken in iOS 11 GM. Instead of loosing your hair on how to fix it, just change it to UIView. You'll loose the blur effect but it will work.

Answer 5

The question you ask does not have much detail. But I had the same problem when using an inputAccessoryView and a custom inputView for the textfield.

And resolved this on iOS11 by setting the custom inputView's autoresizingMask to .flexibleHeight.

yourCustomInputView.autoresizingMask = .flexibleHeight

Hope this resolves the issue. If not maybe provide some more information?

Here is how I add the input accessory, incase this is of more help (as extension of textfield):

public extension UITextField {

public func addToolbarInputAccessoryView(barButtonItems: [UIBarButtonItem],
                                         textColour: UIColor,
                                         toolbarHeight: CGFloat = 44,
                                         backgroundColour: UIColor = .white) {

    let toolbar = UIToolbar()

    toolbar.frame = CGRect(x: 0, y: 0, width: bounds.width, height: toolbarHeight)
    toolbar.items = barButtonItems
    toolbar.isTranslucent = false
    toolbar.barTintColor = backgroundColour
    toolbar.tintColor = textColour

    inputAccessoryView = toolbar
}

}

And then on the inputView (not the inputAccessoryView), I was using a date picker for example - just make sure that the date picker's autoresizing mask is set to flexible height.

Answer 6

I've had the same issue and I've found out that removing all of the bottom, top, leading, training, left, right constraints for the view that is assigned accessoryView solved it.