UIButton 的 titleEdgeInsets 和 imageEdgeInsets 設(shè)置

UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中title和image的布局先舷。 如果對(duì)其理解不夠深入就轧,用純數(shù)字進(jìn)行布局管理粉怕,經(jīng)過不斷的調(diào)試十厢,還是能試出來的,但是如果改變了圖片大小或文字長度右核,又要再來一遍销凑。 作為程序猿丛晌,我們不應(yīng)該放棄任何一個(gè)偷懶的機(jī)會(huì)。

只設(shè)置image或title其中一項(xiàng)時(shí)斗幼,默認(rèn)是正常居中顯示的澎蛛,但我們同時(shí)設(shè)置image和title時(shí),則會(huì)出現(xiàn)如 <圖片1> 的問題孟岛,這是為什么呢瓶竭?那就是當(dāng)我們同時(shí)添加image和title時(shí)督勺,image默認(rèn)會(huì)向左偏移button的titleLabel的寬度,而title會(huì)向右偏移image的寬度斤贰,既然明白了原理智哀,我們就可以設(shè)置偏移量來達(dá)到我們想要的任何效果。

默認(rèn)情況下荧恍,圖片在左瓷叫,文字在右,垂直居中顯示送巡,如下圖:

button.titleEdgeInsets = UIEdgeInsetsZero;
button.imageEdgeInsets = UIEdgeInsetsZero;
1

設(shè)置如下布局后摹菠,圖片和文字都居中顯示。

button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size為0骗爆,用上面這樣設(shè)置有問題次氨,修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.intrinsicContentSize.width);
2

如果想圖片在上,文字在下摘投,水平居中顯示煮寡,則按下面設(shè)置即可:

button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, -button.imageView.frame.size.height, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.frame.size.height, 0, 0, -button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size為0,用上面這樣設(shè)置有問題犀呼,修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width);
3

如果覺得圖片和文字離的太近了幸撕,稍微分開一點(diǎn):

CGFloat offset = 40.0f;button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, -button.imageView.frame.size.height-offset/2, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.frame.size.height-offset/2, 0, 0, -button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size為0,用上面這樣設(shè)置有問題外臂,修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height-offset/2, 0, 0, -button.titleLabel.intrinsicContentSize.width);
4

文字左對(duì)齊坐儿,圖片右對(duì)齊

button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width - button.frame.size.width + button.titleLabel.intrinsicContentSize.width, 0, 0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.frame.size.width - button.frame.size.width + button.imageView.frame.size.width);
5

Note:今天發(fā)現(xiàn)個(gè)bug,以上方法在iOS8及以下版本宋光,如果button沒有設(shè)置frame貌矿,而是添加的約束(xib 或 Masonry),會(huì)導(dǎo)致獲取不到 frame.size.width 而造成布局異常罪佳。所以站叼,若用以上方法設(shè)置button,目前建議使用 frame 布局菇民,約束待后續(xù)優(yōu)化。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末投储,一起剝皮案震驚了整個(gè)濱河市第练,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌玛荞,老刑警劉巖娇掏,帶你破解...
    沈念sama閱讀 212,657評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異勋眯,居然都是意外死亡婴梧,警方通過查閱死者的電腦和手機(jī)下梢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,662評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來塞蹭,“玉大人孽江,你說我怎么就攤上這事》纾” “怎么了岗屏?”我有些...
    開封第一講書人閱讀 158,143評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長漱办。 經(jīng)常有香客問我这刷,道長,這世上最難降的妖魔是什么娩井? 我笑而不...
    開封第一講書人閱讀 56,732評(píng)論 1 284
  • 正文 為了忘掉前任暇屋,我火速辦了婚禮,結(jié)果婚禮上洞辣,老公的妹妹穿的比我還像新娘咐刨。我一直安慰自己,他們只是感情好屋彪,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,837評(píng)論 6 386
  • 文/花漫 我一把揭開白布所宰。 她就那樣靜靜地躺著,像睡著了一般畜挥。 火紅的嫁衣襯著肌膚如雪仔粥。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,036評(píng)論 1 291
  • 那天蟹但,我揣著相機(jī)與錄音躯泰,去河邊找鬼。 笑死华糖,一個(gè)胖子當(dāng)著我的面吹牛麦向,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播客叉,決...
    沈念sama閱讀 39,126評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼诵竭,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了兼搏?” 一聲冷哼從身側(cè)響起卵慰,我...
    開封第一講書人閱讀 37,868評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎佛呻,沒想到半個(gè)月后裳朋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,315評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡吓著,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,641評(píng)論 2 327
  • 正文 我和宋清朗相戀三年鲤嫡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了送挑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,773評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡暖眼,死狀恐怖惕耕,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情罢荡,我是刑警寧澤赡突,帶...
    沈念sama閱讀 34,470評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站区赵,受9級(jí)特大地震影響惭缰,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜笼才,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,126評(píng)論 3 317
  • 文/蒙蒙 一漱受、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧骡送,春花似錦昂羡、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,859評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至派敷,卻和暖如春蛹批,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背篮愉。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評(píng)論 1 267
  • 我被黑心中介騙來泰國打工腐芍, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人试躏。 一個(gè)月前我還...
    沈念sama閱讀 46,584評(píng)論 2 362
  • 正文 我出身青樓猪勇,卻偏偏與公主長得像,于是被迫代替她去往敵國和親颠蕴。 傳聞我的和親對(duì)象是個(gè)殘疾皇子泣刹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,676評(píng)論 2 351

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