How to add your own shortcuts above the keyboard in iOS 9

Photo-23-10-2015,-17-44-21

Ever wondered how to create those new shortcut items that can appear above the iPad keyboard in iOS 9?

By default iOS will produce auto correction suggestions here since iOS 8, but since iOS 9 we can hook into this mechanism and provide our own bar button items on the left and right – much like we can with a navigation bar.

Let me show you how to do it.

UIBarButtonItems and the UITextInputAssistantItem

In the above screenshot we can see an icon at the left, and a single shortcut on the right. Those are instances of our old friend the UIBarButtonItem. In short, each item is added to an array, and each button in the array is displayed – if iOS has the space above the keyboard.

Apple doesn’t seem to have a name for this space, but the class that’s responsible for showing those shortcuts is called the UITextInputAssistantItem. There’s room for a leading and a trailing group of items.

This group isn’t just an array of buttons though; it’s another class called the UIBarButtonItemGroup, and the clever bit is that this group has a representative “action button” that is shown and will open the group if there’s not enough space. I know this sounds complicated, but bear with me here.

In the screenshot above, on the left hand side, we can see an “action button” (literally). iOS shows this because there’s not enough room to display the words “First Shortcut” and “Second Shortcut”. But when we press it, we’ll see something like this:

Photo-23-10-2015,-18-03-36

On the right hand side, the shortcut titles are short enough to be displayed and this representative button isn’t shown – however we still need to define one in case that space is getting tight.

Let’s see how to do this in code.

Creating Shortcut Items

- (void)leadingShortcuts {
    
    // create a custom bar button
    UIBarButtonItem *firstButton = [[UIBarButtonItem alloc]initWithTitle:@"First Shortcut" style:UIBarButtonItemStylePlain target:self action:@selector(myFirstShortcut)];
    
    // create another one
    UIBarButtonItem *secondButton = [[UIBarButtonItem alloc]initWithTitle:@"Second Shortcut" style:UIBarButtonItemStylePlain target:self action:@selector(mySecondShortcut)];
    
    // add those buttons to an array
    NSArray *buttons = @[firstButton, secondButton];
    
    // create a group acction button
    UIBarButtonItem *groupAction = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:nil];
    
    // create a bar button group with those buttons
    UIBarButtonItemGroup *group = [[UIBarButtonItemGroup alloc]initWithBarButtonItems:buttons representativeItem:groupAction];
    
    // add add the group to the shortcuts bar above the keyboard
    // trailingBarButtonGroups is the end of the bar
    // leadingBarButtonGroups is the front of the bar
    UITextInputAssistantItem *assistantItem = self.textField.inputAssistantItem;
    assistantItem.leadingBarButtonGroups = @[group];
}

As always, this code looks more complicated than it actually is – so let’s go through this step by step.

First we’ll create a couple of bar button items, each of which calls a method in our own class via a selector. If someone presses one of our shortcuts, those methods are called. Then we add both buttons to an array.

Next we create a third button without an action (nil). This can either have a title or a predefined system type icon (UIBarButtonSystemItemAction in my case), or it could be something completely custom. That’s true for all these bar button items by the way. With this third button and our previous array of buttons we’ll create a bar button item group.

Finally we extract the inputAssistantItem from our text field and add the group to its leading (or trailing) space.

Groups? Items? Arrays?

Let me explain the last bit a little because it may not make much sense at first: in my example app I have a harmless UITextField, which is responsible for bringing up the keyboard. The text field inherits from UIView via several other parents, and it’s the UIView class that has been updated in iOS 9 to include the inputAssistantItem property. That’s why we can access it.

So our technique here technically works with anything that inherits from UIView, but will only really make sense when said view is somehow responsible for bringing up a keyboard (for example, with UITextFields and UITextViews).

That’s all we have to do. Call the above method in your view controller’s viewDidLoad and your desired shortcuts will show up. To make them appear on the right hand side instead, use the assistantItem.trailingBarButtonGroups property instead.

Removing potential shortcuts

To get rid of shortcuts, you can simply set the leading and/or trailing bar button groups to nil, like so:

- (void)removeShortcuts {
    
    // remove any shortcuts there may be
    UITextInputAssistantItem *assistantItem = self.textField.inputAssistantItem;
    assistantItem.leadingBarButtonGroups = nil;
    assistantItem.trailingBarButtonGroups = nil;
}

Xcode may give you a warning here, but according to the Apple documentation, this is the right way to do it and works like a charm.

Making more room by removing the Auto Correction Suggestions

If you have a lot of shortcuts to display and don’t want iOS to show those super clever word suggestions above the keyboard, simple tell your text field (or text view) about it:

// remove auto correction suggestions
self.textField.autocorrectionType = UITextAutocorrectionTypeNo;

When iOS has more room, it will automatically expand the action group and simply show the shortcuts (see below, room permitting of course).

Photo-23-10-2015,-17-46-08

Can I have icons on my buttons?

Yes sure, either use the system shortcuts when you create a bar button item (using initWithBarButtonSystemItem), or create a custom UIBarButton object (initWithImage).

Does this work on iPhone too?

The UITextInputAssistantItem is ignored on iPhone and will only work with the iPad keyboard. I guess Apple have done this because there’s usually not enough room on the small screen for anything extra on the keyboard.

Demo Project

Here’s a demo project that will show all this in action. Feel free to comment items out and see what happens:

Further Reading





Leave a Reply