iOS Developer Tips Blog » User Interface

iOS 5 : Customize UINavigationBar and UIBarButtonItem with the Appearance API

John Muchow — Mon, 02 Jan 2012 08:09:20 +0000

In a previous post, UIImage and resizableImageWithCapInsets, I explained how to use the method resizableImageWithCapInsets in a UIImage object to set cap insets, which specify areas of an image that are not to be changed when resizing or scaling an image. That post was a segue to this post, which will use images (and cap insets) as part of the iOS 5 appearance API and customizing the navigation bar.

Change UINavigationBar Background

With the release of iOS 5, the UIAppearance protocol is used to access the appearance proxy for a class you would like to configure. Customization is done by sending messages to the target class appearance proxy. When changing the appearance of an object, all instances of the object can be updated or only specific instances within a container class.

Let’s see how this looks as it relates to updating the background color of a UINavigationBar, it’s text and the back button which will allow a user to return to a previous view controller.

The image below is the gradient that I will use for the background:

Using the above image, I created a one pixel wide image for both portrait and landscape variations of the navbar, reason being, the height of the navar bar when the device is in portrait mode is 44, whereas the height for landscape is 32.

The images in my project are NavigationPortraitBackground.png and NavigationLandscapeBackground.png, both shown below:

I now create two UIImage objects:

// Create image for navigation background - portrait
UIImage *NavigationPortraitBackground = [[UIImage imageNamed:@"NavigationPortraitBackground"] 
                              resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
 
// Create image for navigation background - landscape
UIImage *NavigationLandscapeBackground = [[UIImage imageNamed:@"NavigationLandscapeBackground"] 
                              resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

To set these images as the new backgrounds for all navigation bars, here’s all I need to do:

// Set the background image all UINavigationBars
[[UINavigationBar appearance] setBackgroundImage:NavigationPortraitBackground 
                                     forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundImage:NavigationLandscapeBackground 
                                     forBarMetrics:UIBarMetricsLandscapePhone];

In addition to the color, I can change the appearance of the text on all navigations bars as well:

// Set the text appearance for navbar
[[UINavigationBar appearance] setTitleTextAttributes:
    [NSDictionary dictionaryWithObjectsAndKeys:
    [UIColor whiteColor], UITextAttributeTextColor, 
    [UIColor redColor], UITextAttributeTextShadowColor, 
    [NSValue valueWithUIOffset:UIOffsetMake(0, 0)], UITextAttributeTextShadowOffset, 
    [UIFont fontWithName:@"Verdana-Bold" size:16], UITextAttributeFont, 
    nil]];

As the final step, I will update the back button with a custom image, which is shown below (the button is shown on a gray backdrop so you can see the white border):

Using what I described in the early post about cap insets, I can create a UIImage object and use the appearance API of the UIBarButtonItem to set the back button look. Notice that each value in the cap inset is set to 12, indicating all four corners are to hold steady at 12 pixels, even if the images stretched or resized.

// Set back button for navbar
UIImage *backButton = [[UIImage imageNamed:@"blueButton"]  resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)];
  [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButton forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

The last step is to create a button for the user interface that will push a new view controller, which will update the navigation bar to show the custom back button created above.

...
 
testButton = [[UIButton alloc] initWithFrame:CGRectMake(80, 30, 160, 44)];  
[testButton setTitle:@"Test Button" forState:UIControlStateNormal];
 
// Notice cap insets are different from above
UIImage *buttonImage = [[UIImage imageNamed:@"blueButton"]  resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];
 
[testButton addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];        
[testButton setBackgroundImage:buttonImage forState:UIControlStateNormal];
 
...

An important concept to understand here, I’ve used the same image, blueButton.png, for both the custom back button as well as the button on the primary user interface – setting the cap insets specifies the rules, if you will, of how the image can be stretched, yet keep the look appropriate for the context in which the button will appear (that is, on the navbar or main UI).

A few screenshots follow that show the custom navigation bar, text and buttons in both portrait and landscape modes:

Download the Xcode Project

You can download the entire project source code here.

iOS 5 : UIImage and resizableImageWithCapInsets

John Muchow — Tue, 20 Dec 2011 07:02:10 +0000

I recently began writing a short example to learn more about the iOS 5 Appearance API and customizing UINavigationBar objects. The goal was to add a custom background, title and text to the navbar. Once I had this working, to keep a consist look across my application, I began tweaking the buttons on the navbar using the same Appearance API.

As I got further into the customization of the buttons, I ran into a method within UIImage that was introduced in iOS 5, resizableImageWithCapInsets. I found myself getting side-tracked from the original idea of navbar look and feel, to understanding how cap insets work. This post delves into what I learned.

Cap Insets with UIButton

As the documentation describes, you use resizableImageWithCapInsets to add cap insets to an image, when the image is resized or scaled, cap areas are not affected. The best way to understand this is through an example.

Let’s assume I want all the buttons on my UI to have a similar look, a gradient with a white border. Below is the image used for the examples in this post (the button is shown on a gray backdrop so you can see the white border):

Depending on the context of where the button appears, its size may vary. The code to create a button with the image and the corresponding output follow:

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(80, 130, 160, 44)];  
[button setTitle:@"Test Button" forState:UIControlStateNormal];
 
// Image with without cap insets
UIImage *buttonImage = [UIImage imageNamed:@"blueButton"];
 
[button addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];        
[button setBackgroundImage:buttonImage forState:UIControlStateNormal];
[[self view] addSubview:button];

As you can see, the button is stretched in all directions. Let’s change the code to include cap insets, however, before we do that, let’s look at the signature of the cap insets method:

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

Looking on step further, UIEdgeInserts is defined as:

typedef struct {
   CGFloat top, left, bottom, right;
} UIEdgeInsets;

UIEdgeInsets is structure that specifies float values for each cap inset: top, left, bottom and right areas of an image. To apply this to the image for the button, here is all we need to do:

// Image with cap insets
UIImage *buttonImage = [[UIImage imageNamed:@"blueButton"]  
   resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];

This requests that the left and right 16 pixels of the original image are not scaled or resized when stretching the image to accomodate the button size frame defined above. The end results is as shown below:

Cap Insets with UIBarButtonItem

We can use the same image for a button on a navbar (I’ll show the specifics in the next post on customizing the navbar). Without specifying the cap insets, the button looks as follows:

The code below specifies an image where 12 pixels on the top, left, bottom and right be preserved when stretching/resizing the button:

UIImage *backButton = [[UIImage imageNamed:@"blueButton"]  
   resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)];

The output nows looks as follows:

With that under our belt, in the next post I’ll continue with my original idea of customizing UINavigationBar, including background, title and text, as well as the buttons on the navbar.

iOS 5 : UIStepper Control

John Muchow — Wed, 02 Nov 2011 07:01:05 +0000

There is a new pre-built control in iOS 5 for incrementing or decrementing a value, UIStepper. The control has two buttons aligned horizontally, one labeled with a plus (+) the other a minus (-).

One nice feature is a continuous option, wherein if the user presses and holds down either +/- button, the stepper value is incremented repeatedly. The longer the button is held down, the faster the increment will occur. Also, you can have the increment value wrap around when a range of values is specified, for example, if you set min and max to 0 and 99 respectively, when the value reaches 99, the next value will be 0 (and vice-versa).

Below is a screenshot that shows the output of the example code below:

Below is a short code example showing the various properties available in UIStepper:

  // Create a label to show the value in the stepper
  label = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 100, 30)];    
  [label setTextColor:[UIColor whiteColor]];
  [label setBackgroundColor:[UIColor clearColor]];
  [label setTextAlignment:UITextAlignmentLeft];
  [label setText: @"Quantity:"];
  [[self view] addSubview:label];
 
  // Frame defines location, size values are ignored
  UIStepper *stepper = [[UIStepper alloc] initWithFrame:CGRectMake(120, 20, 0, 0)];    
 
  // Set action target and action for a particular value changed event
  [stepper addTarget:self action:@selector(stepperPressed:) forControlEvents:UIControlEventValueChanged];
 
  // Set min and max
  [stepper setMinimumValue:0];
  [stepper setMaximumValue:99];
 
  // Value wraps around from minimum to maximum
  [stepper setWraps:YES];
 
  // If continuos (default), changes are sent for each change in stepper,
  // otherwise, change event occurs once user lets up on button
  [stepper setContinuous:NO];
 
  // To change the increment value for each step
  // (default is 1)
  [stepper setStepValue:10];

Simple Menus and Messages with UIActionSheet

John Muchow — Mon, 10 Oct 2011 06:21:24 +0000

If you need to create a quick menu or present a user with a short message, you may want to consider a UIActionSheet as an option. This control will slide up from the bottom of the screen, and offers a number of easily configurable options.

The code in the interface definition below creates an actionsheet (if you prefer, you can accomplish the same using Interface Builder to layout and define a UIActionSheet). Notice there is a delegate required if you define multiple buttons on the sheet and need to determine which was tapped:

@interface SandboxViewController : UIViewController 
{
  ...
  UIActionSheet *sheet;
}
@end

At some point in your code you can create a sheet as follows:

  sheet = [[UIActionSheet alloc] initWithTitle:@"Select Belgian Beer Style"
                                      delegate:self
                             cancelButtonTitle:@"Cancel"
                       destructiveButtonTitle:nil
                            otherButtonTitles:@"Dubble", @"Lambic", @"Quadrupel", @"Strong Dark Ale", @"Tripel", nil];
 
  // Show the sheet
  [sheet showInView:self.view];
  [sheet release];

Here is another variation:

  sheet = [[UIActionSheet alloc] initWithTitle:@"Select Account to Delete"
                                      delegate:self
                             cancelButtonTitle:@"Cancel"
                        destructiveButtonTitle:@"Delete All Accounts"
                             otherButtonTitles:@"Checking", @"Savings", @"Money Market", nil];
  // Show the sheet
  [sheet showInView:self.view];
  [sheet release];

The screenshots below show each of the above sheets and how they look on the simulator:

To determine which button was selected, implement the method shown below:

- (void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex
{
  NSLog(@"Button %d", buttonIndex);
}

One additional way to use an actionsheet is to present information to a user, in this case, you fill in the title and just one button:

  sheet = [[UIActionSheet alloc] initWithTitle:@"Lorem ipsum dolor...."
                                      delegate:self
                             cancelButtonTitle:nil
                        destructiveButtonTitle:nil
                             otherButtonTitles:@"Got it." ,nil];
 
  // Show the sheet
  [sheet showInView:self.view];
  [sheet release];

Load and Access Custom Fonts

John Muchow — Mon, 18 Jul 2011 07:12:56 +0000

It’s surprisingly easy to add custom fonts to your iOS apps. Begin by adding the font(s) to your project, (drag/drag into the resources folder in the Project Window).

Next, add a property in the project plist named UIAppFonts, which is an array containing the names of each font you would like to make available in the application – if you are using the Property List Editor in Xcode, select Fonts provided by application from the dropdown list. Add an entry for each font:

The property list below is the text version of the plist file, here you can see the key UIAppFonts, the array and each of the two font entries:

To access the fonts within an application, call the method fontWithName in the UIFont class, include the font size as well:

UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 240, 40)];
[label1 setFont: [UIFont fontWithName: @"Grinched" size:24]];
[label1 setText:@"Grinched Font"];
[[self view] addSubview:label1];  
 
UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(10, 80, 240, 40)];
[label2 setFont: [UIFont fontWithName: @"Energon" size:18]];
[label2 setText:@"Energon Font"];
[[self view] addSubview:label2];

The output of the above looks as follows in the simulator:

To get a list of all the available font family names in your app, add this to your code:

NSLog(@"Available fonts: %@", [UIFont familyNames]);

Using Font Macros for Consistency

John Muchow — Wed, 06 Jul 2011 11:03:35 +0000

In most applications, keeping with one or two fonts is a good design choice. To this end, I often include a few simple macros to keep fonts consistent, easily change font size as well as emphasis (bold).

Below are a few macros that give you an idea how I might go about specifying two primary fonts for an app:

// For text, messages, etc
#define DEFAULT_FONTSIZE    15
#define DEFAULT_FONT(s)     [UIFont fontWithName:@"ArialMT" size:s]
#define DEFAULT_BOLDFONT(s) [UIFont fontWithName:@"Arial-BoldMT" size:s]
 
// For table cells
#define CELL_FONTSIZE    16
#define CELL_FONT(s)     [UIFont fontWithName:@"Helvetica-Oblique" size:s]
#define CELL_BOLDFONT(s) [UIFont fontWithName:@"Helvetica-BoldOblique" size:s]

With these macros in defined it is easy to specify fonts based on where they are used and keep things consistent across an app:

// Assume textFieldUserName is a UITextField
[textFieldUserName setFont:DEFAULT_FONT(DEFAULT_FONTSIZE)];
 
// For bold and larger text
[someTextField setFont:DEFAULT_BOLDFONT(DEFAULT_FONTSIZE + 2)];
 
...
 
// Set cell font sizes
// Assume cell is a UITableViewCell
[[cell textLabel] setFont:CELL_FONT(CELL_FONTSIZE)];
 
// For bold and larger text
[[cell textLabel] setFont:CELL_BOLDFONT(CELL_FONTSIZE + 2)];

You could also add a few additional macros for fonts that support italics or other attributes. If you have similar macros, please feel free to share in the comments section.

Deselect Table Row with Animation

John Muchow — Mon, 13 Jun 2011 07:27:16 +0000

Here is a quick little trick to automatically deselect a table row once tapped by a user. With the approach below you can also adjust the length of the delay (in seconds) before the deselection occurs.

When working with a table, when a row is selected didSelectRowAtIndexPath is called, inside this method after you take care of any other business, call performSelector specifying a method to call and a delay. In the called method simply deselect the table row as shown below:

- (void) unselectCurrentRow
{
  // Animate the deselection
  [self.tableView deselectRowAtIndexPath:
      [self.tableView indexPathForSelectedRow] animated:YES];
}
 
- (void)tableView:(UITableView *)tableView 
      didSelectRowAtIndexPath:(NSIndexPath *)newIndexPath
{
  // Any other table management you need
  ...
 
  // After one second, unselect the current row
  [self performSelector:@selector(unselectCurrentRow) 
      withObject:nil afterDelay:1.0];
}

Creating Clickable Hyperlinks from a URL, Phone Number or Address

John Muchow — Mon, 22 Nov 2010 03:12:59 +0000

The following tips shows a quick way to create clickable hyperlinks using a UITextView. The trick is to set the dataDetectorTypes property to specify the data type you are after, from there, upon a tap the link will launch the appropriate application, namely Safari, Phone Dialer or Maps.

Clickable URL

// Create textview, centering horizontally
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(0, 10, 320, 50)];
 
// Set font, background and alignment
[textView setFont:[UIFont boldSystemFontOfSize:16]];
[textView setBackgroundColor:[UIColor blackColor]];
[textView setTextAlignment:UITextAlignmentCenter];
 
// Unfortunately the link will show as blue even with this setting
//  [textView setTextColor:[UIColor greenColor]];
 
// Edit and scrolling off  
[textView setEditable:NO];
[textView setScrollEnabled:NO];
 
// Set data type to specify URL/link
[textView setDataDetectorTypes:UIDataDetectorTypeLink];
 
// Set text as URL
[textView setText:@"iOSDeveloperTips.com"];  
 
[self.view addSubview:textView];

Clickable Phone Number

To change up the code to support a clickable phone number, replace lines 16-21 with the following:

// Set data type to phone number
[textView setDataDetectorTypes:UIDataDetectorTypePhoneNumber];
 
// Set text as phone number
[textView setText:@"800-555-1212"];

Clickable Address

With the release of iOS 4.0, you can now create a clickable address. Tapping on the link will launch the Maps application.

// Set data type to address
[textView setDataDetectorTypes:UIDataDetectorTypeAddress];
 
// Set text as phone number
[textView setText:@"1 Infinite Loop, Cupertino, CA 95014"];

Creating Circular and Infinite UIScrollViews

John Muchow — Fri, 05 Nov 2010 07:09:21 +0000

Editor’s Note: This post was written by Jacob Haskins, Director of Mobile Development at Accella. Thanks to Jon Stroz of Accella for reaching out to me to share this idea.

When creating paging functionality for iPhone apps, there may be times that an infinite page loop would be desired. For example, if you have a small gallery of photos you are displaying, you may want to swipe through the set and have it start back at the beginning once you reach the end. The user would be able to continue swiping as much as they wanted in one direction to continue to view the content. Here are two strategies for achieving this result:

Duplicate End Caps

The first option is best suited for smaller loops. Suppose you have ten photos to display. When the user is on photo one and swipes left, it will take the user to photo ten. When the user is on photo ten and swipes right, it will take the user to photo one. The logic we will follow here is to add photos in order, but place an duplicate of photo ten to the left of photo one and a duplicate of photo one to the right of photo ten.

Now when the user scrolls to the end, we reposition the content offset of our UIScrollView. By having a duplicate photo at the end and repositioning the offset without using animation, we create a seamless experience for the user.

- (void)scrollViewDidEndDecelerating:(UIScrollView *)sender 
{
    // The key is repositioning without animation
    if (scrollView.contentOffset.x == 0) {
        // user is scrolling to the left from image 1 to image 10.
        // reposition offset to show image 10 that is on the right in the scroll view
        [scrollView scrollRectToVisible:CGRectMake(3520,0,320,480) animated:NO];
    }
    else if (scrollView.contentOffset.x == 3840) {
        // user is scrolling to the right from image 10 to image 1.
        // reposition offset to show image 1 that is on the left in the scroll view
        [scrollView scrollRectToVisible:CGRectMake(320,0,320,480) animated:NO];
    }
}

3 Pages Only

There may be times when you want an infinite page loop, but don’t want to load in a lot of content. For example, You may have a lot of content to display inside the UIScrollView. Loading large amounts of data there would not be the ideal approach to the situation.

The logic that we can use there is to keep the UIScrollView at just three pages. Data would load on each page and the user would always be looking at the data in the middle page. When the user scrolled to a new page, the content for each page would be reset and the offset would go back the user is back to viewing the middle page. That way even though you may have a large amount of data to scroll through, it’s not all loaded at once. Only three pages are ever loaded at one time.

 
- (void)viewDidLoad 
{
  [super viewDidLoad];
 
  documentTitles = [[NSMutableArray alloc] init];
 
  // create our array of documents
  for (int i = 0; i < 10; i++) {
    [documentTitles addObject:[NSString stringWithFormat:@"Document %i",i+1]];
  }
 
  // create placeholders for each of our documents
  pageOneDoc = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
  pageTwoDoc = [[UILabel alloc] initWithFrame:CGRectMake(320, 0, 320, 44)];
  pageThreeDoc = [[UILabel alloc] initWithFrame:CGRectMake(640, 0, 320, 44)];
 
  pageOneDoc.textAlignment = UITextAlignmentCenter;
  pageTwoDoc.textAlignment = UITextAlignmentCenter;
  pageThreeDoc.textAlignment = UITextAlignmentCenter;
 
  // load all three pages into our scroll view
  [self loadPageWithId:9 onPage:0];
  [self loadPageWithId:0 onPage:1];
  [self loadPageWithId:1 onPage:2];
 
  [scrollView addSubview:pageOneDoc];
  [scrollView addSubview:pageTwoDoc];
  [scrollView addSubview:pageThreeDoc];
 
  // adjust content size for three pages of data and reposition to center page
  scrollView.contentSize = CGSizeMake(960, 416);
  [scrollView scrollRectToVisible:CGRectMake(320,0,320,416) animated:NO];
}
 
- (void)loadPageWithId:(int)index onPage:(int)page 
{
  // load data for page
  switch (page) {
    case 0:
      pageOneDoc.text = [documentTitles objectAtIndex:index];
      break;
    case 1:
      pageTwoDoc.text = [documentTitles objectAtIndex:index];
      break;
    case 2:
      pageThreeDoc.text = [documentTitles objectAtIndex:index];
      break;
  }
}
 
- (void)scrollViewDidEndDecelerating:(UIScrollView *)sender 
{
  // All data for the documents are stored in an array (documentTitles).
  // We keep track of the index that we are scrolling to so that we
  // know what data to load for each page.
  if(scrollView.contentOffset.x > scrollView.frame.size.width) 
  {
    // We are moving forward. Load the current doc data on the first page.
    [self loadPageWithId:currIndex onPage:0];
 
    // Add one to the currentIndex or reset to 0 if we have reached the end.
    currIndex = (currIndex $gt;= [documentTitles count]-1) ? 0 : currIndex + 1;
    [self loadPageWithId:currIndex onPage:1];
 
    // Load content on the last page. This is either from the next item in the array
    // or the first if we have reached the end.
    nextIndex = (currIndex $gt;= [documentTitles count]-1) ? 0 : currIndex + 1;
 
    [self loadPageWithId:nextIndex onPage:2];
  }
  if(scrollView.contentOffset.x $lt; scrollView.frame.size.width) {
    // We are moving backward. Load the current doc data on the last page.
    [self loadPageWithId:currIndex onPage:2];
 
    // Subtract one from the currentIndex or go to the end if we have reached the beginning.
    currIndex = (currIndex == 0) ? [documentTitles count]-1 : currIndex - 1;
    [self loadPageWithId:currIndex onPage:1];
 
    // Load content on the first page. This is either from the prev item in the array
    // or the last if we have reached the beginning.
    prevIndex = (currIndex == 0) ? [documentTitles count]-1 : currIndex - 1;
 
    [self loadPageWithId:prevIndex onPage:0];
  }     
 
  // Reset offset back to middle page
  [scrollView scrollRectToVisible:CGRectMake(320,0,320,416) animated:NO];
}

Download the Source Code

Xcode Project – Circular UI Scrollview

Screen Capture using UIGetScreenImage

John Muchow — Mon, 10 May 2010 11:36:23 +0000

Editor’s Note: I read today (7/22/2010) that Apple is no longer approving applications using UIGetScreenImage. I haven’t been able to find an official Apple announcement on this – however, please give this consideration before using this method in your apps.

As talked about on TUAW, among other popular blogs, Apple has opened up the API to allow applications to capture the screen contents. So what’s the excitement all about? Read on, as this method opens up some interesting possibilities…

One of the unique opportunities is capturing screen contents while the camera is active, think augmented reality. One example of this idea in action is Sudoku Grab created by Chris Greening. The application allows the user to point the camera to a Sudoko board wherein the app will recognize the board, process the information and (optionally) show the solution. It’s not so much about solving the game that’s interesting as is the idea of using UIGetScreenImage() as a means to make this happen.

Setting up the User Interface

So let’s look at how to call UIGetScreenImage() to capture screen contents. This app consists of one primary view controller, the initialization is shown below.

 
- (id)init
{
  if (self = [super init]) 
  {
    self.view = [[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]] autorelease];
		self.view.backgroundColor = [UIColor grayColor];
 
    // Button to activate camera
    button = [[UIButton alloc] initWithFrame:CGRectMake(80, 55, 162, 53)];    
    [button setBackgroundImage:[UIImage imageNamed:@"Camera.png"] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];      
    [self.view addSubview:button];
    [button release];
  }
 
  return self;  
}

This simple UI presents nothing more than one button, which when pressed will call a method to activate UIGetScreenImage() to capture the screen.

Calling UIGetScreenImage()

Before we can call UIGetScreenImage(), it’s good practice to define the method somewhere within our code. This will keep the compiler from generating the warning: implicit declaration of function ‘UIGetScreenImage.’ The next steps involve capturing the screen and creating a UIImage object.

// Define at top of implementation file
CGImageRef UIGetScreenImage(void);
 
...
 
- (void)buttonPressed:(UIButton *)button
{
  // Capture screen here...
  CGImageRef screen = UIGetScreenImage();
  UIImage* image = [UIImage imageWithCGImage:screen];
  CGImageRelease(screen);
 
  // Save the captured image to photo album
  UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
}

Saving Captured Image to Photo Album

If you look at the last line of code above, this will initiate a request to write the image to the Photo Album. The code below shows the method that is called once the save is completed, in this example I display a message indicating success or failure.

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
  UIAlertView *alert;
 
  // Unable to save the image  
  if (error)
    alert = [[UIAlertView alloc] initWithTitle:@"Error" 
                            message:@"Unable to save image to Photo Album." 
                            delegate:self cancelButtonTitle:@"Ok" 
                            otherButtonTitles:nil];
  else // All is well
    alert = [[UIAlertView alloc] initWithTitle:@"Success" 
                            message:@"Image saved to Photo Album." 
                            delegate:self cancelButtonTitle:@"Ok" 
                            otherButtonTitles:nil];
  [alert show];
  [alert release];
}

Simulator Support

From what I can tell, UIGetScreenImage() is not supported on the simulator, you’ll need to load the app on a device to see how this works.

UIGetScreenImage Source Code Example

Here is a link to download the Xcode project for UIGetScreenImage Source.