我們在開發(fā)的時候經(jīng)常遇到一個需求就是需要創(chuàng)建一個按鈕同時可以放圖片和文字稻薇，實(shí)現(xiàn)這個需求可以有很多種方法：
- 比如創(chuàng)建一個
UIView然后添加UIImageView和UILable，最后給他添加一個單擊的手勢胶征。 - 再比如自定義一個
UIButton塞椎，在上邊添加UIImageView和UILabel。 - 當(dāng)然睛低，我們也可以用系統(tǒng)的
UIButton直接設(shè)置圖片和文字案狠，但是使用系統(tǒng)的UIButton時如何擺放圖片和文字的位置就需要好好研究一下。
所以這篇文章就寫一下如何來擺放系統(tǒng)UIButton中的圖片和文字钱雷。
準(zhǔn)備
UIButton中有兩個方法用來設(shè)置圖片和按鈕的邊界約束：
@property(nonatomic) UIEdgeInsets titleEdgeInsets;
@property(nonatomic) UIEdgeInsets imageEdgeInsets;
通過設(shè)置這兩個參數(shù)我們就能設(shè)置圖片和按鈕的位置骂铁，從而實(shí)現(xiàn) 圖片在上文字在下、圖片在下文字在上罩抗、圖片在左文字在右和圖片在右文字在左的樣式拉庵。
默認(rèn)情況下圖片是在左邊，文字在右邊的套蒂。
接下來這段非常重要
圖片的上钞支、下茫蛹、左約束是相對于UIButton的，而右是相對于文字的：
文字的上烁挟、下婴洼、右約束是相對于UIButton的，而左是相對于圖片的：
開搞
首先我們先確定幾個參數(shù)：
-
按鈕大行欧颉：這個不用說了窃蹋，如果想要通過這種方法排列圖片和文字就一定要先確定好按鈕的大小。
CGSize buttonSize = self.frame.size; -
文字大芯驳尽：
UIButton有自己的titleLabel警没，所我們設(shè)置好文字之后直接獲取titleLabel的大小就可以了。CGSize titleSize = self.titleLabel.intrinsicContentSize; -
圖片大姓裢濉：這個和文字一樣杀迹，我們設(shè)置好圖片之后直接獲取
imageView的大小就可以了。CGSize imageSize = self.imageView.frame.size; -
圖片和文字之間的空隙：我們肯定不是希望圖片和文字緊貼在一起吧押搪，所以設(shè)置一個圖片和文字之間的空隙大小是有必要的树酪。
CGFloat buttonSpace = 10.0;
圖片在上，文字在下
設(shè)置垂直方向的排列時我們還需要獲取一個參數(shù)大州，就是按鈕和文字续语、圖片垂直空間上上下兩邊的空隙。
這個空隙的大小就是按鈕的高度減去圖片和文字以及中間空隙的高度除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)];
圖片在左膨处，文字在右
這個情況是系統(tǒng)默認(rèn)的情況，所以我們基本不需要做處理砂竖，只需要把圖片右側(cè)相對于文字的空隙和文字左側(cè)相對于圖片的空隙都設(shè)置為我們設(shè)置的空隙就可以了真椿。
[self setImageEdgeInsets:UIEdgeInsetsMake(0,
0,
0,
buttonSpace)];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0,
buttonSpace,
0,
0)];
圖片在右，文字在左
這個情況和上邊的情況類似乎澄，只不過文字和圖片調(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)];
圖片在下置济，文字在上
這個情況和第一種情況（圖片在上解恰，文字在下）類似，只不過是文字和圖片在垂直方向上調(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í)這個邊界的東西很好理解，只要想通了一個樊销，其他方向的就很好控制了整慎。
以上的內(nèi)容都是我自己研究出來的結(jié)果，如果有哪些地方不對围苫，還希望有大神能夠批評指正裤园。
那今天就這樣了~
啊對了！Demo地址在這里剂府。
