RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


iPhone Programming: Using the Scroll View : Page 2

Wei-Meng Lee walks you through the use of the UIScollView and how to shift your views upward when a keyboard pops up.

Let's modify the ScrollerViewController.m file in parts so that you can see the various concepts in work.

First, change the content size of the UIScrollView to match its new size. You can confirm this by looking at its Size Inspector window. For my case, the new height is 1040:
- (void)viewDidLoad {
    scrollView.frame = CGRectMake(0, 0, 320, 460);
    [scrollView setContentSize:CGSizeMake(320, 1040)];        
    [super viewDidLoad];
Next, when the View window appears, you will register two notifications - UIKeyboardDidShowNotification and UIKeyboardDidHideNotification. These two notifications allow you to know when the keyboard has appeared and when it has disappeared. You register the notifications via the viewWillAppear: event:
-(void) viewWillAppear:(BOOL)animated {    
    //---registers the notifications for keyboard---
    [[NSNotificationCenter defaultCenter] addObserver:self 
    [[NSNotificationCenter defaultCenter] addObserver:self
When any of the Text Field views is tapped, the textFieldDidBeginEditing: event will fire:
//---when a TextField view begins editing---
-(void) textFieldDidBeginEditing:(UITextField *)textFieldView {  
    currentTextField = textFieldView;
Here, you save a copy of the Text Field currently being tapped. When the user taps on the "return" key on the keyboard, the textFieldShouldReturn: event will be fired:
-(BOOL) textFieldShouldReturn:(UITextField *) textFieldView {  
    [textFieldView resignFirstResponder];
    return NO;
Here, you hide the keyboard by calling the resignFirstResponder method of the Text Field view, which will then trigger another event - textFieldDidEndEditing:. Here, you set the currentTextField to nil:
//---when a TextField view is done editing---
-(void) textFieldDidEndEditing:(UITextField *) textFieldView {  
    currentTextField = nil;
When the keyboard appears, it will call the keyboardDidShow: method (which is set via the notification):

//---when the keyboard appears---
-(void) keyboardDidShow:(NSNotification *) notification {
    if (keyboardIsShown) return;
    NSDictionary* info = [notification userInfo];
    //---obtain the size of the keyboard---
    NSValue *aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
    CGSize keyboardSize = [aValue CGRectValue].size;
    //---resize the scroll view (with keyboard)---
    CGRect viewFrame = [scrollView frame];
    viewFrame.size.height -= keyboardSize.height;
    scrollView.frame = viewFrame;
    //---scroll to the current text field---
    CGRect textFieldRect = [currentTextField frame];
    [scrollView scrollRectToVisible:textFieldRect animated:YES];
    keyboardIsShown = YES;
Here, you will obtain the size of the keyboard, in particular its height. This is important as the keyboard has different heights depending on whether it is in landscape or portrait mode. You then resize the view frame of the UIScrollView and scroll the Text Field so that it is visible.

What happen when the keyboard is visible and the user taps on another Text Field? In this case, the keyboardDidShow: method will be called again, but since the keyboardIsShown is set to YES, the method will immediately exit. If the Text Field view that is tapped is partially hidden, it will automatically be scrolled to a visible region on the View window.

When the keyboard disappears, the keyboardDidHide: method will be called:
//---when the keyboard disappears---
-(void) keyboardDidHide:(NSNotification *) notification {
    NSDictionary* info = [notification userInfo];
    //---obtain the size of the keyboard---
    NSValue* aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
    CGSize keyboardSize = [aValue CGRectValue].size;
    //---resize the scroll view back to the original size (without keyboard)---
    CGRect viewFrame = [scrollView frame];
    viewFrame.size.height += keyboardSize.height;
    scrollView.frame = viewFrame;
    keyboardIsShown = NO;
Here, you restore the size of the view frame of the UIScrollView to the one without the keyboard.

Finally, when the View window disappears, remove the notifications that you have set earlier:
-(void) viewWillDisappear:(BOOL)animated {
    //---removes the notifications for keyboard---
    [[NSNotificationCenter defaultCenter] 
    [[NSNotificationCenter defaultCenter] 
To test the application, press Command-R. Tap on the various Text Field views and observe the various views scrolling (see Figure 9).

Figure 9. The Views scrolling upwards when the keyboard appears


In this article, you have seen how to use the UIScrollView to contain all your views. Knowing how to use it will make your application much more usable and improve the effective of your application.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date