我們在開發(fā)的時(shí)候經(jīng)常遇到一個(gè)需求就是需要創(chuàng)建一個(gè)按鈕同時(shí)可以放圖片和文字，實(shí)現(xiàn)這個(gè)需求可以有很多種方法：
- 比如創(chuàng)建一個(gè)
UIView然后添加UIImageView和UILable，最后給他添加一個(gè)單擊的手勢。 - 再比如自定義一個(gè)
UIButton，在上邊添加UIImageView和UILabel。 - 當(dāng)然，我們也可以用系統(tǒng)的
UIButton直接設(shè)置圖片和文字，但是使用系統(tǒng)的UIButton時(shí)如何擺放圖片和文字的位置就需要好好研究一下。
所以這篇文章就寫一下如何來擺放系統(tǒng)UIButton中的圖片和文字。
準(zhǔn)備
UIButton中有兩個(gè)方法用來設(shè)置圖片和按鈕的邊界約束：
@property(nonatomic) UIEdgeInsets titleEdgeInsets;
@property(nonatomic) UIEdgeInsets imageEdgeInsets;
通過設(shè)置這兩個(gè)參數(shù)我們就能設(shè)置圖片和按鈕的位置，從而實(shí)現(xiàn) 圖片在上文字在下、圖片在下文字在上、圖片在左文字在右和圖片在右文字在左的樣式。
默認(rèn)情況下圖片是在左邊，文字在右邊的。
接下來這段非常重要
圖片的上、下、左約束是相對于UIButton的，而右是相對于文字的：
文字的上、下、右約束是相對于UIButton的，而左是相對于圖片的：
開搞
首先我們先確定幾個(gè)參數(shù)：
-
按鈕大小：這個(gè)不用說了，如果想要通過這種方法排列圖片和文字就一定要先確定好按鈕的大小。
CGSize buttonSize = self.frame.size; -
文字大小：
UIButton有自己的titleLabel，所我們設(shè)置好文字之后直接獲取titleLabel的大小就可以了。CGSize titleSize = self.titleLabel.intrinsicContentSize; -
圖片大小：這個(gè)和文字一樣，我們設(shè)置好圖片之后直接獲取
imageView的大小就可以了。CGSize imageSize = self.imageView.frame.size; -
圖片和文字之間的空隙：我們肯定不是希望圖片和文字緊貼在一起吧，所以設(shè)置一個(gè)圖片和文字之間的空隙大小是有必要的。
CGFloat buttonSpace = 10.0;
圖片在上，文字在下
設(shè)置垂直方向的排列時(shí)我們還需要獲取一個(gè)參數(shù)，就是按鈕和文字、圖片垂直空間上上下兩邊的空隙。
這個(gè)空隙的大小就是按鈕的高度減去圖片和文字以及中間空隙的高度除2獲得的。
CGFloat verticalSpace = (buttonSize.height - titleSize.height - imageSize.height - buttonSpace)/2.0;
接下來就是設(shè)置圖片和文字的邊界了
圖片邊界：
上：上邊界不用說了，相對于按鈕，所以直接設(shè)置成垂直空隙大小就可以了。
左：左側(cè)因?yàn)橐彩窍鄬τ诎粹o，為了讓圖片居中，就直接設(shè)置成（按鈕寬度-圖片寬度）/2就可以了。
下：下邊界也是相對于按鈕，因?yàn)閳D片在上，所以設(shè)置成垂直（空隙大小+文字高度+空隙）就可以了。
右：右側(cè)是比較重要的約束，因?yàn)橛覀?cè)是相對與文字的，我們可以理解成如果沒有文字，右側(cè)的空間應(yīng)該和左側(cè)一樣（按鈕寬度-圖片寬度）/2，但是因?yàn)槎嗔宋淖郑@樣設(shè)置就會導(dǎo)致位置出現(xiàn)偏差，所以要減去文字的寬度。
這樣一來，圖片的邊界就設(shè)置好了。
文字邊界：
上：上邊界同樣是相對按鈕的，因?yàn)槲淖衷谙拢栽O(shè)置成（空隙大小+圖片高度+空隙）就可以了。
左：理解了前邊的圖片，文字也是一樣，所以左側(cè)的空間約束應(yīng)為（按鈕寬度-文字寬度）/2再減去圖片的寬度。
下：下沒什么好說的了，相對于按鈕，所以為垂直方向的空隙。
右：右側(cè)也是相對于按鈕，所以直接設(shè)置成（按鈕寬度-文字寬度）/2就可以了。
這樣設(shè)置了之后，文字和圖片的位置就設(shè)置好了。
//上下空余的間隙
CGFloat verticalSpace = (buttonSize.height - titleSize.height - imageSize.height - buttonSpace)/2.0;
[self setImageEdgeInsets:UIEdgeInsetsMake(verticalSpace,
(buttonSize.width-imageSize.width)/2.0,
verticalSpace + titleSize.height + buttonSpace,
(buttonSize.width-imageSize.width)/2.0-titleSize.width)];
[self setTitleEdgeInsets:UIEdgeInsetsMake(verticalSpace + imageSize.height + buttonSpace,
(buttonSize.width - titleSize.width)/2.0 - imageSize.width,
verticalSpace,
(buttonSize.width - titleSize.width)/2.0)];
圖片在左，文字在右
這個(gè)情況是系統(tǒng)默認(rèn)的情況，所以我們基本不需要做處理，只需要把圖片右側(cè)相對于文字的空隙和文字左側(cè)相對于圖片的空隙都設(shè)置為我們設(shè)置的空隙就可以了。
[self setImageEdgeInsets:UIEdgeInsetsMake(0,
0,
0,
buttonSpace)];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0,
buttonSpace,
0,
0)];
圖片在右，文字在左
這個(gè)情況和上邊的情況類似，只不過文字和圖片調(diào)換了位置，所以我們把他們互相約束的大小改成負(fù)的（圖片寬度+文字寬度+空隙）就可以了。
[self setImageEdgeInsets:UIEdgeInsetsMake(0,
0,
0,
-(imageSize.width + titleSize.width + buttonSpace))];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0,
-(imageSize.width + titleSize.width + buttonSpace),
0,
0)];
圖片在下，文字在上
這個(gè)情況和第一種情況（圖片在上，文字在下）類似，只不過是文字和圖片在垂直方向上調(diào)換了一下位置，左右的約束都沒有改變，所以也就不詳細(xì)說了，理解了第一種情況應(yīng)該就很好理解這中情況。
CGFloat verticalSpace = (buttonSize.height - titleSize.height - imageSize.height - buttonSpace)/2.0;
[self setImageEdgeInsets:UIEdgeInsetsMake(verticalSpace + titleSize.height + buttonSpace,
(buttonSize.width-imageSize.width)/2.0,
verticalSpace,
(buttonSize.width-imageSize.width)/2.0-titleSize.width)];
[self setTitleEdgeInsets:UIEdgeInsetsMake(verticalSpace,
(buttonSize.width - titleSize.width)/2.0 - imageSize.width,
verticalSpace + imageSize.height + buttonSpace,
(buttonSize.width - titleSize.width)/2.0)];
結(jié)束
其實(shí)這個(gè)邊界的東西很好理解，只要想通了一個(gè)，其他方向的就很好控制了。
以上的內(nèi)容都是我自己研究出來的結(jié)果，如果有哪些地方不對，還希望有大神能夠批評指正。
那今天就這樣了~
啊對了！Demo地址在這里。
