iOS - 背景圖片大小的調(diào)整

我們?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í)跑筝,要保證圖片不變形。
下面我們用 UIImageViewUIImage來(lái)舉例:
假設(shè)設(shè)計(jì)師給的圖片是這樣的(帶圓角):

xxx.png

需求是要顯示更長(zhǎng)瞒滴,但如果我們直接把UIImageViewframe.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];
方法一效果圖(黃色為可點(diǎn)擊區(qū)域)
方法二效果圖(黃色為可點(diǎn)擊區(qū)域)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末粱快,一起剝皮案震驚了整個(gè)濱河市秩彤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌事哭,老刑警劉巖漫雷,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異鳍咱,居然都是意外死亡降盹,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門谤辜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蓄坏,“玉大人价捧,你說我怎么就攤上這事∥写粒” “怎么了结蟋?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)渔彰。 經(jīng)常有香客問我嵌屎,道長(zhǎng),這世上最難降的妖魔是什么恍涂? 我笑而不...
    開封第一講書人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任宝惰,我火速辦了婚禮,結(jié)果婚禮上再沧,老公的妹妹穿的比我還像新娘尼夺。我一直安慰自己,他們只是感情好产园,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開白布汞斧。 她就那樣靜靜地躺著,像睡著了一般什燕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上竞端,一...
    開封第一講書人閱讀 52,584評(píng)論 1 312
  • 那天屎即,我揣著相機(jī)與錄音,去河邊找鬼事富。 笑死技俐,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的统台。 我是一名探鬼主播雕擂,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼贱勃!你這毒婦竟也來(lái)了井赌?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤贵扰,失蹤者是張志新(化名)和其女友劉穎仇穗,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體戚绕,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡纹坐,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了舞丛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耘子。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡果漾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出谷誓,到底是詐尸還是另有隱情绒障,我是刑警寧澤,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布片林,位于F島的核電站端盆,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏费封。R本人自食惡果不足惜焕妙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望弓摘。 院中可真熱鬧焚鹊,春花似錦、人聲如沸韧献。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)锤窑。三九已至璧针,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間渊啰,已是汗流浹背探橱。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绘证,地道東北人隧膏。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像嚷那,于是被迫代替她去往敵國(guó)和親胞枕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容