一、又愛又恨
UIButton是iOS開發(fā)中十分常用的控件猪腕，使用它有很多優(yōu)勢(shì)：
1冗澈、它繼承自UIControl，支持多種事件陋葡，能夠很靈活的根據(jù)不同的事件作出不同的響應(yīng)亚亲；
2、它支持多種狀態(tài)，可以設(shè)置不同狀態(tài)的相關(guān)屬性捌归，尤其是對(duì)高亮的支持肛响，能夠讓用戶感覺到按鈕被按到了，極大提升了用戶的體驗(yàn)惜索；
3特笋、它可以同時(shí)支持文本和圖片。
但是巾兆，它對(duì)圖片和文本排列樣式的支持不太友好雹有。
它默認(rèn)的樣式是image在左，title在右臼寄， 中間沒有間距霸奕，如果使用自動(dòng)布局，它返回的固有大小剛好包裹內(nèi)容吉拳，沒有邊框质帅。
而在實(shí)際開發(fā)中，我們常常需要一個(gè)其他樣式的button留攒， 例如煤惩，image在上，title在下炼邀，中間需要10個(gè)像素的間距魄揉。
UIButton提供了 contentEdgeInsets、titleEdgeInsets拭宁、imageEdgeInsets幾個(gè)屬性洛退，用來(lái)調(diào)整title和image的位置，從而支持其他的樣式杰标。
很多小伙伴的痛處就在于兵怯，找不到contentEdgeInsets、titleEdgeInsets腔剂、imageEdgeInsets對(duì)image和title位置影響的規(guī)律媒区，不知道如何設(shè)置這幾個(gè)屬性來(lái)達(dá)到想要的效果，有時(shí)候可能費(fèi)了九牛二虎之力掸犬，終于調(diào)到了想要的樣式袜漩，卻發(fā)現(xiàn)點(diǎn)擊按鈕靠邊緣的的放無(wú)法響應(yīng)點(diǎn)擊事件。
二湾碎、欲罷不能
對(duì)于上面的需求宙攻，很多小伙伴可能會(huì)放棄UIButton， 自己通過(guò)一個(gè)UIImageView和一個(gè)UILabel加上一個(gè)UITapGestureRecognizer寫一個(gè)Button胜茧，這樣在功能上滿足了需求粘优，但是按下沒有高亮效果仇味，用戶體驗(yàn)差，要實(shí)現(xiàn)對(duì)多種狀態(tài)的支持雹顺，也是一件相當(dāng)麻煩的事情丹墨。對(duì)于我這種特別懶的人，果斷拋棄這樣的想法嬉愧。
三贩挣、愛上UIButton，不再嫌棄
UIButton默認(rèn)的樣式是這樣的:
綠色的是Button的邊框没酣，橘紅色的是image的邊框王财， 藍(lán)色的是title的邊框。
contentEdgeInsets裕便、titleEdgeInsets绒净、imageEdgeInsets這三個(gè)屬性都是相對(duì)于默認(rèn)位置（即上圖中的位置）而言的，向內(nèi)為正偿衰，向外為負(fù)挂疆。
1、imageEdgeInsets：根據(jù)上面的理論下翎， imageEdgeInsets的top分量是相對(duì)于image頂部的偏移量缤言，向下為正，向上為負(fù)數(shù)视事；left分量是相對(duì)于image左邊的偏移量胆萧，向右為正，向左為負(fù)俐东；bottom是相對(duì)于image底部的偏移量跌穗，向上為正，向下為負(fù)犬性；right是相對(duì)于image右邊的偏移量瞻离，向左為正腾仅，向右為負(fù)乒裆；
2、titleEdgeInsets：與imageEdgeInsets一樣
3推励、contentEdgeInset：與imageEdgeInsets一樣鹤耍， UIButton的intrinsicContentSize會(huì)根據(jù)contentEdgeInset返回。
舉個(gè)栗子：
現(xiàn)在要實(shí)現(xiàn)上面的：image在上验辞， title在下, 中間10個(gè)點(diǎn)的距離
// 圖片在豎直方向的偏移量（總高度 - 圖片的高度）/ 2
CGFloat imageOffsetY = (titleSize.height + space) / 2;
// 圖片在水平方向的偏移量（總寬度 - 圖片的寬度）/ 2
CGFloat imageOffsetX = titleSize.width / 2;
self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);
CGFloat titleOffsetY = (imageSize.height + space) / 2;
CGFloat titleOffsetX = imageSize.width / 2;
self.titleEdgeInsets = UIEdgeInsetsMake(titleOffsetY, -titleOffsetX, -titleOffsetY, titleOffsetX);
可以看到稿黄， 在樣式上面滿足了要求，但是跌造，button的frame不對(duì)杆怕，image和title超出了button的范圍族购， 這也是上面提到的，點(diǎn)擊邊緣無(wú)法響應(yīng)的原因陵珍。
下面我們調(diào)整contentEdgeInsets：
// contentInsets是設(shè)置的內(nèi)容邊框寝杖，現(xiàn)在都設(shè)為了0
CGFloat contentOffsetY = (titleSize.height + imageSize.height + space - MAX(titleSize.height, imageSize.height)) / 2;
CGFloat contentOffsetX = (titleSize.width + imageSize.width - MAX(titleSize.width, imageSize.width)) / 2;
self.contentEdgeInsets = UIEdgeInsetsMake(contentOffsetY + self.contentInsets.top, -contentOffsetX + self.contentInsets.left, contentOffsetY + self.contentInsets.bottom, -contentOffsetX + self.contentInsets.right);
可以看到，已經(jīng)達(dá)到了要求互纯， 下面再加上邊距：
好啦瑟幕，就寫到這里了，希望小伙伴們都能愛上UIButton留潦。歡迎一起交流只盹、討論！
