Adding toolbar on top of keyboard

Discussion in 'iOS Development' started by johnmabassa, Jul 28, 2009.

  1. johnmabassa

    johnmabassa Member

    Joined:
    Mar 16, 2009
    Messages:
    87
    Likes Received:
    0
    Hi,
    I was trying to add a UIToolbar to the keyboard to implement, Previous,Next and done functionalities similar to what you will be able to see in Safari.....

    I have implemented the notification codes and all, but not sure how to attach it to the keyBoard.

    I did a tweak by adding the toolbar as a subView of the current view, but it wont work in the case of scrollView.... here is my code...please let me know how to connect it to the keyboard.

    I experimenting using the below code
    Code:
    - (void)keyboardWillShow:(NSNotification *)aNotification 
    {	
    	NSDictionary* info = [aNotification userInfo];
    	// Get the size of the keyboard.
    	NSValue* aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
    	CGSize keyboardSize = [aValue CGRectValue].size;
    	
    	if(keyboardToolbar == nil) {
    		keyboardToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0,250,320,30)];
    		keyboardToolbar.barStyle = UIBarStyleBlackOpaque;
    		UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Done" style:UIBarButtonItemStyleBordered target:self action:@selector(dismissKeyboard)];
    		UIBarButtonItem *barButtonItem2 = [[UIBarButtonItem alloc] initWithTitle:@"Done" style:UIBarButtonItemStyleBordered target:self action:@selector(dismissKeyboard)];
    		UIBarButtonItem *flex = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    		NSArray *items = [[NSArray alloc] initWithObjects:flex,barButtonItem2,barButtonItem, nil];
    		[keyboardToolbar setItems:items];	
    		[items release];
    		[self.view addSubview:keyboardToolbar];
    	}
    }
  2. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    If you want to attach it directly to the keyboard (and that's serious overkill), then simply navigate through the list of windows until you find the one that houses the keyboard. Once you have that window, navigate its subviews until you find the one with the keyboard. Generate a subview the size of your keyboard + toolbar and add the toolbar to the top of that. Finally, insert that subview below the keyboard view.

    Easy, breezy, and beautiful, cover grrl.


    The (arguably) better way to do this, and simpler way that most apps employ is to simply create a view the size of the keyboard + toolbar and having that slide up from the bottom at the same time the keyboard should appear. When the keyboard disappears, make the view slide off screen and fade away (most apps do both)
  3. johnmabassa

    johnmabassa Member

    Joined:
    Mar 16, 2009
    Messages:
    87
    Likes Received:
    0
    Hi Skylar,

    I am exactly doing the same way ie searching all the windows and finding the keyboard ( the first approach that you have said). I also wanted avoid that way. I was looking for a simpler way ie why I tried to add the toolbar to the self.view by calculating the position and size of keyboard and toolbar for simple views, it will work fine but when view is scrollview, this will not work.

    I will surely give a try to the second way.

    Thanks,
    -John
  4. johnmabassa

    johnmabassa Member

    Joined:
    Mar 16, 2009
    Messages:
    87
    Likes Received:
    0
  5. SkylarEC

    SkylarEC Super Moderator Emeritus Staff Member

    Joined:
    Sep 19, 2007
    Messages:
    6,642
    Likes Received:
    129
    Lol, he's doing EXACTLY what I told you to do in the first paragraph of my answer post. However, I would still do what I said to do in the second paragraph of the answer post. The scrollview's presence should be irrelevant.

    EDIT: That's because simply creating a view and adding it is way better than enumerating (looping) through all the windows then views of your app. Remember, this is a mobile platform. Every CPU cycle is precious.
  6. johnmabassa

    johnmabassa Member

    Joined:
    Mar 16, 2009
    Messages:
    87
    Likes Received:
    0
    I knew that ...... I just want to provide that link... if somebody else wants it, they can have a look into it.
    I should have said that the link talks about the first approach that you have told.

    I was running into some other issues with my app. I will find sometime to try the second method.


    Thanks
    -John
  7. johnmabassa

    johnmabassa Member

    Joined:
    Mar 16, 2009
    Messages:
    87
    Likes Received:
    0
    Hi Skylar,

    I was facing some issues while doing the first approach that you mentioned.
    Issue: There are some textfields where I dont want "Prev" "Next" buttons, there also I am getting those if I use the first approach. So I started with second approach. I made a sample project and created one according to ur second approach as per my understanding

    Please find the codes below
    Code:
    - (void)registerForKeyboardNotifications
    {
    	[[NSNotificationCenter defaultCenter] addObserver:self
    											 selector:@selector(keyboardWillShow:)
    												 name:UIKeyboardWillShowNotification object:nil];
    	[[NSNotificationCenter defaultCenter] addObserver:self
    											 selector:@selector(keyboardWillHide:)
    												 name:UIKeyboardWillHideNotification object:nil];
    }
    Initialize Toolabr...
    // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
    Code:
    - (void)viewDidLoad {
    	[self registerForKeyboardNotifications];
    	if(keyboardToolbar == nil) {
    		keyboardToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0,416,320,40)];
    		keyboardToolbar.barStyle = UIBarStyleBlackOpaque;
    	//keyboardToolbar.hidden = YES; 
    	UIBarButtonItem *done = [[UIBarButtonItem alloc] initWithTitle:@"Done" style:UIBarButtonItemStyleDone target:self action:@selector(dissmissKeyboard)];
    	UIBarButtonItem *previous = [[UIBarButtonItem alloc] initWithTitle:@"Previous" style:UIBarButtonItemStyleBordered target:self action:@selector(gotoPreviousField)];
    	UIBarButtonItem *next = [[UIBarButtonItem alloc] initWithTitle:@"Next" style:UIBarButtonItemStyleBordered target:self action:@selector(gotoNextField)];
    	UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
    	NSArray *items = [[NSArray alloc] initWithObjects:previous,next,flexibleSpace, done, nil];
    	[keyboardToolbar setItems:items];	
    	[items release];	
    	}
        [super viewDidLoad];
    }
    Here is the place I am doing some operations with frames...( I did some trial and error to get all those values)
    Code:
    - (void)keyboardWillShow:(NSNotification*)aNotification
    {
    	
    	NSDictionary* info = [aNotification userInfo];
    	
    	// Get the size of the keyboard.
    	NSValue* aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
    	CGSize keyboardSize = [aValue CGRectValue].size;
    	[UIView beginAnimations:nil context:nil];
    	[UIView setAnimationDuration:0.3];
    	CGRect rect = keyboardToolbar.frame;
    	rect.origin.y = 204;
    	keyboardToolbar.frame = rect;
    	[self.view addSubview:keyboardToolbar];//I am not sure this is the way to add the toolbar
    	[UIView commitAnimations];
    }
    
    - (void)keyboardWillHide:(NSNotification*)aNotification
    {
    
    	[UIView beginAnimations:nil context:nil];
    	[UIView setAnimationDuration:0.3];
    	CGRect rect = keyboardToolbar.frame;
    	rect.origin.y = 416;
    	keyboardToolbar.frame = rect;
        [keyboardToolbar removeFromSuperview];
    	[UIView commitAnimations];
    
    }
    This is working fine with my demo code, but in my original, I have scroll view, so when the view scrolls up Toolbar also goes up. I just tried the stuff using whatever I know. Please take a look at this and give me your comments.

    -John
    ( I found the positions using trial and error.)

Share This Page