1. 程式人生 > >iOS利用九切片進行切圖UI不會變形

iOS利用九切片進行切圖UI不會變形

<p>1.手寫程式碼:
</p><p>
</p>
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