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遊戲開發-李堅武