今天做了一個溫度計的應用，需要一個圖，能夠根據輸入的數據將溫度計里面的紅色圖片拉伸。為了達到這個效果，使用了iOS5的函數：resizableImageCapInsets:(UIEdgeInsets)Insets。

最近終于申請到蘋果開發者賬號！搞的好煩啊！給大家帶福利了！

想真機調試，上架應用，將IPA打包給朋友用，或者申請開發者賬號的請聯系我！

真機調試有99個限制！

其中Insets這個參數的格式是(top,left,bottom,right)，從上、左、下、右分別在圖片上畫了一道線，這樣就給一個圖片加了一個框。只有在框里面的部分才會被拉伸，而框外面的部分則不會改變。比如(20,5,10,5)，意思是下圖矩形里面的部分可以被拉伸，而其余部分不變。

據說stretchableImageWithLeftCapWidth:topCapHeight這個函數也能夠實現，但是在iOS5里面建議不要使用這個函數。效果如下圖：

當修改了數據之后，變成這樣：

下面來看如何實現。

溫度計共由三張圖組成：

背景圖ThermometerBackground.png：

刻度圖ThermometerCalibration：

里面的溶液Calibration：

首先將背景圖加入superview中，再將刻度圖和溶液圖加入背景圖中：（為簡化起見，一些不必要的代碼已經省略）

//將背景圖加入superview  
UIImageView *thermometerBackground = [[UIImageView alloc] initWithFrame:THERMOMETER_FRAME];  
[thermometerBackground setImage:[UIImage imageNamed:@"ThermometerBackground.png"]];  
[self.view addSubview:self.thermometerBackground];  
//將溶液圖加入背景圖  
UIImageView *thermometer = [[UIImageView alloc]init];  
[self.thermometerBackground addSubview:self.thermometer];  
//將刻度圖加入背景圖  
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];  

然后，根據度數生成對應高度的image

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];  

在這里，top這個變量就代表了根據度數計算出的溶液的高度。

這樣，當改變溫度temperature的大小時，只要在viewWillAppear里調用這段代碼，就能夠動態生成溫度計圖片了。