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