在開(kāi)發(fā)中我們經(jīng)常會(huì)用到一個(gè)圖片加文字的控件，我們首先想到的用UIButton，但是在UIButton中文字和圖片的布局默認(rèn)是圖片在右文字在左邊(見(jiàn)下圖)，而我們往往需要的并不是這樣的布局，所以大部分時(shí)候會(huì)自定義滿(mǎn)足我們需求的控件，或者繼承UIButton，在layoutSubviews重新布局titleLabel和imageView。但是對(duì)于這簡(jiǎn)單控件自定義控件顯得大材小用。而UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。
默認(rèn)樣式
- 圖片在右，文字在左
!注：titleEdgeInsets和imageEdgeInsets是相對(duì)于原始位置的，所以默認(rèn)為UIEdgeInsetsZero
// 相比較原來(lái)的位置，文字相對(duì)左邊的距離減少了圖片的寬度，右邊距離增加了圖片的的寬度
btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.imageView.frame.size.width, 0, btn.imageView.frame.size.width);
// 相比較原來(lái)的位置，圖片距離左邊的距離增加了文字的寬度，右邊距離減少了文字的寬度
btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.titleLabel.frame.size.width, 0, -btn.titleLabel.frame.size.width);
字左圖右
問(wèn)題：但是，如果你交換上面兩行代碼的位置，你會(huì)發(fā)現(xiàn)運(yùn)行結(jié)果是這樣的
交換代碼后的結(jié)果
這是因?yàn)?，ios8之后titleLabel的size默認(rèn)為CGSizeZero,如果先設(shè)置titleEdgeInsets,titleLabel的size會(huì)被系統(tǒng)計(jì)算出來(lái)，再取就不是CGSizeZero。但如果先設(shè)置imageEdgeInsets，取出titleLabel的size為CGSizeZero，就會(huì)出現(xiàn)上圖中的問(wèn)題。
解決辦法：
1、像上面代碼先設(shè)置titleEdgeInsets
2、調(diào)用titleLabel的intrinsicContentSize，代碼如下：
btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.titleLabel.intrinsicContentSize.width, 0, -btn.titleLabel.intrinsicContentSize.width);
- 文字和圖片都居中
btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.titleLabel.intrinsicContentSize.width*0.5, 0, -btn.titleLabel.intrinsicContentSize.width*0.5);
btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.imageView.intrinsicContentSize.width*0.5, 0, btn.imageView.intrinsicContentSize.width*0.5);
// 或者（只設(shè)置一邊距離，默認(rèn)會(huì)減少一半）
// btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.titleLabel.intrinsicContentSize.width, 0, 0);
// btn.titleEdgeInsets = UIEdgeInsetsMake(0, -btn.imageView.intrinsicContentSize.width, 0, 0);
居中
- 上圖片下文字
btn.imageEdgeInsets = UIEdgeInsetsMake(-btn.titleLabel.intrinsicContentSize.height*0.5, btn.titleLabel.intrinsicContentSize.width*0.5, btn.titleLabel.intrinsicContentSize.height*0.5, -btn.titleLabel.intrinsicContentSize.width*0.5);
btn.titleEdgeInsets = UIEdgeInsetsMake(btn.imageView.intrinsicContentSize.height*0.5, -btn.imageView.intrinsicContentSize.width*0.5, -btn.imageView.intrinsicContentSize.height*0.5, btn.imageView.intrinsicContentSize.width*0.5);
//或者（只設(shè)置一邊距離，默認(rèn)會(huì)減少一半）
// btn.imageEdgeInsets = UIEdgeInsetsMake(-btn.titleLabel.intrinsicContentSize.height, btn.titleLabel.intrinsicContentSize.width, 0, 0);
// btn.titleEdgeInsets = UIEdgeInsetsMake(btn.imageView.intrinsicContentSize.height, -btn.imageView.intrinsicContentSize.width, 0, 0);
上圖片下文字
- 下圖片上文字
btn.imageEdgeInsets = UIEdgeInsetsMake(btn.titleLabel.intrinsicContentSize.height*0.5, btn.titleLabel.intrinsicContentSize.width*0.5, -btn.titleLabel.intrinsicContentSize.height*0.5, -btn.titleLabel.intrinsicContentSize.width*0.5);
btn.titleEdgeInsets = UIEdgeInsetsMake(-btn.imageView.intrinsicContentSize.height*0.5, -btn.imageView.intrinsicContentSize.width*0.5, btn.imageView.intrinsicContentSize.height*0.5, btn.imageView.intrinsicContentSize.width*0.5);
//或者(只設(shè)置一邊距離，默認(rèn)會(huì)減少一半）
btn.imageEdgeInsets = UIEdgeInsetsMake(btn.titleLabel.intrinsicContentSize.height, btn.titleLabel.intrinsicContentSize.width, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(-btn.imageView.intrinsicContentSize.height, -btn.imageView.intrinsicContentSize.width, 0, 0);
下圖片上文字
最后，我把這幾種類(lèi)型寫(xiě)成了一個(gè)Category，只要簡(jiǎn)單的調(diào)用就可以了。代碼在這里。
