图片的拉伸处理

---

title : 图片的拉伸处理
category : UI

---

图片的拉伸

标签（空格分隔）： IOS零碎知识点

---

公共代码

// 添加图片
UIImageView *imageView = [[UIImageView alloc] init];
imageView.frame = CGRectMake(10, 10, 100, 100);
[self.view addSubview:imageView];
UIImage *image = [UIImage imageNamed:@"1371093644361"];

方法一

// 方法一：
// 拉伸模式：UIImageResizingModeStretch
// 瓦片模式：UIImageResizingModeTile

// 注意：这里要重新拿到拉伸后的image对象
image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(30, 30, 30, 30) resizingMode:UIImageResizingModeTile];
imageView.image = image;

方法二

// 方法二：
image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
imageView.image = image;
// 该方法原理
/*
 参数：left  top
 它是指定左边和顶部需要保护的区域，然后拉伸left+1  top+1 的那一个点
 right和bottom的保护区域系统会自动帮你计算
 right = width - left - 1
 bottom = height - top -1
 所以，被拉伸的区域只有left和top对应点的右下角的那一个点
 */

将图片拉伸封装到Image的category中

// 图片拉伸分类
+ (UIImage *)resizableImage:(NSString *)name
{
    UIImage *image = [self imageNamed:name];
    return [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
}

方法三：通过storyBoard设置

如图1-1，这种方式设置的图片不管到哪个地方用到都会用这种方式来拉伸

图1-1png

注意

对于以button为背景的聊天框，不仅要讲image拉伸，而且还需要设置button的contentEdgeInsets。同时还需要设置button的高度为titleLabel的高度再加上一个高度值

Top,Bottom,Height是Xcode默认设置的最优参数，可以根据需要实际调整。
Tiles:填充
Stretches:拉伸

方法四

选中图片后大家会看到右下角有个Show Slicing按钮，直接点击该按钮可以很直观的设置具体拉伸的部位。

2-1.png

点击Show Slicing后：

2-2.png

点击Start Slicing即可直观设置图片的拉伸了：

2-3.png

主题的拉伸大家可以点击上图的按钮直观查看。