#####1.手寫代碼：
```
UIImageView*svRect;
UIImage*backgroundImage = [UIImageimageNamed:@"bg.png"];
backgroundImage= [backgroundImageresizableImageWithCapInsets:UIEdgeInsetsMake(15,15,15,15)];//這句就是最關(guān)鍵的了
svRect = [[UIImageViewalloc]initWithImage:backgroundImage];
[svRectsetFrame:CGRectMake(50,50,200,200)];
[self.viewaddSubview: svRect];
```
問(wèn)題
#####2. 使用Asset Catalog組件對(duì)圖片進(jìn)行9切片處理
Asset Catalog組件可以用來(lái)統(tǒng)一的管理項(xiàng)目中的圖片等資源跛溉，還提供對(duì)圖片資源的設(shè)備適配物蝙，高清蛉迹，拉伸等支持靠欢，也提供9切片技術(shù)的支持杭隙。本案例將學(xué)習(xí)如何使用Asset Catalo組件對(duì)圖片進(jìn)行9切片處理哟绊，如圖-3所示：
圖-3
2.2 方案
首先在Storyboard中拖放一個(gè)Button控件和一個(gè)ImageView控件。然后可以在右邊欄的檢查器中直接設(shè)置Button和ImageView 的圖片痰憎，但是需要先導(dǎo)入圖片票髓。
在Xcode的導(dǎo)航欄中選中Images.xcassets，在空白處點(diǎn)擊右鍵铣耘，在彈出的窗口中選擇New Image Set洽沟，可以重新命名為button。將button的不同尺寸的圖片到右邊的界面中相應(yīng)的位置蜗细，一般圖片都有兩個(gè)尺寸一個(gè)是原始大小裆操，一個(gè)是擴(kuò)大兩倍的大小，為Retina屏準(zhǔn)備的炉媒。
然后點(diǎn)擊右下角的Show Slicing踪区，通過(guò)移動(dòng)圖片的分割線設(shè)定九切片上下左右保留的像素，在右邊欄的檢查器三中設(shè)置切片模式吊骤，按鈕采用的是拉升模式所以選擇Stretches缎岗，檢查器中同樣也可以手動(dòng)設(shè)置上下左右保留的像素點(diǎn)。
以同樣的方式將ImageView的圖片也導(dǎo)入到Images.xcassets中白粉，命名為seperator传泊，切片模式則選擇為平鋪Tiles。
最后可以直接在Storyboard中設(shè)置Button和ImageView的圖片了鸭巴，不需要再寫額外的代碼了眷细。
2.3 步驟
實(shí)現(xiàn)此案例需要按照如下步驟進(jìn)行。
步驟一：導(dǎo)入圖片到Images.xcassets中
首先在Storyboard中拖放一個(gè)Button控件和一個(gè)ImageView控件奕扣。然后可以在右邊欄的檢查器中直接設(shè)置Button和ImageView 的圖片，但是需要先導(dǎo)入圖片掌敬。
在Xcode的導(dǎo)航欄中選中Images.xcassets惯豆，在空白處點(diǎn)擊右鍵池磁，在彈出的窗口中選擇New Image Set，如圖-4所示：
圖-4
將新創(chuàng)建的ImageSet重新命名為button楷兽，然后將button的不同尺寸的圖片到右邊的界面中相應(yīng)的位置地熄，一般圖片都有兩個(gè)尺寸一個(gè)是原始大小，一個(gè)是擴(kuò)大兩倍的大小芯杀，為Retina屏準(zhǔn)備的端考，如圖-5所示：
圖-5
步驟二：在ImageSet中設(shè)置圖片
點(diǎn)擊右下角的Show Slicing，通過(guò)移動(dòng)圖片的分割線設(shè)定九切片上下左右保留的像素揭厚，兩張圖片都要設(shè)置却特，如圖-6所示：
圖-6
然后在右邊欄的檢查器三中設(shè)置切片模式，按鈕采用的是拉升模式所以選擇Stretches筛圆，檢查器中同樣也可以手動(dòng)設(shè)置上下左右保留的像素點(diǎn)裂明，如圖-7所示：
圖-7
最后以同樣的方式將ImageView的圖片也導(dǎo)入到Images.xcassets中，命名為seperator太援，切片模式則選擇為平鋪Tiles闽晦，如圖-8、圖-9所示：
圖-8
圖-9
步驟三：在Storyboard中設(shè)置控件的圖片
在Storyboard中分別將Button控件和ImageView控件的image設(shè)置為button和seperator提岔，如圖-10仙蛉、圖-11所示：
圖-10
圖-11
在Stroyboard的場(chǎng)景中可以看到圖片已經(jīng)按九切片的方式設(shè)置完成，如圖-12所示：
圖-12
????????????????????????????????????????????????????????#####更多好文添加微信：Lee5-308
????????????????????????????????????????????????????????#####微博：Cocos2d-js游戲開(kāi)發(fā)-李堅(jiān)武
