天天看點

iOS使用xcode可視化圖像編輯功能進行圖檔拉伸

iOS中可視化拉伸圖檔技巧

一、補充

在我的另一篇部落格

http://my.oschina.net/u/2340880/blog/403996

中探讨了IOS拉伸圖像(UIImage)的幾種方法和一些小經驗,這篇是一個補充,再将xcode中的另一種可視化拉伸圖像的方法的使用介紹給大家。

二、如何使用

IOS開發文檔中的描述:

https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/SlicinganImage.html

1、xcode5的新特性

xcode5之後,IOS為我們提供了一個管理圖檔的新方法Asset Catalogs,簡單說來,它相當于一個目錄,專門用來管理我們項目中的圖檔素材,包括Icon和啟動頁,這樣使項目管理更加友善也更加簡潔。

建立一個AssetCatalogs:在xcode中建立一個檔案,選擇AssetCatalogs,如下:

iOS使用xcode可視化圖像編輯功能進行圖檔拉伸

然後我們點開這個包,将圖檔直接拖入工具區即可:

iOS使用xcode可視化圖像編輯功能進行圖檔拉伸

2、使用AssetCatalogs中的可視化工具進行圖檔拉伸

完成了上面的步驟之後,我們可以對管理的圖檔進行處理,點選右下角的show Slicing按鈕,我們就會進入可視化編輯區,如下:

iOS使用xcode可視化圖像編輯功能進行圖檔拉伸

如上圖,有三條豎直線,其中邊界的兩條分别限制了圖檔兩側不被拉伸的區域範圍,中間虛線和左側虛線圍成的部分,将是被複制拉伸的區域。水準方向的線同理。

很重要的一點:官方文檔告訴我們,這個方法隻能在iOS 7 或者 OS X v10.10之後使用。效果如下:

iOS使用xcode可視化圖像編輯功能進行圖檔拉伸

3、在xib檔案中UIImage的拉伸

在xib檔案中的UIImageView,在上面加上圖檔後,可以設定stretching這個屬性:

iOS使用xcode可視化圖像編輯功能進行圖檔拉伸

這個屬性的四個值:X,Y,Width,Height的取值範圍是0-1;X,Y,用來确定一個點,比如我們設定為X=0.1,Y=0.1,則這個點就是圖檔的左上角開始,水準1/10處和豎直1/10處,設定圖檔的拉伸點為從這個點開始。後兩個參數分别設定圖檔拉伸區域的寬度和高度,比如我們這樣設定:Width=0.8,Height=0.8,則圖檔拉伸時上下左右各1/10的寬度不會被拉伸,中間部分被拉伸,還是剛才的圖檔,效果如下:

iOS使用xcode可視化圖像編輯功能進行圖檔拉伸

繼續閱讀