Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

iPhone Programming: Using the Scroll View

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


advertisement
One of the most common questions I hear often during an iPhone development course is how do you populate your View window with more views than what you can see on the View window? The obvious answer is to use a UIScrollView and then add all other views into it. However, the concept sounds simple, but in reality it requires a little more work than you would expect. Hence in this article I will walk you through the use of the UIScollView.

At the same time, I will also cover another very common problem faced by developers -- how to shift your views upward when a keyboard pops up to enable you to enter some text.

[login]

Using the UIScrollView



To see the UIScrollView in action, launch Xcode and create a new View-based Application (iPhone) project and name it as Scroller.

Double-click on the ScrollerViewController.xib file located in the Resources folder to edit it in Interface Builder.

Populate the View window with a UIScrollView (see Figure 1).

Figure 1. Populating the View window with a UIScrollView

Add two Round Rect Button views to the UIScrollView (see Figure 2).

Figure 2. Adding two Round Rect Button views to the UIScrollView

Now, you can add some more views to the UIScrollView so that the user can view more than what the View window can display at a time. To do so, perform the following steps:
    * Click on the UIScrollView to select it. If you cannot select it, click on the title bar of the View window first and then click on the UIScrollView again.

    * Shift the UIScrollView upwards (see left of Figure 3).

    * Expand the height of the UIScrollView by dragging the center-dot of the UIScrollView downwards. The UIScrollView should now look like Figure 3 (right).

Figure 3. Expanding the size of the UIScrollView

Now, add a Text Field view onto the bottom of the UIScrollView (see Figure 4).

Figure 4. Adding a Text Field view to the UIScrollView

Select the UIScrollView and view its Size Inspector window (see Figure 5). Observe that its size is 320x713 pixels. You will need to use this value in your code, which you will do next.

Figure 5. Viewing the size of the UIScrollView

Back in Xcode, add the following code in bold to the ScrollViewController.h file:

#import <UIKit/UIKit.h> @interface ScrollerViewController : UIViewController {    IBOutlet UIScrollView *scrollView; } @property (nonatomic, retain) UIScrollView *scrollView; @end

In Interface Builder, control-click and drag the File's Owner item over the UIScrollView. Select scrollView. Next, insert the following code in the ScrollerViewController.m file:

#import "ScrollerViewController.h" @implementation ScrollerViewController @synthesize scrollView; - (void)viewDidLoad {    //---set the viewable frame of the scroll view---    scrollView.frame = CGRectMake(0, 0, 320, 460);    //---set the content size of the scroll view---    [scrollView setContentSize:CGSizeMake(320, 713)];        [super viewDidLoad]; } - (void)dealloc {    [scrollView release];    [super dealloc]; }

To test the application on the iPhone Simulator, press Command-R. You can now flick the UIScolllView up and down to reveal all the views contained in it (see Figure 6)!

Figure 6. Scrolling the UIScrollView reveals more views

Tap on the Text Field view located at the bottom. The keyboard will automatically appear. However, observe that the Text Field view is now covered by the keyboard (see Figure 7). It is your duty to ensure that the current view is not hidden by the keyboard; the next section will show you how.

Figure 7. The Keyboard covering the Text Field view

Scrolling Views Programmatically

On the iPhone, whenever the user taps on a view that accepts keyboard inputs (such as the Text Field and Text View views), the keyboard automatically appears from the bottom of the screen. While it is not your responsibility to display the keyboard, it is your duty to ensure that the current view receiving the input is not blocked by the keyboard. One common way to solve this problem is to use the UIScrollView to contain all your views. When the keyboard appears, you can then programmatically scrolls the UIScrollView upwards. Let's see how to do this.

Back in Interface Builder, add a few more Label and Text Field views to the bottom of the UIScrollView (see Figure 8).

Figure 8. Adding more views to the UIScrollView

In the ScrollerViewController.h file, add the following code in bold:

#import <UIKit/UIKit.h> @interface ScrollerViewController : UIViewController {    IBOutlet UIScrollView *scrollView;    UITextField *currentTextField;    BOOL keyboardIsShown; } @property (nonatomic, retain) UIScrollView *scrollView; @end

In Interface Builder, right-click on each Text Field view and connect the delegate outlet to the File's Owner item. This step is important as it will ensure that when any of the Text Field view is tapped, three events can be handled:
    " textFieldDidBeginEditing:
    " textFieldDidEndEditing:
    " textFieldShouldReturn:


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap