免费开源的iOS开发学习平台

UIView详解:8-图片拉伸

UIView的某些子类,如UIImageView以及UIButton,经常会涉及到图片的拉伸操作。在图片拉伸过程中,有时仅仅希望拉伸内部的部分区域,四周边缘不需要拉伸。在iOS6之前,可以使用UIView的contentStretch属性来实现拉伸,但是从iOS6开始,针对图片的拉伸Xcode提供了更加方便的方法。

图片裁剪简介

在实际的开发过程中,设计师提供的切图,有时候不一定会提供全尺寸的图片,这个时候就需要工程师对图片进行拉伸,以满足不同设备的功能需求。常见的情况是针对按钮的背景图片,设计师只会提供一个很小的图片,具体开发过程中,需要工程师对图片拉伸。再举个例子,我们熟知的微信、QQ聊天的气泡,由于每次对话的文字数量不同,也需要对背景图片进行拉伸。如下图所示,大家可以下载下来这些图片用于实际测试。

经过拉伸后,可以展现出各种尺寸的效果。

使用Xcode的Slicing功能

Xcode中提供了Slicing功能专门用来裁剪图片。通过Slicing功能,可以设置固定不需要拉伸的区域,以及需要拉伸的区域。这个功能是针对图片的设置,不需要针对UIView去做任何的操作。

  • 选择Assets.xcassets,
  • 选中某个图片,并点击右下角的Show Slicing,出现下图;

  • 点击图中的Start Slicing,出现下图,图中有3个按钮,分别对应水平方向拉伸、水平+垂直方向都拉伸、垂直方向拉伸;

  • 一般情况下,建议选择水平+垂直方向都拉伸,之后出现如下界面,图中一共出现了6条分割线,一般调整上下左右4条分割线即可满足要求。

  • 调整需要保留的部分以及需要拉伸的部分,保留部分会着重显示,在调整分割线的同时,右侧的Slicing也会同时变化,如下图所示:

  • 调整完毕后,当使用这张图片时,就会按照配置要求完成拉伸。

使用UIImage的resizableImageWithCapInsets:方法

除了通过Xcode的Slicing功能之外,UIImage还提供了resizableImageWithCapInsets:方法,通过该方法,也能够对图片进行拉伸操作,这个方法可以简单理解为Slicing的代码实现版。

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets;

resizableImageWithCapInsets:方法中需要传入一个UIEdgeInsets类型的参数capInsets,通过该参数可以设置在上下左右四个方向需要保留的图像大小。

示例代码:

- (void)viewDidLoad {
    [super viewDidLoad];  
    UIImage *image = [UIImage imageNamed:@"Bg_hl"];
    [image resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)];//上下左右各保留15PX的内容
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; 
    imageView.frame = CGRectMake(30, 100, 250, 150);
    [self.view addSubview:imageView];
}

在实际的开发过程中,以上方法了解即可,优先推荐使用Slicing功能。

示例代码

https://github.com/99ios/7.2.8