Extending Keyboard Gradient on iPhone

If you have used Texstastic for iPhone or Prompt you could notice one small detail about keyboard. It has 5 rows and it still seems like it’s the same keyboard and not the keyboard with inputAccessoryView.

Here you can see 2 images with that effect that I’m talking about.

The usual way to have 5 rows on keyboard is to use inputAccessoryView of the UITextView or UITextField and to return UIToolbar which contains all buttons/keys that you want to have in it.

So I asked a question about it on Stackoverflow and got answer on which I could work further.

So here is the complete solution how to get gradient on the keyboard when using inputAccessoryView on UITextView/UITextField.

First you will need to subclass UIToolbar and to implement didMoveToSuperview method.

This is how my implementation looks like.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (void)didMoveToSuperview {

    [self.separatorHideView removeFromSuperview];

    CGRect seperatorRect = CGRectMake(self.frame.origin.x,
                                      self.frame.size.height,
                                      self.frame.size.width,
                                      3.0);

    self.separatorHideView = [[UIView alloc]];
    self.separatorHideView.backgroundColor = [UIColor colorWithRed:0.569 green:0.600 blue:0.643 alpha:1.000];
    self.separatorHideView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    [self addSubview:self.separatorHideView];
}

I think that code above is pretty self explanatory, we are adding new UIView with height of 3pt to the superview in the moment when our UIToolbar is being moved to superview. We are setting autoresizing mask to resize width so that we don’t have problems when superview is rotating and we are setting background color of our view to [UIColor colorWithRed:0.569 green:0.600 blue:0.643 alpha:1.000] which is color of the last pixel in the keyboard gradient.

Next step is to add this customized UIToolbar to the view and to set its tint. I’m doing this in viewDidLoad method of the parent view controller.

1
2
3
4
5
6
7
8
- (void)viewDidLoad {
    
    [super viewDidLoad];
    CustomToolbar *accessoryToolbar = [[CustomToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 25)];
    accessoryToolbar.tintColor = [UIColor colorWithRed:0.569 green:0.600 blue:0.643 alpha:1.000];
    editor.inputAccessoryView = accessoryToolbar;

}

So here I’m setting the same color for tint and then adding this custom UIToolbar as inputAccessoryView to my UITextView.

Here is how it looks like when everything is done.

iOS