六大天王海報牆 - 神乎奇技的圖片重覆排列

圖片可不是只有單純的放大縮小那麼簡單，利用神乎奇技的圖片重覆排列技巧，我們可以設計更有創意，更天馬行空的App畫面。接下來，就讓彼得潘小時候的六大偶像，林隆璇，張智霖，劉德華，梁朝偉，戴佩妮，蔡淳佳，為大家好好表演海報牆的效果吧 !



測試圖片: idol.png  ( 180 pixel * 120 pixel)，每個天王各佔 60 * 60 的空間。

UIImage *image = [UIImage imageNamed:@"idol.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 548)];
imageView.image = image;
[self.view addSubview:imageView];

執行App:

尚未施展圖片重覆排列技巧前，圖片呆呆地整個放大到320* 548，每個天王的身材比例都跑掉了 !

圖片重覆排列技巧:

利用UIImage的resizableImageWithCapInsets: method，我們可以控制圖片的縮放，限制圖片的某個區塊維持固定大小，其它未被限定的區塊則以重覆堆疊的方式填滿欲顯示的範圍，例如UIImageView所佔的空間。

resizableImageWithCapInsets:的定義如下:

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

利用UIEdgeInsets型別的capInsets，我們可以控制圖片中維持固定大小的區塊。接下來讓我們經由實際例子，了解UIEdgeInsets的威力吧。

UIImage *image = [[UIImage imageNamed:@"idol.png"]     

                  resizableImageWithCapInsets:UIEdgeInsetsMake(0, 60, 0, 0)];

利用UIEdgeInsetsMake(0, 60, 0, 0)建立capInsets。其定義如下:

UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)

剛剛的例子裡，表示我們希望圖片裡距離左邊界60 points的區塊維持固定大小。讓我們先偷看結果，再來說明。

執行App:

從下圖我們看到林隆璇和梁朝偉固定在第一個column休息，但其它4個偶像卻要辛苦地重覆排列將畫面填滿。這是因為林隆璇和梁朝偉所佔據的空間正是距離左邊界60 points的區塊，所以他們享有特權，可以維持原狀，不用分擔填滿畫面的重擔。

讓我們試試同時設定左邊和右邊各60 points，看看有何變化。

UIImage *image = [[UIImage imageNamed:@"idol.png"] 

                resizableImageWithCapInsets:UIEdgeInsetsMake(0, 60, 0, 60)];

執行App:

這一次佔據距離左邊界60 points的林隆璇和梁朝偉，以及佔據距離右邊界60 points的劉德華和蔡淳佳都可以維持原狀休息，只有居中的張智霖和戴佩妮要獨自負責填滿畫面的重責大任，真是辛苦他們了。

一直顧左右也不是辦法，讓我們換個方向，試試設定距離上邊界60 points吧。

UIImage *image = [[UIImage imageNamed:@"idol.png"] 

               resizableImageWithCapInsets:UIEdgeInsetsMake(60, 0, 0, 0)];

執行App:

輪到距離上邊界60 points的林隆璇，張智霖和劉德華可以休息了，剩下其它三個人繼續辛勞地填滿畫面。

為了公平起見，再換個方向，設定距離下邊界60 points吧。

UIImage *image = [[UIImage imageNamed:@"idol.png"] 

                resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 60, 0)];

執行App:

風水輪流轉，梁朝偉，戴佩妮，蔡淳佳終於可以休息了，換剛剛在一旁閒很久的三個人來重覆排列填滿畫面了。