在使用UIButton的時(shí)候，大家對(duì)setImageEdgeInsets、setTitleEdgeInsets、setContentEdgeInsets了解嗎？？

以前寫代碼如果單獨(dú)只有一個(gè)的話，用著也不用那么費(fèi)事，一般設(shè)置也都是文字居中，或者圖片居中。這些系統(tǒng)都為你自動(dòng)計(jì)算好了，而且擺放好了位置。

復(fù)雜一點(diǎn)的話，文字居左或者居右：contentHorizontalAlignment 這個(gè)屬性可以滿足大家的需求。

如果Image和title同時(shí)存在呢？或者現(xiàn)在需要：有個(gè)圖片和文字的Button或者View。最開始的時(shí)候我一般都是設(shè)個(gè)UIButton然后放上去一個(gè)ImageView和UILabel，是不是太遜了。o(╯□╰)o

以前對(duì)UIButton的三個(gè)EdgeInsets感覺老是摸不著邊，其實(shí)總結(jié)一句話：UIButton 中的內(nèi)容都是默認(rèn)居中，設(shè)置EdgeInsets之后還是居中。

詳解：

一：只設(shè)置Image

沒有設(shè)置setImageEdgeInsets

然后設(shè)置setImageEdgeInsets之后通過(guò)Debug View 查看ImageView的frame，得到數(shù)據(jù)：（Unbutton的Width都為335，圖片的Size為（32，32））

ImageView.x ? ? ? ? ? ?ImageEdgeInsets ? ? ? ? ? ? ? ? ? ? ? ?x得到的規(guī)則

151.5 ? ? ? ? ? ? ? ? ? ? ? (0, 0, 0, 0) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（335 - 32 ）/ 2

156.5 ? ? ? ? ? ? ? ? ? ? ? (0, 10, 0, 0) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（335 - 32 - 10 ）/ 2 + 10

101.5? ? ? ? ? ? ? ? ? ? ?? (0, 0, 0, 100) ? ? ? ? ? ? ? ? ? ? ? ? ? ? （335 - 32 - 100 ）/ 2 + 0

106.5? ? ? ? ? ? ? ? ? ? ?? (0, 10, 0, 100) ? ? ? ? ? ? ? ? ? ? ? ? ? （335 - 32 - 10 - 100 ）/ 2 + 10

是不是發(fā)現(xiàn)規(guī)律了，就是（button的寬度 - 離左右的距離 - 圖片的寬度）/ 2 + 離左邊的距離。所以還是居中嘍。

只有title的自己可以試試哈。

二：既設(shè)置Image，又設(shè)置title

沒有設(shè)置任何EdgeInsets

然后設(shè)置setImageEdgeInsets、setTitleEdgeInsets之后通過(guò)Debug View 查看ImageView的frame，得到數(shù)據(jù)：（Unbutton的Width都為335，圖片的Size為（32，32））

UIButton *tempButton = [UIButton buttonWithType:UIButtonTypeCustom];

tempButton.frame = CM(20, 100, Screen_Width - 40, 40);

tempButton.backgroundColor = OrangeColor;

[tempButton setTitle:@"秀美甲" forState:UIControlStateNormal];

[tempButton setImage:[UIImage imageNamed:@"first_selected"] forState:UIControlStateNormal];

tempButton.imageView.backgroundColor = RedColor;

[self.view addSubview:tempButton];

ImageView.x ? ?Label.frame ? ? ? ? ?ImageEdgeInsets ? ? ?TitleEdgeInsets ?

124.5? ? ? ? ? (156.5,9.5,54,21.5) ? ? ?(0,0,0,0) ? ? ? ? ? ? ? ? ? (0,0,0,0)

149.5? ? ? ? ? (156.5,9.5,54,21.5)? ? ? (0,50,0,0) ? ? ? ? ? ? ? ? (0,0,0,0)

149.5? ? ? ? ? (106.5,9.5,54,21.5)? ? ? (0,50,0,0) ? ? ? ? ? ? ? ? (0,0,0,100)

ImageView.x的計(jì)算規(guī)則有一點(diǎn)變化了：（button的寬度 - 離左右的距離 - 圖片的寬度 -Label的寬度）/ 2 + 離左邊的距離。

Label.x 的計(jì)算規(guī)則：（button的寬度 - 離左右的距離 - 圖片的寬度 -Label的寬度）/ 2 + 離左邊的距離 + 圖片的寬度。（默認(rèn)左邊總有你設(shè)置的圖片似得）

既有圖片又有title的話，計(jì)算居中時(shí)總是以他倆的寬度為一體的。所以也是居中

三：在第二種的基礎(chǔ)上，再設(shè)置setContentEdgeInsets

ImageView.x ? ? ? ? ? ? ? ?Label.frame ? ? ? ? ? ? ?setContentEdgeInsets

134.5? ? ? ? ? ? ? ? ? ? (166.5, 9.5, 54, 21.5) ? ? ? ? ?（0, 20, 0, 0）

這個(gè)就是在原有的基礎(chǔ)上相當(dāng)于把button的Width - 離左右邊的距離，之后再計(jì)算Image和Label的位置。

總之：還是居中。

注意：圖片的實(shí)際坐標(biāo) = 圖片的實(shí)際寬高/scale，scale由手機(jī)屏幕決定

http://www.lxweimin.com/p/16b9877374ab