IOS: How to make a scalable button with Uiedgeinsetsmake

Note: This article translates from a blog post from a foreign iOS developer Natasha the robot, linked here.
In iOS apps, there are often many buttons that have the same background image, but vary in size because they are in different locations (although the button already has no background image in IOS7). For example, a button with a function of "Save" is narrower than the function "Submit", but they can all have a purple background.
In this article, you don't need to prepare a different background picture for each button. You are lucky because the iOS Uiedgeinsetsmake method can easily take this picture:


Into this one:


The solution is simple: the four rounded corners of the smaller picture remain the same, the middle part can be copied vertically and horizontally, so that the middle part of the picture can be enlarged according to your requirements.
You can do this with uiedgeinsets: You can specify the sections in the picture that are not allowed to stretch when you stretch the picture, top, left, bottom, and right edges. The uiedgeinsets itself is a struct that contains four float-type floating-point numbers:

1. typedef struct {
2. CGFloat top, left, bottom, right;
3. } uiedgeinsets;

Instead of all
I built a new project: In Stordboard I added a custom button and then created a outlet for it in Viewcontroller. In my viewdidload: method, I called the Private method Configurebutton, which constructs a uiedgeinsets through Uiedgeinsetsmake (0,0,0,0):

2. -(void) Configurebutton
4. {
6. Uiedgeinsets edgeinsets = Uiedgeinsetsmake (0, 0, 0, 0);
8. UIImage *backgroundbuttonimage = [[UIImage imagenamed:@ "Purple_button.png"]
10. Resizableimagewithcapinsets:edgeinsets];
12. [self. Purplebutton setbackgroundimage:backgroundbuttonimage
14. Forstate:uicontrolstatenormal];
16. }

Because there is no stretch area specified (the area that is not allowed to stretch in four directions is set to 0), the entire picture is copied horizontally and vertically, resulting in the following:


Vertical limit
To add a vertical limit to a picture, we need to ignore the left and right two edges as follows:




The area between the two vertical lines can be duplicated in the horizontal direction. You can omit the distance between the left and right sides by 8 pixels, and set the Uiedgeinsets to Uiedgeinsetsmake (0,8,0,8):

2. -(void) Configurebutton
4. {
6. Uiedgeinsets edgeinsets = Uiedgeinsetsmake (0, 0, 0, 0);
8. UIImage *backgroundbuttonimage = [[UIImage imagenamed:@ "Purple_button.png"]
10. Resizableimagewithcapinsets:edgeinsets];
12. [self. Purplebutton setbackgroundimage:backgroundbuttonimage
14. Forstate:uicontrolstatenormal];
16. }

The result looks much better:




Level limit
Similarly, if you want to add a horizontal limit to a picture, you can omit the distance from each of the 8 pixels from the top and bottom edges, copying only the area between the two lines:


Set Uiedgeinsets to Uiedgeinsetsmake (8,0,8,0):

2. -(void) Configurebutton
4. {
6. Uiedgeinsets edgeinsets = Uiedgeinsetsmake (8, 0, 8, 0);
8. UIImage *backgroundbuttonimage = [[UIImage imagenamed:@ "Purple_button.png"]
10. Resizableimagewithcapinsets:edgeinsets];
12. [self. Purplebutton setbackgroundimage:backgroundbuttonimage
14. Forstate:uicontrolstatenormal];
16. }

The results are as follows:


Qualifying in two directions
If you want to limit the areas that can be copied both horizontally and vertically, we need to ignore the 8-pixel area of the top, bottom, left, and right four edges:


Set Uiedgeinsets to Uiedgeinsetsmake (8,8,8,8):

2. -(void) Configurebutton
4. {
6. Uiedgeinsets edgeinsets = Uiedgeinsetsmake (8, 8, 8, 8);
8. UIImage *backgroundbuttonimage = [[UIImage imagenamed:@ "Purple_button.png"]
10. Resizableimagewithcapinsets:edgeinsets];
12. [self. Purplebutton setbackgroundimage:backgroundbuttonimage
14. Forstate:uicontrolstatenormal];
16. }

That's great! We now have a button that is correctly displayed:




Now, if you need another purple button, you just need to ignore the four sides of the picture of the small square, and then copy the middle part of the picture as you want it to be. enjoy!

Ext.: http://blog.csdn.net/xiaoyulong007/article/details/25658815

IOS: How to make a scalable button with Uiedgeinsetsmake