User Experience Coding How-To's

User Experience Coding How-To's

User Experience Coding How-To's

General: How Do I... ... Create my user interface? ... Start my application in landscape mode? ... Enable autorotation? ... Flip my interface, as the Weather application does? ... Handle autorotation of my user interface? ... Internationalize or localize my application's text strings? Multi-Touch: How Do I... ... Handle touch-based input such as tracking the user's finger or detecting multiple touches? Windows, Views, and Controls: How Do I... ... Detect the screen boundary? ... Create a window? ... Create a window with a navigation controller? ... Create a button? ... Create a label? ... Create a switch? ... Create a text field? ... Create a text view? ... Create a web view? ... Create a view for images? ... Create a slider? ... Create a segmented control? ... Create a page control? ... Create a table view? ... Add buttons to the UINavigationController? ... Display an alert view, action sheet, or modal view? Document Revision History

General How do I create my user interface? In general, there are three application styles for iPhone OS: productivity, utility, and immersive. Each style has some common approaches to user interface design, which you can learn about in detail by looking at iPhone Human Interface Guidelines. When you are ready to start your application, take a look at the templates that Xcode offers and choose the one that matches your application's design. The fastest way to create your user interface is to use Apple's visual tool, Interface Builder. In it you can assemble your application’s user interface graphically, and then programmatically create any user interface elements not offered by the tool. You can see some examples of how to create a variety of user interface elements by looking at these sample applications: TheElements uses a navigation bar and a toolbar. Metronome uses one standalone UIView object with embedded views. NavBar uses a navigation bar. For comprehensive information on the classes and methods for creating individual elements, see UIKit Framework Reference. How do I start my application in landscape mode? To start your application in landscape mode, edit your Info.plist file to add the UIInterfaceOrientation key with the appropriate value (UIInterfaceOrientationLandscapeRight or UIInterfaceOrientationLandscapeLeft), as shown inListing 1. This provides a hint to the system to set the orientation of the status bar appropriately at launch time. Listing 1: Starting your application in landscape mode <key>UIInterfaceOrientation</key> <string>UIInterfaceOrientationLandscapeRight</string> For detailed information see "Launching in Landscape Mode" in iPhone Application Programming Guide. How do I enable autorotation? To use autorotation, you must use a view controller (and subclass it), and the subclass must return YES for the methodshouldAutorotateToInterfaceOrientation:. See Listing 2. Listing 2: Enabling autorotation -(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return YES; } You can also choose whether to allow or deny the rotation, returning YES or NO as appropriate, after considering, for example, the value of UIInterfaceOrientation. See UIApplication Class Reference for the possible values ofUIInterfaceOrientation. You must create the window with the size [[UIDevice mainScreen] bounds] and the view controller's view with[[UIDevice mainScreen] applicationFrame]. You can also enable support for autorotation in Interface Builder: Open a nib file with a UIWindow already defined. Drag in a UIViewController from the library to the nib window. Open (double-click) the UIViewController object. Set its custom class name to your UIViewController subclass name. Drag in a empty UIView from the library window into the UIViewController. (Interface Builder will provide visual feedback as the UIView is moved into place inside the UIViewController) Set or connect the window's view property to be that of the UIViewController's view property If you are also using a toolbar, the view controller for each toolbar item must implement theshouldAutorotateToInterfaceOrientation: method and return YES for each of the orientations you wish to support. If you have a navigation controller for a toolbar item, the root view controller of that navigation controller must implement the shouldAutorotateToInterfaceOrientation: method and return YES. How do I flip my interface, as the Weather application does? To "flip" your user interface, use the setAnimationTransition:forView:Cache: method of the UIView class, and provide the appropriate constant to specify the flip direction (using UIViewAnimationTransitionFlipFromRight orUIViewAnimationTransitionFlipFromLeft). See the UICatalog sample application and UIView Class Reference. The "Utility Application" template in Xcode provides a starting point for implementing applications which, like the Weather application, have a "front" and a "back" view. How do I handle autorotation of my user interface? For your application to support autorotation, where your interface changes between portrait and landscape orientation, it needs to implement a UIViewController object and override the shouldAutorotateToInterfaceOrientation: method. See "Autorotating views" in View Controller Programming Guide, and the WhichWayIsUp sample code. How do I internationalize or localize my application's text strings? To internationalize your application's text strings, you store your localized text in Localizable.strings inside a folder named <language_code>.lproj, where <language_code> is an ISO 639-1 language code (for example, en.lproj orfr.lproj). You can then obtain the localized text in the user's currently selected language for display using the NSLocalizedStringfunction. For example, to display the French word for "City" in your interface, you would first add an entry to yourfr.lproj/Localizable.strings file, as shown in Listing 3, and then use the code shown in Listing 4 to get the appropriate localized version. Listing 3: An entry in fr.lproj/Localizable.strings "City" = "Ville"; Listing 4: Using NSLocalizedString label.text = NSLocalizedString(@"City", @"Label for City text field"); You can also define the localizable strings in your nib file, and create localized copies of that nib. See "Internationalizing Your Application" in iPhone Application Programming Guide for more information.

Multi-Touch How do I handle touch-based input such as tracking the user's finger or detecting multiple touches? To receive touch input, you instantiate a UIResponder object (typically a view) and add instance methods that handle touches. Your methods are invoked when those touches occur. You can implement separate handlers for the different "phases" of a touch—when touches begin, move, end, or are canceled by the system. See Listing 5 for the available set of handlers. Listing 5: Available touch event handlers - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event; - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event; By default, a view ignores all but the first touch during a multi-touch sequence. If you want the view to handle multiple touches you must enable multiple touches for the view. This can be done programmatically by setting the multipleTouchEnabled property of your view to YES, or in Interface Builder using the inspector for the related view. For detailed information, see "Event Handling" in iPhone Application Programming Guide and the UITouch Class Reference. For an example of how to handle touch input, see the MoveMe sample application.

Windows, Views, and Controls How do I detect the screen boundary? To detect the screen boundary, use the UIScreen class, which contains the bounding rectangle of the device's entire screen. When you set up the user interface for your application, use the properties of this object to get the recommended frame rectangles for your application views. How do I create a window? To create a window, use the UIWindow class, as shown in Listing 6. Listing 6: Creating a window window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; For more information, see UIWindow Class Reference. How do I create a window with a navigation controller? To create a window with a navigation controller, use the UINavigationController class, as shown in Listing 7. Listing 7: Creating a window with a navigation controller self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; [window setBackgroundColor:[UIColor redColor]]; MainViewController *navController = [[MainViewController alloc] init]; // create a navigation controller using the new controller navigationController = [[UINavigationController alloc] initWithRootViewController:navController]; [navController release]; // Add the navigation controller's view to the window [window addSubview:[navigationController view]]; [window makeKeyAndVisible]; For more information, see UINavigationController Class Reference. How do I create a button? To create a button, use the UIButton class, as shown in Listing 8. Listing 8: Creating a button CGRect frame = CGRectMake(0.0, 0.0, 100.0, 40.0); UIImage *buttonImage = [UIImage imageNamed:@"grayButton.png"]; UIButton *stopButton = [[UIButton alloc] initWithFrame:frame]; [stopButton setTitle:@"Button" forState:UIControlStateNormal]; [stopButton setTitleColor:[UIColor blackColor] forState:UIControlEventTouchDown]; [stopButton setBackgroundImage:buttonImage forState:UIControlStateNormal]; stopButton.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter; stopButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter; [stopButton addTarget:self action:@selector(stopAction:) forControlEvents:UIControlEventTouchUpInside]; [stopButton setBackgroundColor:[UIColor clearColor]]; // then add the button to a UIView like this: // [myView addSubview: stopButton]; For more information, see UIButton Class Reference. How do I create a label? To create a label, use the UILabel class, as shown in Listing 9. Listing 9: Creating a label CGRect labelFrame = CGRectMake(0.0, 0.0, 100.0, 30.0); UILabel *label = [[UILabel alloc] initWithFrame:labelFrame]; [label setFont:[UIFont systemFontOfSize:12]]; label.textAlignment = UITextAlignmentLeft; [label setText:@"TextLabel:"]; label.textColor = [UIColor whiteColor]; label.backgroundColor = [UIColor blackColor]; [self.view addSubview:label]; For more information, see UILabel Class Reference. How do I create a switch? To create a switch, use the UISwitch class, as shown in Listing 10. Listing 10: Creating a switch CGRect frame = CGRectMake(0.0, 0.0, 60.0, 26.0); UISwitch *switchControl = [[UISwitch alloc] initWithFrame:frame]; [switchControl addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside]; [switchControl setBackgroundColor:[UIColor clearColor]]; For more information, see UISwitch Class Reference. How do I create a text field? To create a text field, use the UITextField class, as shown in Listing 11. Listing 11: Creating a text field CGRect textFieldFrame = CGRectMake(0.0, 0.0, 100.0, 30.0); UITextField *textField = [[UITextField alloc] initWithFrame:textFieldFrame]; [textField setBorderStyle:UITextFieldBorderStyleBezel]; [textField setTextColor:[UIColor blackColor]]; [textField setFont:[UIFont systemFontOfSize:20]]; [textField setDelegate:self]; [textField setPlaceholder:@"<enter text>"]; [textField setBackgroundColor:[UIColor whiteColor]]; textField.keyboardType = UIKeyboardTypeDefault; For more information, see UITextField Class Reference. How do I create a text view? To create a text view, use the UITextView class, as shown in Listing 12. Listing 12: Creating a text view CGRect textFieldFrame = CGRectMake(0.0, 0.0, 200.0, 200.0); UITextView *textView = [[UITextView alloc] initWithFrame:textFieldFrame]; [textView setTextColor:[UIColor blackColor]]; [textView setFont:[UIFont systemFontOfSize:20]]; [textView setDelegate:self]; [textView setBackgroundColor:[UIColor whiteColor]]; textView.keyboardType = UIKeyboardTypeDefault; For more information, see UITextView Class Reference. How do I create a web view? To create a web view, use the UIWebView class, as shown in Listing 13. Listing 13: Creating a web view CGRect webFrame = CGRectMake(0.0, 0.0, 200.0, 200.0); UIWebView *webView = [[UIWebView alloc] initWithFrame:webFrame]; [webView setBackgroundColor:[UIColor whiteColor]]; For more information, see UIWebView Class Reference. How do I create a view for images? To create a view for images, use the UIImageView class, as shown in Listing 14. Listing 14: Creating a view for images UIImage *image = [UIImage imageNamed:@"image.png"]; UIImageView *theImageView = [[UIImageView alloc] initWithImage:image]; For more information, see UIImageView Class Reference. How do I create a slider? To create a slider, use the UISlider class, as shown in Listing 15. Listing 15: Creating a slider CGRect frame = CGRectMake(0.0, 0.0, 200.0, 10.0); UISlider *slider = [[UISlider alloc] initWithFrame:frame]; [slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged]; [slider setBackgroundColor:[UIColor clearColor]]; slider.minimumValue = 0.0; slider.maximumValue = 50.0; slider.continuous = YES; slider.value = 25.0; For more information, see UISlider Class Reference. How do I create a segmented control? To create a segmented control, use the UISegmentedControl class, as shown in Listing 16. Listing 16: Creating a segmented control NSArray *arrayOfImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"segment1_Image.png"],                                          [UIImage imageNamed:@"segment2_Image.png"],                                          [UIImage imageNamed:@"segment3_Image.png"],                                          [UIImage imageNamed:@"segment4_Image.png"], nil]; UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems: arrayOfImages]; CGRect frame = CGRectMake(0.0, 120.0, 300.0, 44.0); [segmentedControl setFrame:frame]; [segmentedControl addTarget:self action:@selector(action:) forControlEvents:UIControlEventValueChanged]; For more information, see UISegmentedControl Class Reference. How do I create a page control? To create a page control, use the UIPageControl class, as shown in Listing 17. Listing 17: Creating a page control CGRect frame = CGRectMake(0.0, 0.0, 200.0, 40.0); UIPageControl *pageControl = [[UIPageControl alloc] initWithFrame:frame]; [pageControl addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside]; [pageControl setBackgroundColor:[UIColor clearColor]]; pageControl.numberOfPages = 10; For more information, see UIPageControl Class Reference. How do I create a table view? To create a table view, use the UITableViewclass, as shown in Listing 18. Listing 18: Creating a table view UITableView *tableView = [[UITableView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame] style:UITableViewStylePlain]; tableView.delegate = self; tableView.dataSource = self; tableView.rowHeight = 54; [tableView reloadData]; For more information, see UITableView Class Reference. See also the TableViewSuite sample application. How do I add buttons to the UINavigationController? If your application has a UIViewController object that uses a UINavigationController object, you can add custom buttons in your loadView method. See Listing 19. Listing 19: Adding buttons to the UINavigationController object // add our custom add button as the nav bar's custom right view UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(addAction:)]; self.navigationItem.customRightItem = addButton; [addButton release]; For more information, see UINavigationController Class Reference. How do I display an alert view, action sheet, or modal view? Alerts, action sheets, and modal views are types of views that appear when something requires the user's attention or when an application needs to offer additional choices or functionality to the user. iPhone Human Interface Guidelinesprovides examples of what each view looks like, along with guidelines for when to use each type. Use the UIAlertView class to inform users about a problem or a change in the current situation. For example, Mail shows an alert view when it is unable to connect to the user's mail server. See UIAlertView Class Reference. Use the UIActionSheet class to provide users with additional choices related to the action they are taking. For example, Safari uses an action sheet to provide users with the options to add a link to bookmarks, add a link to the Home screen, or mail a link. See UIActionSheet Class Reference. Use the UIViewController class when you want to provide more extensive functionality in the context of the current task, or as a way to perform a subtask directly related to the user's workflow. For example, Mail provides a modal view that allows a user to compose a new mail message. For a modal view, you use the presentModalViewController:animated:method of UIViewController to display view controller as a modal child of another view controller. See theUIViewController Class Reference. You can see examples of how to implement several of these views by looking at the UICatalog sample application.

Document Revision History Date Notes 2009-04-30 Updated book names and other minor editorial changes. 2008-09-08 Updated several questions for clarity and SDK changes. How do I create my user interface? How do I start my application in landscape mode? How do I enable autorotation? How do I flip my interface...? How do I handle autorotation of my user interface? How do I internationalize or localize my application's text strings? How do I handle touch input...? Updated all CGRectMake() calls to take floats. Minor editorial changes throughout. 2008-05-14 Added new questions: "How do I detect the screen boundary" and "How do I handle autorotation of my user interface" Updated "How do I start my application in landscape mode" to reflect Info.plist key change. Updated code listing for "How do I create a button" and "How do I add buttons to the UINavigationController". Removed a code listing from "How do I handle touch events..." as the API was removed. Minor editorial changes throughout. 2008-03-27 Added new questions: * How do I start my status bar in landscape mode? * How do I localize my application text? * How do I create a web view? Updated existing questions: * How do I handle touch events such as tracking the user's finger or detecting a multi-touch event? * How do I flip my interface like the Weather application? * How do I create a button? * How do I create a text field? * How do I create a view for images? * How do I segmented control? * How do I creating a table view? Fixed spacing issue in several code snippets. Other minor editorial changes. 2008-03-06   Posted: 2009-04-30

Back to Top

Did this document help you?  Yes  It's good, but...  Not helpful...

Shop the Apple Online Store (1-800-MY-APPLE), visit an Apple Retail Store, or find a reseller.

• Mailing Lists
• RSS Feeds

Copyright © 2009 Apple Inc. All rights reserved.

• Terms of Use
• Privacy Policy

iPhone Dev Center    iPhone OS Reference Library    User Experience