我們?cè)陂_發(fā)的過程中經(jīng)常會(huì)遇到這些問題:有些圖片我們需要在項(xiàng)目中進(jìn)行伸縮調(diào)整;按鈕的可點(diǎn)擊區(qū)域太小,可是背景圖標(biāo)又不能放大竿屹;下面分別對(duì)這些問題提出一些解決方法枫虏。
一妇穴、UIImage的拉伸技巧
當(dāng)背景圖片要根據(jù)需求調(diào)整尺寸時(shí)爬虱,例如:聊天APP中對(duì)話信息視圖的背景圖片,需要根據(jù)信息長(zhǎng)短來(lái)調(diào)整相應(yīng)尺寸腾它,但對(duì)圖片進(jìn)行相應(yīng)拉伸時(shí)跑筝,要保證圖片不變形。
下面我們用 UIImageView
的UIImage
來(lái)舉例:
假設(shè)設(shè)計(jì)師給的圖片是這樣的(帶圓角):
需求是要顯示更長(zhǎng)瞒滴,但如果我們直接把UIImageView
的frame.size.height
拉長(zhǎng):
UIImage *image = [UIImage imageNamed:@"xxx"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height + 50)];
imageView.image = image;
[self.view addSubview:imageView];
圖片就會(huì)被拉伸成這樣(好丑的樣子~):
那是因?yàn)閳D片的圓角也被拉伸了曲梗,所以圖片變形很嚴(yán)重,別急妓忍,UIImage
給我們提供了一個(gè)方法來(lái)拉伸圖片虏两,拉伸后的結(jié)果為:
代碼如下:
UIImage *image = [UIImage imageNamed:@"xxx"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height + 50)];
// UIImageResizingModeStretch:拉伸模式,通過拉伸UIEdgeInsets指定的矩形區(qū)域來(lái)填充圖片
// UIImageResizingModeTile:平鋪模式世剖,通過重復(fù)顯示UIEdgeInsets指定的矩形區(qū)域來(lái)填充圖片
// UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>)
UIEdgeInsets insets = UIEdgeInsetsMake((image.size.height / 2) - 0.5, (image.size.width / 2) - 0.5, (image.size.height / 2) - 0.5, (image.size.width / 2) - 0.5);
image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeTile];
imageView.image = image;
[self.view addSubview:imageView];
其中UIEdgeInsets
的取值很關(guān)鍵定罢,其實(shí)就是找出如下圖中的正方形位置,在拉伸的過程中旁瘫,就是將正方形位置的圖片進(jìn)行拉伸/復(fù)制祖凫,我的建議是正方形的大小取的越小越好,那就越能保證圖片不變形酬凳。
二惠况、 BackgroundImage的設(shè)置
當(dāng)UIButton
在設(shè)置背景圖片的時(shí)候,我們會(huì)遇到這樣的問題宁仔,有時(shí)候設(shè)計(jì)的UI尺寸比較小稠屠,那樣會(huì)導(dǎo)致可點(diǎn)擊區(qū)域太小,用戶體驗(yàn)不好翎苫,但設(shè)計(jì)的UI又不能更改权埠,影響美觀,所以這里就涉及到設(shè)置UIButton
背景圖片的兩個(gè)方法:
// 方法一:該方法不管UIButton設(shè)置的尺寸為多大拉队,只居中顯示圖片的原始尺寸
// 該方法可以在不改變?cè)荚O(shè)計(jì)UI的尺寸前提下弊知,擴(kuò)大可點(diǎn)擊區(qū)域
[btn setImage:[UIImage imageNamed:@"xxx"] forState:UIControlStateNormal];
// 方法二:該方法會(huì)把圖片伸縮至UIButton設(shè)置的尺寸大小
// 如果想讓圖片不變形,就只能就UIButton的尺寸設(shè)置成image的大小
[btn setBackgroundImage:[UIImage imageNamed:@"xxx"] forState:UIControlStateNormal];