這篇文章整理了一下UIButton的各種EdgeInsets都咋用奏纪，有啥效果。留著自己以后對此迷糊時再看一看洋侨，也希望能對你有所幫助喔??矾瑰。
達(dá)成共識
如果沒有給UIButton的寬和高一個固定值，那么UIButon
的大小將自動調(diào)整為正好放下 title和image。這個蘋果官方文檔有提到碉碉，而且在Storyboard中一試便知柴钻。此外，默認(rèn)情況下圖片在左垢粮，文字在右贴届。
沒有給固定寬和高，給UIButton設(shè)置了一個image和title蜡吧，運(yùn)行的結(jié)果如下：
UIControlContent Vertical/Horizontal Alignment
在開始說EdgeInsets之前毫蚓，先說說UIControlContentVerticalAlignment和UIControlContentHorizontalAlignment產(chǎn)生的效果，因為這兩個屬性的設(shè)置也會對UIButton的效果有一定影響斩跌，而且跟后面EdgeInsets的計算也有關(guān)系绍些。
UIControlContentVerticalAlignment控制的是UIButton的image和title在豎直方向的對齊方式，其值有top耀鸦、bottom柬批、 center、fill袖订。當(dāng)指定為fill時氮帐，圖片會在豎直方向被拉伸填滿UIButton的高度。
為了效果明顯洛姑，我給上面的那個按鈕設(shè)置了一個較大的寬高上沐，當(dāng)取各種值時，效果如下：
的對齊方式楞艾。其值有left参咙、right、center硫眯、fill蕴侧。當(dāng)指定為fill時，圖片并沒有在水平方向?qū)?code>UIButton充滿两入，而是在右側(cè)留出了一定距離净宵，這個距離應(yīng)該是title的寬度，但是title實際上也沒有乖乖的跑到那段空隙去裹纳，而是和image重疊了╮(╯▽╰)╭
當(dāng)取各種值時择葡，效果如下：
UIControlContentHorizontalAlignment控制的則是水平方向
UIEdgeInsets
UIButton共有3個與UIEdgeInsets相關(guān)的屬性：
imageEdgeInsets調(diào)整image的上下左右邊緣離開原來位置的距離，該調(diào)整并不會改變UIButton原來的大小剃氧，image為了適應(yīng)調(diào)整敏储，可能會變形或者跑出UIButton的外面。
titleEdgeInsets調(diào)整title的上下左右邊緣離開原來位置的距離朋鞍，該調(diào)整并不會改變UIButton原來的大小已添，title為了適應(yīng)調(diào)整迫横，文字可能顯示不全或者跑出UIButton的外面。
contentEdgeInsets調(diào)整UIButton本身的上下左右邊緣離開原來位置的距離酝碳，該調(diào)整會改變UIButton的大小。
這個3個屬性的默認(rèn)值都是.zero恨狈。
UIEdgeInsets由top疏哗、left、 bottom禾怠、right構(gòu)成返奉，對于imageEdgeInsets和titleEdgeInsets來說：
top為正值時，控件會相對原來所在的位置下移相應(yīng)值吗氏，控件的頂部邊緣會在原來位置的下方相應(yīng)值芽偏。top為負(fù)值時，控件會相對原來的位置上移相應(yīng)值弦讽，控件的頂部邊緣會在原來位置的上方相應(yīng)值污尉。
left為正值時，控件會相對原來所在的位置右移相應(yīng)值往产，控件的左側(cè)邊緣會在原來位置的右方相應(yīng)值被碗。left為負(fù)值時，控件會相對原來的位置左移相應(yīng)值仿村，控件的左側(cè)邊緣會在原來位置的左方相應(yīng)值锐朴。
bottom為正值時，控件會相對原來所在的位置上移相應(yīng)值蔼囊，控件的底部邊緣會在原來位置的上方相應(yīng)值焚志。bottom為負(fù)值時，控件會相對原來的位置下移相應(yīng)值畏鼓，控件的底部邊緣會在原來位置的下方相應(yīng)值酱酬。
right為正值時，控件會相對原來所在的位置左移相應(yīng)值滴肿，控件的右側(cè)邊緣會在原來位置的左方相應(yīng)值岳悟。right為負(fù)值時，控件會相對原來位置右移相應(yīng)值泼差，控件的右側(cè)邊緣會在原來位置的右方相應(yīng)值贵少。
對于contentEdgeInsets來說，當(dāng)top堆缘、left滔灶、bottom、right為正值時吼肥，會使UIButton向四周擴(kuò)展變大录平。為負(fù)值時麻车，會使UIButton向內(nèi)收縮變小。哈哈斗这，這樣好記一些??
現(xiàn)在把UIButton的固定大小去掉动猬，讓它自己自適應(yīng)。先來一個水平方向調(diào)整的：
yellowButton.contentHorizontalAlignment = .left
yellowButton.contentVerticalAlignment = .center
yellowButton.imageEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0)
yellowButton.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0)
第一張圖只設(shè)置了
imageEdgeInsets表箭，沒有設(shè)置titleEdgeInsets赁咙，第三張兩者都設(shè)置了∶庾辏可以看到彼水，imageEdgeInsets和titleEdgeInsets并不會互相影響，第一張圖中image跟title重合了极舔，并沒有把title往右擠了相應(yīng)距離凤覆。第二張和第四張看到，image和title本身被壓縮了拆魏。
還有一點(diǎn)值得注意的是盯桦，如果原來UIButton的大小能容納下調(diào)整后的image和title，它們將不會被壓縮稽揭。像第一張那樣俺附，image左移后還是放得下的，所以沒有被壓縮溪掀，title卻放不下了事镣，所以被壓縮了。為什么說是原來的大小呢揪胃，因為調(diào)整contentEdgeInsets也會使UIButton變大璃哟，但是image和title卻不會因此而不被壓縮。再來一個豎直方向調(diào)整的：
yellowButton.contentHorizontalAlignment = .center
yellowButton.contentVerticalAlignment = .top
yellowButton.imageEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0)
yellowButton.titleEdgeInsets = UIEdgeInsetsMake(20, 0, 0, 0)
第一張圖仍然是只調(diào)整了
imageEdgeInsets的效果喊递。
從上面的結(jié)果可以看到調(diào)整imageEdgeInsets和titleEdgeInsets并不會改變UIButton的大小随闪，而導(dǎo)致有時圖片被壓縮，或者文字顯示不下骚勘。這時就要接著用UIButton的另一個屬性contentEdgeInsets來調(diào)整了铐伴。
yellowButton.contentHorizontalAlignment = .left
yellowButton.contentVerticalAlignment = .center yellow
Button.imageEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0)
yellowButton.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0)yellowButton.contentEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 20)
好吧，結(jié)果并不如我們想象的一樣俏讹，
UIButton是變大了当宴，但是image和
title并沒有自己調(diào)整，還是一個壓縮的狀態(tài)泽疆。驗證了上面值得注意的那一點(diǎn)~ 這時候要再調(diào)整一下它們的right值了户矢，將其設(shè)置為-20，如愿得到了下面的結(jié)果殉疼。
需要注意 當(dāng)設(shè)置contentHorizontalAlignment為.left時梯浪，再設(shè)置imageEdgeInsets和titleEdgeInsets的.right為負(fù)值時捌年，如果image和title原來是壓縮狀態(tài)，會對其調(diào)整挂洛。如果原來是正常狀態(tài)礼预，則不會產(chǎn)任何影響。也就是說虏劲，imageEdgeInsets和titleEdgeInsets的設(shè)置并不會讓image和title被拉伸逆瑞！其他方向亦如此~所以，為了保證image和title始終不被壓縮伙单，.left設(shè)置了多少正值，.right就設(shè)置多少負(fù)值哈肖。上下方向也一樣吻育。
實戰(zhàn)
上面做了這么多鋪墊，現(xiàn)在通過設(shè)置UIButton的3個EdgeInsets屬性來實現(xiàn)一些我們想要的效果吧??
在做水平方向的調(diào)整時淤井，最好將contentHorizontalAlignment設(shè)置為.left布疼，這樣改動就從左開始。在做豎直方向的調(diào)整時币狠，最好將contentVerticalAlignment設(shè)置為.top游两，這樣改動就從上面開始。對于自己在設(shè)置時漩绵，比較容易在腦子想象每個值設(shè)置完的樣子??
例1：設(shè)置一個四周間隔20贱案，image和title之間間隔20的button。
計算過程如下：
//向的調(diào)整止吐，設(shè)為靠左對齊
yellowButton.contentHorizontalAlignment = .left
yellowButton.contentVerticalAlignment = .center //image左移20
yellowButton.imageEdgeInsets = UIEdgeInsetsMake(0, 20, 0, -20)//title左移20宝踪，并且與image之間間隔20
yellowButton.titleEdgeInsets = UIEdgeInsetsMake(0, 40, 0, -40)//image左移20，已經(jīng)使button左側(cè)的間隔是20了
yellowButton.contentEdgeInsets = UIEdgeInsetsMake(20, 0, 20, 60)
最后碍扔，完美??
例2：設(shè)置一個image在上居中瘩燥，title在下居中，兩者之間間距20不同，四周間距20的button厉膀。
這個看起來復(fù)雜一些，但也只是計算復(fù)雜一些~ 計算過程如下二拐，求出標(biāo)記問號的距離就行了：
//設(shè)置水平和豎直的對齊方式
yellowButton.contentHorizontalAlignment = .left
yellowButton.contentVerticalAlignment = .top
let imageRect = yellowButton.imageView!.framelet
let titleRect = yellowButton.titleLabel!.framelet
let buttonRect = yellowButton.frame //圖中?1的值
let image_l = (buttonRect.size.width-imageRect.size.width)/2//確定image的位置
yellowButton.imageEdgeInsets = UIEdgeInsetsMake(20, image_l, -20, -image_l)//圖中?2的值
let title_l = imageRect.size.width-(buttonRect.size.width-titleRect.size.width)/2//圖中?3的值
let title_t = imageRect.size.height+40//title的位置可以確定了
yellowButton.titleEdgeInsets = UIEdgeInsetsMake(title_t, -title_l, -title_t, title_l)//圖中?4的值
let button_b = titleRect.size.height+60//計算圖中?5的值
let max_w = max(titleRect.size.width, imageRect.size.width)
let button_l = -(buttonRect.size.width-(max_w+20*2))/2//button要調(diào)整的大小確定了
yellowButton.contentEdgeInsets = UIEdgeInsetsMake(0, button_l, button_b, button_l)
運(yùn)行后的結(jié)果：
了解imageEdgeInsets服鹅、titleEdgeInsets、contentEdgeInsets后卓鹿，就可以隨心所欲的來設(shè)置自己的button了菱魔。
至此，總結(jié)完畢??
–End–
文章來源于意林的bolg的技術(shù)博客,意林授權(quán)
傳送門：http://shinancao.github.io/2016/12/15/iOS-UIButton-EdgeInsets/
