IOS image stretching and ios stretching skills

IOS image stretching and ios stretching skills
IOS image stretching skills

Throughout the mobile market, a mobile app, if you want to establish a foothold in the mobile market for a long time, must at least include the following elements: practical functions, strong user experience, gorgeous and concise appearance. Behind the gorgeous appearance is the painstaking design of the artist. However, if developers do not know how to properly display these well-designed pictures, these designs will be ruined and will be at a loss.

For example, the following image was originally designed as a button Background:

Button.png, 24x60

Now we use it as the button background. The button size is 150x50:

1. // Obtain the view Size
2. CGSize viewSize = self. view. bounds. size;
4. // Initialization button
5. UIButton * button = [[UIButton alloc] init];
6. // Set the dimension
7. Button. bounds = CGRectMake (0, 0,150, 50 );
8. // Set the location
9. Button. center = CGPointMake (viewSize. width * 0.5f, viewSize. height * 0.5f );
11. // Load the image
12. UIImage * image = [UIImage imageNamed: @ "button"];
13. // Set the background image
14. [Button setBackgroundImage: image forState: UIControlStateNormal];
16. // Add button
17. [Self. view addSubview: button];

Run:

We can see that the effect is very poor. The reason is very simple, because the source image size is 24x60, the whole image is now fully stretched to 150x50, the more serious is the four corners of the image.

Some people may come up with a solution immediately. Isn't it okay if you ask the artist to make the picture bigger? How to stretch it. Yes, this is a solution, but it is not recommended. The reason is very simple: 1. Large images, resulting in a large installation package and large loading to the memory; 2. A better solution.

Looking at a piece of film, the image will become ugly, because the four corners are stretched, and the middle stretch is not obviously ugly. Therefore, if you want a small image to be stretched, it will not become ugly. When you stretch the image, you only need to stretch the rectangular area in the middle of the image, instead of stretching the edge.

For example, the upper and lower left edges of a rectangular area are not stretched:

IOS provides an easy-to-use API to help us implement the above functions. As of iOS 6.0, iOS provides three image stretching solutions. Next, we will introduce these solutions in detail.

I. Before iOS 5.0

There is an end cap in iOS that specifies which part of the image does not need to be stretched. For example, black indicates the area of the rectangle to be stretched. The top, bottom, left, and right edges that do not need to be stretched are called end caps.

Using this method of UIImage, you can set the End Cover width to return a stretched UIImage object.

 

1. -(UIImage *) stretchableImageWithLeftCapWidth :( NSInteger) leftCapWidth topCapHeight :( NSInteger) topCapHeight;

 

This method has only two parameters. leftCapWidth indicates the width of the Left end cover, and topCapHeight indicates the height of the top cover. The system automatically calculates the right end cover width and bottom end cover height. The algorithm is as follows:

 

[Java]View plaincopy

1. // Width indicates the image width.
2. RightCapWidth = width-leftCapWidth-1;
4. // Height indicates the Image height.
5. Bottingapheight = height-topCapHeight-1

 

After calculation, you will find that the middle stretch area is only 1x1

 

 

1. // StretchWidth is the width of the middle stretch area
2. StretchWidth = width-leftCapWidth-rightCapWidth = 1;
4. // StretchHeight is the height of the middle stretch area
5. StretchHeight = height-topCapHeight-botw.apheight = 1;

 

Therefore, using this method will only stretch the area 1x1 in the middle of the image, and will not affect the edge and corner.

The following shows how to use this method:

 

1. // Width of the Left End Cover
2. NSInteger leftCapWidth = image. size. width * 0.5f;
3. // Top cover height
4. NSInteger topCapHeight = image. size. height * 0.5f;
5. // Assign a value again
6. Image = [image stretchableImageWithLeftCapWidth: leftCapWidth topCapHeight: topCapHeight];

After this method is called, the original image will not change and a new stretched UIImage will be generated. Therefore, the value of the returned value must be assigned back to the image variable in line 1.

Running effect:

You can find that the image is displayed beautifully.

Note:

1. This method expired after iOS 5.0 came out.

2. This method can only stretch the area of 1x1.

 

Ii. iOS 5.0

In iOS 5.0, another new method of UIImage processing is available for image stretching.

 

 

1. -(UIImage *) resizableImageWithCapInsets :( UIEdgeInsets) capInsets

 

This method only receives one UIEdgeInsets parameter. You can set left, right, top, and bottom of UIEdgeInsets to specify the width, width, height, and height of the End Cover.

1. CGFloat top = 25; // height of top Cover
2. CGFloat bottom = 25; // End Cover height
3. CGFloat left = 10; // width of the left End Cover
4. CGFloat right = 10; // right End Cover width
5. UIEdgeInsets insets = UIEdgeInsetsMake (top, left, bottom, right );
6. // Assign a value after scaling
7. Image = [image resizableImageWithCapInsets: insets];

Running effect:

 

Iii. iOS 6.0

In iOS6.0, UIImage provides another method for processing image stretching.

 

1. -(UIImage *) resizableImageWithCapInsets :( UIEdgeInsets) capInsets resizingMode :( UIImageResizingMode) resizingMode

 

Compared with iOS5.0, only one UIImageResizingMode parameter is added to specify the stretch mode:

• UIImageResizingModeStretch: stretch mode. Fill the image by stretching the area of the rectangle specified by UIEdgeInsets.
• UIImageResizingModeTile: tiled mode. The image is filled by repeatedly displaying the rectangle area specified by UIEdgeInsets.

 

 

1. CGFloat top = 25; // height of top Cover
2. CGFloat bottom = 25; // End Cover height
3. CGFloat left = 10; // width of the left End Cover
4. CGFloat right = 10; // right End Cover width
5. UIEdgeInsets insets = UIEdgeInsetsMake (top, left, bottom, right );
6. // Specify the stretch mode and assign a value after scaling.
7. Image = [image resizableImageWithCapInsets: insets resizingMode: UIImageResizingModeStretch];

 

Running effect: