如女人心般難捉摸的圖片ContentMode

一張圖勝過千言萬語。多了美麗圖片加持的App，就是跟別人不一樣。在App裡想要展示這些美美的圖片，要嘛透過UIImageView，要嘛經由UIButton。然而圖片的比例往往跟我們想要顯示的大小有段落差，這時候就得依賴contentMode決定圖片的縮放方式了。接下來，彼得潘將介紹當UIButton遇上contentMode時，會產生哪些意想不到的惱人問題。(感謝彼得潘的朋友查爾斯提供可愛的狐狸圖片作為以下範例的主角。)

1. 在畫面上加入顯示狐狸圖片的UIButton

UIButton *imageButton = [[UIButton alloc] initWithFrame:CGRectMake(60, 80, 200, 200)];
 [imageButton setImage:[UIImage imageNamed:@"fox.png"] forState:UIControlStateNormal];
 [self.view addSubview:imageButton];

2. 在圖片上加上同樣200*200的半透明View，方便我們等會分析圖片的縮放。
 
UIView *whiteView = [[UIView alloc] initWithFrame:CGRectMake(60, 80, 200, 200)];
whiteView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.3];
[self.view addSubview:whiteView];

執行App:

如圖所示，當利用setImage:forState:設定圖片時，預設的contentMode為UIViewContentModeScaleToFill，所以令人心疼地，可愛的小狐狸變形了。

讓我們將contentMode設為UIViewContentModeScaleAspectFit，救救小狐狸，讓牠維持比例縮放吧。

imageButton.imageView.contentMode = UIViewContentModeScaleAspectFit;


執行App:

如圖所示，圖片乖乖地待在我們限定的200*200範圍內維持比例縮放，不敢越雷池一步。(可從半透明的View辨別200*200所在範圍)

能不能貪心地希望小狐狸更清楚點，給小狐狸特寫呢?當然可以，只要將contentMode設為UIViewContentModeScaleAspectFill，即可讓小狐狸維持比例縮放，但又能勇敢地部分超出範圍，實現完全佔滿200*200範圍的目標。

imageButton.imageView.contentMode = UIViewContentModeScaleAspectFill;



執行App:

imageButton的imageView.clipsToBounds預設為YES，所以超出的部分看不到。相反的，如果是UIImageView物件，其clipsToBounds預設為NO，所以當contentMode設為UIViewContentModeScaleAspectFill時，我們將完整看到超出的部分。  

sometimes when we touch

除了clipsToBounds的差異外，UIButton和UIImageView最大的差別在於它可以觸碰，它是有感情，觸碰會有感應的，不像冰冷冷的UIImageView。如下圖所示，當sometimes when we touch發生時，仿彿有氣氛的夜晚來臨，圖片明顯變暗讓我們明確感覺正在觸碰中。

但在iOS 5時，當我們調整了UIButton的imageView.contentMode後，觸碰時卻會產生不正常的現象。如下圖所示，觸碰時圖片又回復為原來的UIViewContentModeScaleToFill。因此，在iOS 5時，為了解決這個問題，有個折衷的做法，那就是將UIButton的adjustsImageWhenHighlighted設為NO，如此雖然Touch時不會變暗，但至少圖片不會變形。

圖片尺寸問題

如果圖片的size較我們設定的UIButton尺寸小，當利用setImage:forState:設定圖片時，此時無論我們將UIButton的imageView設為哪一種contentMode，圖片都將頑固地維持原狀，不會放大。若是UIImageView物件，則不會有此問題。

特別感謝:

查爾斯的blog視說新語:

http://whereyou.pixnet.net/blog

查爾斯的FB視說新語:
https://www.facebook.com/EyeNews