UIImage and resizableImageWithCapInsets

Recently, I started writing a small example to better learn the iOS 5 Appearance API and customization of the UINavigationBar. The goal was to add your own background, title and text to the navigation bar. When I finished it, I decided to improve the buttons in the navigation bar using the same Appearance API.
While I was immersed in customizing buttons, I discovered the UIImage method, which appeared in iOS 5, resizableImageWithCapInsets. I decided to distract from the initial idea of ​​mocking the navigation panel in order to understand how the installation of fixed boundaries works.
( Approx. Translator - I did not find a better translation, lend?)
This post is about what I learned.

Setting boundaries for UIButton

As written in the documentation, resizableImageWithCapInsets adds fixed borders to the image, and when it is resized or scaled, these borders do not change. This is best understood from an example. Let's imagine that I want all the buttons in my interface to look the same: a gradient with a white border. Below is the image for examples to this post (image on a gray background, to better highlight the white border):

Depending on the context of use, the button may appear anywhere, and its size may vary. The following code is usually used to create a button with a background image:

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(80, 130, 160, 44)]; [button setTitle:@"Test Button" forState:UIControlStateNormal]; //     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. Now we change the code to include fixed bounds. But first, let's look at the signature of this method:

 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets 

Looking a little further, we find that UIEdgeInserts is defined as a structure:

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

UIEdgeInsets is a structure that defines float values ​​for each fixed boundary: the upper, left, lower, and right regions of the image. To apply this to our button, you need to do the following:

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

This will create an image in which the left and right 16 pixels of the original image do not scale or resize when you stretch the image to fit the button. Final result:

')

Cap Insets with UIBarButtonItem

We can use the same image for the button in the navigation bar. Without setting the boundaries, the button looks like this:

The code below demonstrates the creation of a button with fixed 12 image pixels across the entire frame:

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

Final result:


Note translator - the use of this technology is similar to the use of 9-patch technology in Android, except that there is no need to prepare an image in advance.