2012年10月11日 星期四

如女人心般難捉摸的圖片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


沒有留言:

張貼留言