關於iOS App的切圖

圖形化使用者介面中的圖形有兩種實現方式，一種是用代碼畫出來，比如Quartz 2D技術，狠一點有OpenGL ES，另一種則是使用圖片。 

代碼畫的方式比較耗費程式員腦力,CPU或GPU; 圖片則耗費磁碟空間,會增加app的體積.一般的app我們會偏重於使用圖片來構建使用者介面. 

設計師一般會使用PS來設計介面，所以在直接使用之前，有一個PSD到png的切圖(Image Slicing)過程.下面是切圖過程中可能要注意的幾點. 

一.可重複元素

在使用者介面的圖形元素中，重複隨處可見 ,所以我們利用好架構提供的介面, 以比較高的性價比建立使用者介面。

1.Color Pattern

Color Pattern在Web設計中也經常會遇到比如網頁的背景,甚至網路中可以找到專門收集各類可重複的紋理圖案的網站,比如 http://subtlepatterns.com. 下面這是一個小圖片模板

UIColor *circleColorPattern = [UIColor colorWithPatternImage:[UIImage imageNamed:@"circle_pattern.png"]];

這樣便可以得到一個顏色模板,用這個顏色畫或者填充某個地區的時候，模板圖片會在指定的地區中進行平鋪.比如把一個View的背景顏色設定成上面這個顏色，便會得到如下結果

2.resizableImage

除了整體平鋪之外，很多時候我們希望某個圖片的局部進行平鋪，而其餘部分則保持不變. 比如常見的按鈕，聊天的氣泡背景或者圖片的陰影邊框. 這裡舉個按鈕的例子,一般情況下為了方便做按鈕就直接切個按鈕背景,如但是自己看，你會發現按鈕中間大都數像素都是橫向重複的，所以可以使用iOS的圖片介面來使用體積更小的圖片實現相同的效果.
首先使用PS的切圖工具進行切圖,中的切圖邏輯是，左邊切14像素(13像素加1像素，1像素為中間重複部分),右邊切13像素.

Retina螢幕下一個單位對應著兩個像素，這裡的例子是非Retina下的情況，請注意

切圖後將左右合并，變成最終所需要的圖片

圖片寬度為27像素寬，中間第14個像素為中間重複的部分.

UIImage *buttonBackgroundImage = [[UIImage imageNamed:@"button_bkg.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0,13,0,13)];[button setBackgroundImage:buttonBackgroundImage forState:UIControlStateNormal];

resizableImageWithCapInsets:的參數是一個UIEdgeInsets的結構體類型,被capInsets覆蓋到的地區將會保持不變，而未覆蓋到的部分將會被用來平鋪.

在iOS 5.0之前並沒有這個方法，而是使用的另一個方法

 - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;

這個方法有局限性，它只能指定leftCapWidth和topCapHeight，然後只有一個像素能夠重複，也就是rightCapWidth為 imageWidth-leftCapWidth-1,而bottomCapHeight為 imageHeight - topCapHeight -1,所以重複的始終是中間的那一個像素.

二.圖片邊緣鋸齒和消除鋸齒問題

1.需要消除鋸齒

有時候需要在旋轉的動畫中使用到圖片，比如按鈕的旋轉，圖片的旋轉，為了避免在旋轉的過程中出現邊緣鋸齒，我們需要在切圖的時候，在邊緣上多留至少一像素的透明像素，因為iOS在處理圖片的時候對於外邊緣是不做消除鋸齒處理的，但是對於圖片內部的邊緣則會做消除鋸齒處理.

2.需要去除消除鋸齒效果

當某個imageView的frame的origin.x或者origin.y 不為整數的時候，會出現你不想要的消除鋸齒效果，這個時候本來清晰的圖片邊緣會變得模糊，而這不是你想要的，所以這個時候我們就要對frame的起點進行取整。

轉自：http://geeklu.com/2012/06/image-slicing-for-ios-app/