1 [[UIImage imageNamed:@"button_textured_30"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];

其中Insets这个参数的格式是(top,left,bottom,right),从上、左、下、右分别在图片上画了一道线,这样就给一个图片加了一个框。

只有在框里面的部分才会被拉伸,而框外面的部分则不会改变。

4个参数是上边界,左边界,下边界,右边界距离,也可以为负值。

其中Insets这个参数的格式是(top,left,bottom,right),从上、左、下、右分别在图片上画了一道线,这样就给一个图片加了一个框。只有在框里面的部分才会被拉伸,而框外面的部分则不会改变。比如(20,5,10,5),意思是下图矩形里面的部分可以被拉伸,而其余部分不变。

据说stretchableImageWithLeftCapWidth:topCapHeight这个函数也能够实现,但是在iOS5里面建议不要使用这个函数。效果如下图:

当修改了数据之后,变成这样:

下面来看如何实现。

温度计共由三张图组成:

背景图ThermometerBackground.png:

刻度图ThermometerCalibration:

里面的溶液Calibration:

首先将背景图加入superview中,再将刻度图和溶液图加入背景图中:(为简化起见,一些不必要的代码已经省略)

  1. //将背景图加入superview
  2. UIImageView *thermometerBackground = [[UIImageView alloc] initWithFrame:THERMOMETER_FRAME];
  3. [thermometerBackground setImage:[UIImage imageNamed:@"ThermometerBackground.png"]];
  4. [self.view addSubview:self.thermometerBackground];
  5. //将溶液图加入背景图
  6. UIImageView *thermometer = [[UIImageView alloc]init];
  7. [self.thermometerBackground addSubview:self.thermometer];
  8. //将刻度图加入背景图
  9. UIImageView *thermometerCalibration = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ThermometerCalibration.png"]];
  10. [self.thermometerCalibration setFrame:CGRectMake(0, 10, thermometerBackground.frame.size.width, thermometerCalibration.image.size.height*thermometerBackground.frame.size.width/thermometerCalibration.frame.size.width)];
  1. [self.thermometerBackground addSubview:thermometerCalibration];

然后,根据度数生成对应高度的image;

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

在这里,top这个变量就代表了根据度数计算出的溶液的高度。

这样,当改变温度temperature的大小时,只要在viewWillAppear里调用这段代码,就能够动态生成温度计图片了。

iPhone图片拉伸:resizableImageWithCapInsets的更多相关文章

  1. iOS 图片拉伸 resizableImageWithCapInsets

    UIImage *image =  [[UIImage imageNamed:@"test.png"] resizableImageWithCapInsets:UIEdgeInse ...

  2. 使用图片拉伸resizableImageWithCapInsets

    在仿写QQ会话的时候背景蓝色图片是拉伸而来,但是有些地方是受保护的不能拉伸 所以定义了下面的工具类中的一个方法,专门拉伸图片 UIImageResizingModeStretch:拉伸模式,通过拉伸U ...

  3. ios UIImage图片拉伸 resizableImageWithCapInsets:

    常见的按钮添加和背景设置如下: UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(80, 130, 160, 44)];[bu ...

  4. iOS图片拉伸技巧

    纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要包含以下几个要素:实用的功能.极强的用户体验.华丽简洁的外观.华丽外观的背后,少不了美工的辛苦设计,但如果开发人员不懂得怎么合理展示这些设 ...

  5. 【原】iOS学习之图片拉伸处理(类似qq的气泡)

    原理是拉伸里面的内容,将边保护起来 方法1: ①[image resizableImageWithCapInsets:UIEdgeInsetsMake(, , , )]; ②[image resiza ...

  6. iOS开发——UI基础-按钮内边距,图片拉伸

    一.内边距 UIButton有三个属性,分别可以设置按钮以及内部子控件的内边距 1.contentEdgeInsets 如果是设置contentEdgeInsets, 会把UIImageView和UI ...

  7. (转)iOS图片拉伸技巧

    ( 原文博客地址:  http://blog.csdn.net/q199109106q/article/details/8615661) 纵观移动市场,一款移动app,要想长期在移动市场立足,最起码要 ...

  8. IOS中图片拉伸技巧与方法总结(转载)

    以下内容转载自:http://my.oschina.net/u/2340880/blog/403996 IOS中图片拉伸技巧与方法总结 一.了解几个图像拉伸的函数和方法 1.直接拉伸法 简单暴力,却是 ...

  9. iOS杂谈-图片拉伸的实现

    如上图是一个按钮的背景图,在Android上,很多图片资源都是类似这样子的,但是由于按钮的高度及宽度与图片的世纪尺寸不同,所以需要采用9patch来实现拉伸处理, 可参考:http://www.cnb ...

随机推荐

  1. RPC数据通信

    RPC全称为Remote Procedure Call,翻译过来为“远程过程调用”.目前,主流的平台中都支持各种远程调用技术,以满足分布式系统架构中不同的系统之间的远程通信和相互调用.远程调用的应用场 ...

  2. Maven 的41种骨架功能介绍

    1: internal -> appfuse-basic-jsf (创建一个基于Hibernate,Spring和JSF的Web应用程序的原型)  2: internal -> appfu ...

  3. Spring积累

    <tx:annotation-driven/>  (Spring的XML配置里两大Bean的声明之一) 那我们是否就可以在程序中所有被spring管理的类(@Controller.@Ser ...

  4. 并发-Synchronized底层优化(偏向锁、轻量级锁)

    Synchronized底层优化(偏向锁.轻量级锁) 参考: http://www.cnblogs.com/paddix/p/5405678.html 一.重量级锁 上篇文章中向大家介绍了Synchr ...

  5. js里面如何才能让成员方法去调用类中其他成员

    function fun(){ var _this = this; //如果函数是用var定义的私有函数,如下 var func1 = function(){ } //那么类中其他函数都可以直接通过f ...

  6. 一块网卡多个IP实现

    ////////////////////////////写在前面//////////////////////////////////////////// 需要注意,这里我们是一块网卡多个IP,而并非是 ...

  7. ReactiveX/RxJava文档中文版

    项目地址:https://github.com/mcxiaoke/RxDocs,欢迎Star和帮忙改进. 有任何意见或建议,到这里提出 Create New Issue 阅读地址 ReactiveX文 ...

  8. js 小复习2

    1.数组 findIndex()  indexOf() // findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引.否则返回-1. function isBigEnough(ele ...

  9. mysql建立索引

    mysql的几种索引http://jingyan.baidu.com/article/da1091fbd166ff027849d687.html

  10. 7z压缩gopath的src的批处理

    7zGoPath.bat @echo off pushd "%~dp0" :config for /f "delims=" %%t in ('powershel ...