Adding UIToolbar to input accessory view on some text fields

Question

In my quest for my first iPhone app I have posted about the correct way to handle the return key on the iOS keyboard. Now I need to figure out the toolbar above the keyboard with prev/next and done buttons. I have been working with an example from the following site: Input Accessory View

The example works, but I want to use a UIToolbar and UIBarButtonItem's instead of just a regular view with buttons. I have tried various combinations, none work yet. Here is what I have so far.

Header:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITextFieldDelegate>
{
    UITextField* txtActiveField;
    UIToolbar* keyboardToolbar;
    UIBarButtonItem* btnDone;
    UIBarButtonItem* btnNext;
    UIBarButtonItem* btnPrev;
}

@property (nonatomic, strong) IBOutlet UITextField* firstNameTextField;
@property (nonatomic, strong) IBOutlet UITextField* lastNameTextField;
@property (nonatomic, strong) IBOutlet UITextField* cityTextField;

@property (nonatomic, strong) UITextField* txtActiveField;
@property (nonatomic, strong) UIToolbar* keyboardToolbar;
@property (nonatomic, strong) UIBarButtonItem* btnDone;
@property (nonatomic, strong) UIBarButtonItem* btnNext;
@property (nonatomic, strong) UIBarButtonItem* btnPrev;

-(void)createInputAccessoryView;

@end

Source:

#import "ViewController.h"

@implementation ViewController

@synthesize firstNameTextField = _firstNameTextField;
@synthesize lastNameTextField = _lastNameTextField;
@synthesize cityTextField = _cityTextField;

@synthesize txtActiveField = _txtActiveField;
@synthesize keyboardToolbar = _keyboardToolbar;
@synthesize btnDone = _btnDone;
@synthesize btnNext = _btnNext;
@synthesize btnPrev = _btnPrev;

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self createInputAccessoryView];
}

- (void)viewDidUnload
{
    [self setFirstNameTextField:nil];
    [self setLastNameTextField:nil];
    [self setCityTextField:nil];

    [self setTxtActiveField:nil];
    [self setKeyboardToolbar:nil];
    [self setBtnDone:nil];
    [self setBtnNext:nil];
    [self setBtnPrev:nil];

    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

-(void)gotoPrevTextfield
{
    if (self.txtActiveField == self.firstNameTextField)
    {
        return;
    }
    else if (self.txtActiveField == self.lastNameTextField)
    {
        [self.firstNameTextField becomeFirstResponder];
    }
    else if (self.txtActiveField == self.cityTextField)
    {
        [self.lastNameTextField becomeFirstResponder];
    }           
}

-(void)gotoNextTextfield
{
    if (self.txtActiveField == self.firstNameTextField)
    {
        [self.lastNameTextField becomeFirstResponder];
    }
    else if (self.txtActiveField == self.lastNameTextField)
    {
        [self.cityTextField becomeFirstResponder];
    }
    else if (self.txtActiveField == self.cityTextField)
    {
        return;
    }           
}

-(void)doneTyping
{
    [self.txtActiveField resignFirstResponder];
}

-(void)createInputAccessoryView
{
    self.keyboardToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44)];
    self.keyboardToolbar.barStyle = UIBarStyleBlackTranslucent;
    self.keyboardToolbar.tintColor = [UIColor darkGrayColor];

    btnPrev = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:@selector(gotoPrevTextfield:)];
    btnNext = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:@selector(gotoNextTextfield:)];
    btnDone = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(doneTyping:)];

    [self.keyboardToolbar addSubview:(UIView*)btnPrev];
    [self.keyboardToolbar addSubview:(UIView*)btnNext];
    [self.keyboardToolbar addSubview:(UIView*)btnDone];

    [self.firstNameTextField setInputAccessoryView:self.keyboardToolbar];
    [self.lastNameTextField setInputAccessoryView:self.keyboardToolbar];
    [self.cityTextField setInputAccessoryView:self.keyboardToolbar];
}

-(void)textFieldDidBeginEditing:(UITextField*)textField
{
    self.txtActiveField = textField;
}
@end

When I start the application I get:

012-01-21 09:31:19.798 KeyboardToolbar[14772:f803] -[UIBarButtonItem superview]: unrecognized selector sent to instance 0x6b19350
2012-01-21 09:31:19.799 KeyboardToolbar[14772:f803] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[UIBarButtonItem superview]: unrecognized selector sent to instance 0x6b19350'
*** First throw call stack:
(0x13bc052 0x154dd0a 0x13bdced 0x1322f00 0x1322ce2 0x5042f 0x4a72b 0x3422 0x2a58 0xd964e 0x39a73 0x39ce2 0x39ea8 0x40d9a 0x11be6 0x128a6 0x21743 0x221f8 0x15aa9 0x12a6fa9 0x13901c5 0x12f5022 0x12f390a 0x12f2db4 0x12f2ccb 0x122a7 0x13a9b 0x2728 0x2685 0x1)
terminate called throwing an exception

My assumption is that I have not allocated one of the elements correctly. I also wonder if I need to have fields in the class for the buttons or if those can just be added to the toolbar. And I put a line in the header so that I would not have to put all my methods at the beginning of the file. Don't know the syntax yet to forward declare a method like you could do in C.

Thanks.

Update:

So I made some changes to the createInputAccessoryView. I am using addItems now to add the buttons. I made the button variables local (but had the same problem when they were as before). Good news is that the app does not crash anymore, bad news is that the toolbar shows, but without any buttons. Not sure what else I need to do to get the buttons to actually show. All the examples I have seen are similar.

-(void)createInputAccessoryView
{
    self.keyboardToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44)];
    self.keyboardToolbar.barStyle = UIBarStyleBlackTranslucent;
    self.keyboardToolbar.tintColor = [UIColor darkGrayColor];

    UIBarButtonItem* previousButton = [[UIBarButtonItem alloc] initWithTitle:@"Previous" style:UIBarButtonItemStyleBordered target:self action:@selector(gotoPrevTextfield)];
    UIBarButtonItem* nextButton = [[UIBarButtonItem alloc] initWithTitle:@"Next" style:UIBarButtonItemStyleBordered target:self action:@selector(gotoNextTextfield)];
    UIBarButtonItem* flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    UIBarButtonItem* doneButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(doneTyping:)];

    [keyboardToolbar setItems:[NSArray arrayWithObjects: previousButton, nextButton, flexSpace, doneButton, nil] animated:NO];

    [self.firstNameTextField setInputAccessoryView:self.keyboardToolbar];
    [self.lastNameTextField setInputAccessoryView:self.keyboardToolbar];
    [self.cityTextField setInputAccessoryView:self.keyboardToolbar];
}

Answer 1

UIBarButtonItem isn't a UIView subclass, so you can't add it as a subview of the UIToolbar. Instead, use the – setItems:animated: method on your toolbar to add those buttons.

Answer 2

Not sure if it's too late. I put my solution about adding a UIToolbar into UIKeyboard, and The keyboard types changes with the UITextField content, and handling the UIBarButtonItem with "Previous", "Next" and "Done" at Github. And if the TextFields at different sections of the tableview, it turns to be more tricky.