ScrollView Example In iPhone

In this application we will see how to ScrollView worked in our application. This is the very simple application. In the application when user input in the textfield then see UITextField is hidden under the keyboard.This problem solved using the ScrollView. So let see how it will be worked.

Step 1: Create a View base application using the template. Give the application name “ScrollViewExample”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: Expand classes and notice Interface Builder created the ScrollViewExampleViewController class for you. Expand Resources and notice the template generated a separate nib, ScrollViewExampleViewController.xib, for the “ScrollViewExample”.

Step 4: Open the ScrollViewExampleViewController.h file, we have added scrollview for scrolling the view,and two textfield for display the textbox. So make the following changes in the file:

 

 

 

Step 5: Double click your ScrollViewExampleViewController.xib file open it to the Interface Builder. First drag Scroll View from the library and place it to the view window and drag two TextField also, place it to the view window(See the figure below).Connect the File’s Owner icon to the View icon and select view. Select File’s Owner icon to the view and select scrollview. Next drag from the File’s Owner icon to the first textfield and select textfield1, do it once more time for the textfield2. Now save it, close it and go back to the Xcode.

Step 6: In the ScrollViewExampleViewController.m file make the following changes:

 

 

 

Step 7: Now compile and run the application in the Simulator.

Download Updated SourceCodeScrollViewExample 2

Leave a Comment:

15 comments
Jennifer says May 8, 2010

Interesting tutorial but the sourcecode doesn’t actually scroll up. It compiles but isn’t functionally what you show.

Reply
Sushant says May 8, 2010

When you run the application in the simulator,
1.Then you click in the textfield
2.Keyboard automatically showup, and UITextField is hidden under the keyboard.
3.Enter the key from the keyboard, then you can see the TextField automatically scroll upside.

Just try it, if still there have any problem please let us know.

Reply
Jennifer says May 10, 2010

Yes, I was able to make that happen. It seems odd that you should have to start typing for the field to become visible. I also don’t believe your textFieldShouldBeginEditing isn’t being called as the Return Key does not dismiss the keyboard.

Reply
Sushant says May 11, 2010

Yes, there have some problem , i have find out it. Thanks for your comment.!! Now you can download updated source code.

Reply
cepnyci says June 2, 2010

Place the code inside “keyboardDidShow” function into “keyboardWillShow” function. That will scroll the view as soon as you click in a Text Field.

The function will be as follows:

– (void)keyboardWillShow:(NSNotification *)notif {
if (displayKeyboard) {
return;
}

NSDictionary* info = [notif userInfo];
NSValue* aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
CGSize keyboardSize = [aValue CGRectValue].size;

offset = scrollview.contentOffset;

CGRect viewFrame = scrollview.frame;
viewFrame.size.height -= keyboardSize.height;
scrollview.frame = viewFrame;

CGRect textFieldRect = [Field frame];
textFieldRect.origin.y += 10;
[scrollview scrollRectToVisible: textFieldRect animated:YES];
displayKeyboard = YES;
}

Reply
sivasankar says June 3, 2010

HI

I HAVE TRIED FOR MORE THAN 7 TEXTFILEDS ,WHEN THE KEYBOARD GETS POPUP,THE TEXTFIELD IS NOT MOVING UP,MANUALLY WHEN WE SCROLL THE VIEW ONLY I CAN ABLE TO SEE THE 7TH TEXTFIELD(WHICH IS IN THE BOTTOM POSITION),KINDLY HELP ME OUT IN THIS.

WITH REGARDS..

Reply
Dilip says July 5, 2010

can we scroll when button pressed.??
mail me pls..or reply

Reply
Kiddicouture Express Molly Recliner Product Features – Kiddicare … | Sunbrella Chair Cushions says July 5, 2010

[…] ScrollView example in iPhone | iPhone Tutorials for Developers […]

Reply
mzee says November 1, 2010

Hi,

UIKeyboardBoundsUserInfoKey is deprecated, what to use instead?

regards

Reply
Sim says January 7, 2011

Great Tutorial…

Reply
ajay says March 5, 2011

can u tel me rss feeds application to how to do ,menas how to parse updated data from any website to iphone app

Reply
Adriano says May 3, 2011

Thanks a lot Sim, you saved me a great amount of time.

Cheers,
Adriano

Reply
Chris says May 9, 2011

Still useful in May 2011 with XCode 4 but I had to download the source since all the headers of were missing

I replaced the following deprecated line

//NSValue* aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
NSValue* aValue = [info objectForKey:UIKeyboardFrameEndUserInfoKey];

Reply
Noobdeveloper says May 25, 2011

Hello,great tutorial,i tried in a view with more then 10 field and after u click on one and show the keyboard and then press on return the view becomes unscrollable!!!!and all the items goes a bit down in it (like if the Y offset get changed) and then the only way to make it scrollable again is to show the keyboard on another textfield !!

Reply
HardXcode says May 25, 2011

Hello,great tutorial,i tried in a view with more then 10 field and after u click on one and show the keyboard and then press on return the view becomes unscrollable!!!!and all the items goes a bit down in it (like if the Y offset get changed) and then the only way to make it scrollable again is to show the keyboard on another textfield !! thx for the answer

Reply
Add Your Reply