iOS利用九切片进行切图，使UI不会变形

1.手写代码：

UIImageView*svRect;

UIImage*backgroundImage = [UIImageimageNamed:@"bg.png"];

backgroundImage= [backgroundImageresizableImageWithCapInsets:UIEdgeInsetsMake(15,15,15,15)];//这句就是最关键的了

svRect = [[UIImageViewalloc]initWithImage:backgroundImage];

[svRectsetFrame:CGRectMake(50,50,200,200)];

[self.viewaddSubview: svRect];

问题

2. 使用Asset Catalog组件对图片进行9切片处理

Asset Catalog组件可以用来统一的管理项目中的图片等资源，还提供对图片资源的设备适配，高清，拉伸等支持，也提供9切片技术的支持。本案例将学习如何使用Asset Catalo组件对图片进行9切片处理，如图-3所示：

图-3

2.2 方案

首先在Storyboard中拖放一个Button控件和一个ImageView控件。然后可以在右边栏的检查器中直接设置Button和ImageView 的图片，但是需要先导入图片。

在Xcode的导航栏中选中Images.xcassets，在空白处点击右键，在弹出的窗口中选择New Image Set，可以重新命名为button。将button的不同尺寸的图片到右边的界面中相应的位置，一般图片都有两个尺寸一个是原始大小，一个是扩大两倍的大小，为Retina屏准备的。

然后点击右下角的Show Slicing，通过移动图片的分割线设定九切片上下左右保留的像素，在右边栏的检查器三中设置切片模式，按钮采用的是拉升模式所以选择Stretches，检查器中同样也可以手动设置上下左右保留的像素点。

以同样的方式将ImageView的图片也导入到Images.xcassets中，命名为seperator，切片模式则选择为平铺Tiles。

最后可以直接在Storyboard中设置Button和ImageView的图片了，不需要再写额外的代码了。

2.3 步骤

实现此案例需要按照如下步骤进行。

步骤一：导入图片到Images.xcassets中

首先在Storyboard中拖放一个Button控件和一个ImageView控件。然后可以在右边栏的检查器中直接设置Button和ImageView 的图片，但是需要先导入图片。

在Xcode的导航栏中选中Images.xcassets，在空白处点击右键，在弹出的窗口中选择New Image Set，如图-4所示：

图-4

将新创建的ImageSet重新命名为button，然后将button的不同尺寸的图片到右边的界面中相应的位置，一般图片都有两个尺寸一个是原始大小，一个是扩大两倍的大小，为Retina屏准备的，如图-5所示：

图-5

步骤二：在ImageSet中设置图片

点击右下角的Show Slicing，通过移动图片的分割线设定九切片上下左右保留的像素，两张图片都要设置，如图-6所示：

图-6

然后在右边栏的检查器三中设置切片模式，按钮采用的是拉升模式所以选择Stretches，检查器中同样也可以手动设置上下左右保留的像素点，如图-7所示：

图-7

最后以同样的方式将ImageView的图片也导入到Images.xcassets中，命名为seperator，切片模式则选择为平铺Tiles，如图-8、图-9所示：

图-8

图-9

步骤三：在Storyboard中设置控件的图片

在Storyboard中分别将Button控件和ImageView控件的image设置为button和seperator，如图-10、图-11所示：

图-10

图-11

在Stroyboard的场景中可以看到图片已经按九切片的方式设置完成，如图-12所示：

图-12

更多好文添加微信：Lee5-308

微博：Cocos2d-js游戏开发-李坚武