iPhone™ Programming: UIDevice

Norman McEntire

Version 1.7 May 12. Thank you Pierre M.

Version 1.6 May 11. Thank you Pierre M.

Version 1.5 May 1. Thank you Pierre M.

Version 1.4 April 30. Thank you Pierre M.

Version 1.3 January 28

About iPhone UIDevice

The UIDevice is a class that provides information about the iPhone or iPod Touch device.

Some of the information provided by UIDevice is static, such as device name or system version.

Other information, such as the device orientation information, is dynamic. It gives current status as to whether the device is face up, face down, in portrait or in landscape orientation.

In this tutorial, you will learn how to use the UIDevice class.

Sample Run on iPhone Simulator

At the end of this tutorial, if you run this app on the iPhone Simulator, it will appear like this:

iPhone Software Skills You Will Learn

How to use Xcode to create a Tab Bar Application.
How to use UITableView to display output in a table.
How to use Interface Builder to connect a UITableView to your code..
How to use UIDeviceInfo to display device information.
How to use NSArray.

Prerequisites

You should have already setup your iPhone software development environment. If this is not the case, then refer to the iPhone Flashlight App: Hands-On for Software Developers

Startup Xcode

If Xcode is not already running, start it up:

On the Mac Desktop, double-click on the Finder icon (the icon with the face on it).
On the left-side of the Finder window, click on Macintosh HD.
On the right-side of the Finder window, click on the Developer folder.
Click on the Applications folder.
Double-click on the Xcode icon.

At this point, you should see the Xcode menu at the top of your desktop.

Create New Xcode Project

With Xcode running, create a new Xcode project:

File > New Project
On the left-side of the New Project window, select Application under iPhone OS.
On the right-side of the New Project window, select Tab Based Application.
Click on the Choose button.
Enter DeviceInfo for the project name.
Click on Save button.

At this point, you should see Xcode open a new window that shows a number of files.

Build Default App

Go ahead and build the default application:

Press the Build and Go button.
After a brief moment, you should see the code running in the iPhone Simulator.
Observe that the "First View" and the "Second View" tab buttons.
In the iPhone Simulator, press the Home button to stop the application.

Use Interface Builder to Edit MainWindow.xib

In this exercise, you will use Interface Builder to edit MainWindow.xib, changing the names of the tabbed buttons to "Device Info" and "Orientation".

In Xcode, in the Groups & Files window on the left, click on the Resources folder to view a list of source files.
Double-click on MainWindow.xib, which starts up Interface Builder.
Click on the title of the window titled "Tab Bar Controller".
From the Interface Builder menu, select Tools > Attributes Inspector.
Where the title says "First", double-click and change the title to say "Device Info".
Where the title says "Second", double-click and change the title to say "Orientation".
In the window titled "Tab Bar Controller", select the "First View" text, and delete it.
Select the "Optionally move this view..." text and delete it.
In the Interface Builder menu, select Tools > Library to display the "Library" window.
In the "Library" window, select "Data Views".
Drag the "Table View" controller onto the "Tab Bar Controller" window.
In the Interface Builder menu, select File > Save.
Press Command+Tab to return to Xcode.
In Xcode, double-click on SecondView.xib.
Observe that a view window opens, showing "Second View".
Delete the text labeled "Loaded by the Second View Controller....".
Change the "Second View" text to read "Orientation View".
In the Interface Builder menu, select File > Save.
Press Command+Tab and return to Xcode.
Click on Build and Go.
Your code should run with two tabs, one labeled "Device Info" and the other labeled "Orientation".
Press Home on iPhone Simulator to exit the application.

As a review, in this exercise you used Interface Builder to customize the user-interface for a "Device Info" view and a "Orientation" view.

Add UITableView to FirstViewController

In this exercise, you will edit the FirstViewController class so that it can manage the UITableView. As you will see, this includes adding the UITableViewDataSource protocol to the FirstViewController class.

In Xcode, in the Groups & Files window on the left, click on the Classes folder to view a list of source files:
```
DeviceInfoAppDelegate.h
DeviceInfoAppDelegate.m
FirstViewController.h
FirstViewController.m
```
Click on FirstViewController.h to select the file into the Xcode editor.

Edit the code as follows:

#import <UIKit/UIKit.h>

@interface FirstViewController : UIViewController <UITableViewDataSource> {
	UITableView *tableView;

}

@property (nonatomic, retain) IBOutlet UITableView *tableView;

@end

The UITableViewDataSource is a protocol (a set of functions) that the FirstViewController can implement to work with a UITableView. If you are a Java software developer, the UITableViewDataSource is an interface in Java terminology; it is a protocol in Objective-C terminology.
The IBOutlet tells Interface Builder that this tableView variable will be associated with a UITableView that is part of the user-interface of the first view.
Select FirstViewController.m into the editor.

Enhance the code to match the following:

#import "FirstViewController.h"

@implementation FirstViewController

@synthesize tableView;

- (void)viewDidLoad {
	[super viewDidLoad];

	self.tableView.dataSource = self;
}

Every table view (UITableView) requires a data source, which is an object that provides data to the table. In this case, the data source is set to the class itself.
To implement the UITableViewDataSource protocol, you must implement at least these two methods:
```
tableView:numberOfRowsInSection:
tableView:cellForRowAtIndexPath:
```
Continue to edit FirstViewController.m, adding code to implement the tableView:numberOfRowsInSection: method.


- (NSInteger)tableView:(UITableView *)tableView
	 numberOfRowsInSection:(NSInteger)section {

	return 1; //Temporary - will change later

}

Continue to edit FirstViewController.m, adding code to implement the tableView:cellForRowAtIndexPath: method.


- (UITableViewCell *)tableView:(UITableView *)tableView
	 cellForRowAtIndexPath:(NSIndexPath *)indexPath {

	UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"any"];
	if (cell == nil) {
		cell = [[[UITableViewCell alloc]
			 initWithFrame:CGRectZero reuseIdentifier:@"any"]
			autorelease];
	}
	cell.text = @"TODO";
	return cell;

}

As a review, in this exercise you added code to FirstViewController, so that it can manage the UITableView.

Use Interface Builder to Connect UITableView Data Source

In this exercise, you will use Interface Builder to connect the data source of the UITableView to the FirstViewController.

Press Command+Tab to return to Interface Builder.
Click on the Table View to select.
Control-click on the Table View, observing that a Table View window appears.
Press and hold the Control button, then click and drag from the "o" for dataSource to the MainWindow.xib, dropping on the FirstViewController (in the Type column).
The result of the previous control-click-drag is that the Table View is connected to the FirstViewController. To repeat: Once you have completed the control-click-drag, the UITableView control shown by Interface Builder is now connected to the FirstViewController.
Select File > Save in Interface Builder.
Press Command-Tab to return to Xcode.
Select Build and Go in the Xcode menu to build and run your app.
You should see a "TODO" message displayed in the Table View.
Press Home to exit your application.

As a review, in this exercise you used Interface Builder to control-click-drag from the UITableView control to the FirstViewController.

Use UIDevice For Device Info

In this exercise, you will edit the FirstViewController class so that it adds info provided by UIDevice to the UITable.

In Xcode, select FirstViewController.h into the editor.

Edit the code to match the following:

#import <UIKit/UIKit.h>
@interface FirstViewController : UIViewController <UITableViewDataSource> {
	UITableView *tableView

	NSArray *propertyNames;

}
@property (nonatomic, retain) IBOutlet UITableView *tableView;

@property (nonatomic, retain) NSArray *propertyNames;

@end

The code adds a member variable named propertyNames, which is a pointer to a NSArray.
Select FistViewController.m into the editor.

Edit the code to match the following.

#import "FirstViewController.h"

@implementation FirstViewController

@synthesize tableView;

@synthesize propertyNames;


- (void)viewDidLoad {
	[super viewDidLoad];

	self.tableView.dataSource = self;

	self.propertyNames = [[NSArray alloc]
			    initWithObjects:@"model",
				 @"name",
				 @"systemName",
				 @"systemVersion",
				 nil];

}

The code above initializes the array with the names of the properties.
Continue to edit the code so that tableView:numberOfRowsInSection: returns the count of elements in the array.

- (NSInteger)tableView:(UITableView *)tableView
	 numberOfRowsInSection:(NSInteger)section {

	return self.propertyNames.count;

}

Continue to edit FirstViewController.m, adding code to implement the tableView:cellForRowAtIndexPath: method.

- (UITableViewCell *)tableView:(UITableView *)tableView
	cellForRowAtIndexPath:(NSIndexPath *)indexPath {

	UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"any"];
	if (cell == nil) {
		cell = [[[UITableViewCell alloc]
			 initWithFrame:CGRectZero reuseIdentifier:@"any"]
			autorelease];

		NSString *value;
		switch (indexPath.row) {
			case 0: value = [[UIDevice currentDevice] model]; break;
			case 1: value = [[UIDevice currentDevice] name]; break;
			case 2: value = [[UIDevice currentDevice] systemName]; break;
			case 3: value = [[UIDevice currentDevice] systemVersion]; break;
		}
	
		CGRect rect = CGRectMake(10.0, 0.0, 120.0, 40.0);
		UILabel *name = [[UILabel alloc] initWithFrame:rect];
		name.text = [self.propertyNames objectAtIndex:indexPath.row];
		[cell addSubview:name];

		rect = CGRectMake(160.0, 0.0, 200.0, 40.0);
		name = [[UILabel alloc] initWithFrame:rect];
		name.text = value;
		[cell addSubview:name];
	}

	return cell;
}

Build and Go.
Here is device info as displayed on the iPhone Simulator:
Here is device info as displayed on the iPod Touch:

As a review, in this exercise you added code to FirstViewController, so that it could display UIDevice properties.

Create OrientationViewController Class

In this exercise, you will create a class named OrientationViewController. This class will be similar to the FirstViewController class; it will be in charge of handling the view when the user presses the "Orientation" tab.

In Xcode, select the Classes folder.
Control-Click on the Classes folder, then select Add > New File.
When you see the "New File" window, select Cocoa Touch Classes on the left-side of the window.
Select UIViewController subclass on the right-side of the window.
Click on Next.
Name the file OrientationViewController.
Click Finish.
At this point you have two new files added to your project:
```
OrientationViewController.h
OrientationViewController.m
```
Select OrientationViewController.h into the editor.

Edit the code to match the following.

#import <UIKit/UIKit.h>

@interface OrientationViewController : UIViewController {

	UILabel *orientationMsg;

}

@property (nonatomic, retain) IBOutlet UILabel *orientationMsg;
- (void)doTimer:(NSTimer *)theTimer;

@end

Similar to what you did with the UITableView control, the code in the previous step will give you access to the UILabel control that is laid out by Interface Builder. You need access to the label so that you can change the text; for example, change it from saying "Portrait" to "Landscape" as you rotate the device.
The doTimer: will be used as the timer function.
Select OrientationViewController.m into the editor.

Edit the code to match the following.

#import "OrientationViewController.h"

@implementation OrientationViewController

@synthesize orientationMsg;

- (void)doTimer:(NSTimer *)theTimer {
	// Get orientation
	UIDeviceOrientation o = [[UIDevice currentDevice] orientation];

	// Change message based on orientation
	switch (o) {
		case UIDeviceOrientationUnknown:
			self.orientationMsg.text = @"Orientation Unknown";
			break;

		case UIDeviceOrientationPortrait:
			self.orientationMsg.text = @"Orientation Portrait";
			break;
		case UIDeviceOrientationPortraitUpsideDown:
			self.orientationMsg.text = @"Portrait Upside Down";
			break;

		case UIDeviceOrientationLandscapeLeft:
			self.orientationMsg.text = @"Landscape Left";
			break;
		case UIDeviceOrientationLandscapeRight:
			self.orientationMsg.text = @"Landscape Right";
			break;

		case UIDeviceOrientationFaceUp:
			self.orientationMsg.text = @"Face Up";
			break;
		case UIDeviceOrientationFaceDown:
			self.orientationMsg.text = @"Face Down";
			break;

		default:
			self.orientationMsg.text = @"?";
	}
}

The code in the previous step gets the current device orientation from UIDevice, and then updates the label based on the value.

Continue to edit the code:


- (void)viewDidLoad {
	[super viewDidLoad];

	// Startup orientation notifications
	[[UIDevice currentDevice]
	 beginGeneratingDeviceOrientationNotifications];

	// Setup timer to check for orientation status
	[NSTimer scheduledTimerWithTimeInterval:1.0
		  target:self
		  selector:@selector(doTimer:)
		  userInfo:nil
		  repeats:YES];
}

The code from the previous step enables the orientation notifications. It also sets up a time to check the notification status every second.
Continue to edit the code:

- (void)dealloc {

	[[UIDevice currentDevice]
	 endGeneratingDeviceOrientationNotifications];

	[super dealloc];
}

The code in the previous step disabled the device orientation notifications.
Build and Go.
You should observe that no visual changes have occurred to your application. That is, when you touch the "Orientation" tab, you still see the "Orientation View" message. This is because you still need to use Interface Builder to connect this class you created with the view controller.

As a review, in this exercise you created a new class named OrientationViewController. The purpose of this class is to enable/disable the orientation notifications, and to display the current orientation in the view.

Use Interface Builder to Connect OrientationViewController

In this exercise, you will use Interface Builder to connect the OrientationViewController class to the "second" view.

In Xcode select the Resources folder.
Double-click on SecondView.xib to open the file in Interface Builder.
In Interface Builder, find the window titled SecondView.xib. If it is not visible, select Window > SecondView.xib to view.
Select Tools > Identity Inspector, observing that the value of "Class" at the top of the window is set to UIViewController.
Change the name of the class from UIViewController to OrientationViewController. To repeat: Change the name of the "Class" from UIViewController to OrientationViewController. This is the key step for connecting your OrientationViewController code to this view controller.
Use the Interface Builder menu to select Window > MainWindow.xib.
Expand the "Tab Bar Controller as needed, and select View Controller (Orientation), observing that it has the type of UIViewController.
Select Tools > Identity Inspector, observing that the value of "Class" is UIViewController.
Change the value of "Class" from UIViewController to OrientationViewController.
To repeat: You changed the value of UIViewController to OrientationViewController in both MainWindow.xib and SecondViewController.xib.
Select File > Save in Interface Builder.
Press Command-Tab to return to Xcode.
Select Build and Go in the Xcode menu to build and run your app.
Again, you will not see any visible changes to your app. Although you have associated the class with the view controller, you have not yet connected the IBOutlet.
Press Home to exit your application.
To connect the IBOutlet, press Command+Tab to return to Interface Builder.
In the SecondView.xib window, Control-Click on File's Owner, which displays the window of Outlets.
Control-Click-Drag from the "O" associated with the orientationMsg to the "Orientation View" label that is on the window labeled "View". This is an important step: it connects the orientationMsg outlet to the actual UILabel, hence allowing you to change the value of the label under program control.
Select File > Save in Interface Builder.
Press Command-Tab to return to Xcode.
Select Build and Go in the Xcode menu to build and run your app.
Now have some fun! Install on your iPhone or iPod Touch, and have fun positioning the device various ways, face up, face down, portrait, landscape --- you'll see the message displayed in the screen!

As a review, in this exercise you used Interface Builder to connect your OrientationViewController class with the SecondView.xib.

Skills Review

Xcode
Tab Based Application
UITableView
UITableViewDataSource
UIDevice
IBOutlet
@property
@synthesize
Interface Builder
Control-Click-Drag

How To Contact Author

Feel free to contact the author for any of the following:

You have a question or comment about this mini-course.
You need to hire Servin to help with your software development project.
You need to hire Servin to give an on-site training course for your software development team.