IOS image stretching: resizableImageWithCapInsets

Today, I made a thermometer application and needed a graph to stretch the red image in the thermometer based on the input data. To achieve this, the iOS5 function is used: resizableImageCapInsets :( UIEdgeInsets) Insets.

Recently, I finally applied for an Apple developer account! So annoying! Benefits for everyone!

If you want to debug a real machine, mount the application, package the IPA to a friend, or apply for a developer account, contact me!

Debugging on a real machine has 99 restrictions!

The Insets parameter is in the format of (top, left, bottom, right). A line is drawn from the top, left, bottom, and right, in this way, a box is added to an image. Only the part in the box is stretched, and the part outside the box is not changed. For example (20, 5, 10, 5), it means that the part in the rectangle can be stretched, while the rest remains unchanged.

It is said that the function stretchableImageWithLeftCapWidth: topCapHeight can also be implemented, but it is not recommended to use this function in iOS5. The effect is as follows:

After the data is modified, it becomes as follows:

The following describes how to implement it.

A thermometer consists of three diagrams:

Background Image thermometerbackground.png:

Scale chart ThermometerCalibration:

The solution Calibration:

First, add the background image to the superview, and then add the scale chart and solution map to the background image. For simplicity, unnecessary code has been omitted)

 
 

  
  
// Add the background image to the superview
  
  
UIImageView * thermometerBackground = [[UIImageView alloc] initWithFrame: THERMOMETER_FRAME];
  
  
[ThermometerBackground setImage: [UIImage imageNamed: @ "ThermometerBackground.png"];
  
  
[Self. view addSubview: self. thermometerBackground];
  
  
// Add the solution diagram to the background image
  
  
UIImageView * thermometer = [[UIImageView alloc] init];
  
  
[Self. thermometerBackground addSubview: self. thermometer];
  
  
// Add the scale chart to the background image
  
  
UIImageView * thermometerCalibration = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @ "ThermometerCalibration.png"];
  
  
[Self. thermometerCalibration setFrame: CGRectMake (0, 10, thermometerBackground. frame. size. width, thermometerCalibration. image. size. height * thermometerBackground. frame. size. width/thermometerCalibration. frame. size. width)];

 
 

 
 

  
  
[self.thermometerBackground addSubview:thermometerCalibration];  
 
 

Then, generate an image of the corresponding height based on the degree

 
 

  
  
UIImage* image = [UIImage imageNamed:@"Thermometer.png"];  
  
  
UIEdgeInsets insets = UIEdgeInsetsMake(20, 0, 25, 0);  
  
  
image = [image resizableImageWithCapInsets:insets];  
  
  
int top = 10.00+(38.00-temperature)*20.00;  
  
  
[self.thermometer setFrame:CGRectMake(0, top, self.thermometerBackground.frame.size.width, self.thermometerBackground.frame.size.height-top)];  
 
 

 
 

  
  
[self.thermometer setImage:image];  
 
 

Here, the top variable represents the height of the solution calculated based on the degree.

In this way, when the temperature is changed, you can dynamically generate a thermometer image by calling this code in viewWillAppear.