ScrollView example for TextField in iPhone

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.
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:

#import

@interface ScrollViewExampleViewController : UIViewController {

IBOutlet UIScrollView *scrollview;
IBOutlet UITextField *textField1;
IBOutlet UITextField *textField2;

BOOL displayKeyboard;
CGPoint  offset;
UITextField *Field;
}

@property(nonatomic,retain) IBOutlet UIScrollView *scrollview;
@property(nonatomic,retain) IBOutlet UITextField *textField1;
@property(nonatomic,retain) IBOutlet UITextField *textField2;

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:

- (void) viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];

[[NSNotificationCenter defaultCenter]
addObserver:self
selector:@selector
(keyboardDidShow:)
name: UIKeyboardDidShowNotification
object:nil];
[[NSNotificationCenter defaultCenter]
addObserver:self
selector:@selector
(keyboardDidHide:) name:
UIKeyboardDidHideNotification
object:nil];

scrollview.contentSize = CGSizeMake(SCROLLVIEW_CONTENT_WIDTH,
SCROLLVIEW_CONTENT_HEIGHT);
displayKeyboard = NO;
}

-(void) viewWillDisappear:(BOOL)animated {
[[NSNotificationCenter defaultCenter]
removeObserver:self];
}

-(void) keyboardDidShow: (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;
}

-(void) keyboardDidHide: (NSNotification *)notif {
if (!displayKeyboard) {
return;
}

scrollview.frame = 

CGRectMake(0, 0, SCROLLVIEW_CONTENT_WIDTH, SCROLLVIEW_CONTENT_HEIGHT);

scrollview.contentOffset =offset;

displayKeyboard = NO;

}

-(BOOL) textFieldShouldBeginEditing:(UITextField*)textField {
Field = textField;
return YES;
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
[textField resignFirstResponder];
return YES;
}

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




Download Updated SourceCode ScrollViewExample 2