带边框的UIImage缩放

一个带边框的UIImage如果使用常规的缩放,边框部分将被按照缩放比例拉伸或压缩,有些时候这并不是我们所期望的..比如这个边框是根据图片大小变化的外框。比如下面的类似按钮的不明物体图片:主体为渐变蓝色,边框为外圈白色,灰色底板为背景。

常见的按钮添加和背景设置如下:

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(80, 130, 160, 44)];
[button setTitle:@”Test Button” forState:UIControlStateNormal];
// Image with without cap insets
UIImage *buttonImage = [UIImage imageNamed:@”blueButton”];
[button addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];
[button setBackgroundImage:buttonImage forState:UIControlStateNormal];
[[self view] addSubview:button];

所得到的按钮会相当悲剧…

边框,特别是左右边框由于按钮frame过大被惨烈拉伸… iOS5中提供了一个新的UIImage方法,resizableImageWithCapInsets:,可以将图片转换为以某一偏移值为偏移的可伸缩图像(偏移值内的图像将不被拉伸或压缩)。

用法引述如下:

resizableImageWithCapInsets:
  Creates and returns a new image object with the specified cap insets.
  - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets
    Parameters
      capInsets
      The values to use for the cap insets.
    Return Value
      A new image object with the specified cap insets.
    Discussion
      You use this method to add cap insets to an image or to change the existing cap insets of an image. In both cases, you get back a new image and the original image remains untouched.
      
      During scaling or resizing of the image, areas covered by a cap are not scaled or resized. Instead, the pixel area not covered by the cap in each direction is tiled, left-to-right and top-to-bottom, to resize the image. This technique is often used to create variable-width buttons, which retain the same rounded corners but whose center region grows or shrinks as needed. For best performance, use a tiled area that is a 1x1 pixel area in size.

输入参数为一个capInsets结构体:

//Defines inset distances for views.
typedef struct {
CGFloat top, left, bottom, right;
} UIEdgeInsets; 

分别表示上左下右四个方向的偏移量。于是把上面按钮的UIImage改为如下形式:

// Image with cap insets
UIImage *buttonImage = [[UIImage imageNamed:@”blueButton”]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];

可以得到如下按钮:

问题得到解决。

但是值得注意的是该方法需要至少iOS5的运行环境,因此对于需要开发支持iOS5之前的App来说是不可行的。替代方案是stretchableImageWithLeftCapWidth:topCapHeight:,但是在iOS5中,这已经是被Deprecated的方法了,而且该方法只能以1px作为重复铺满拉伸区域,无法做到类似渐变等图片效果,是存在一定局限的。

Buy me a coffeeBuy me a coffee
最近的文章

凑热闹,谈密码,Challenge-Response密码验证

CSDN的密码事件闹得沸沸扬扬,600万用户数据的泄露应该是中国互联网历史上最严重的帐号信息泄露事件。让人不可思议的是,2009年4月之前的用户密码居然是以明文存储。使用明文存储密码本身就是一件相当扯淡的事情,而当这种事情发生在以程序员为主要客户的大型网站上,真是让人哭笑不得。之后又陆续爆出人人、多玩以及各种知名网站的账户信息泄露的消息,虽然还未确知真伪,但也很是让人揪心。而“不能明文保存密码”这一个初级中的初级的错误之所以会在中国这篇神奇的土地上一次又一次的出现,我认为是与中国的网络审查...…

南箕北斗集继续阅读
更早的文章

直到我膝盖中了一箭...

这句话就这么火了。其实通宵等了一夜天际,但是之后却一直没有大块时间,所以至今主线还没有玩完,今年之内估计也是没有机会完结了。在2011年各种组织评选年度游戏之前,我想我得为老滚5写点什么。今年是大作频出的年份,传送门2,巫师2,刺客信条:启示录,英雄无敌6,新的COD…当然,还有让人等了五年的上古卷轴5。一个人的一生并没有多少个五年可以等,而这个世界上也没有多少游戏值得人们等待五年。恰恰上古卷轴就是这样的一款游戏,优点的评说似乎都很相似,无非就是超高的自由度,开放的引擎,官方支持的MOD,...…

胡言乱语集继续阅读