這篇文章整理了一下UIButton的各種EdgeInsets都咋用，有啥效果。留著自己以后對此迷糊時(shí)再看一看，也希望能對你有所幫助喔??。
達(dá)成共識(shí)
如果沒有給UIButton的寬和高一個(gè)固定值，那么UIButon
的大小將自動(dòng)調(diào)整為正好放下 title和image。這個(gè)蘋果官方文檔有提到，而且在Storyboard中一試便知。此外，默認(rèn)情況下圖片在左，文字在右。
沒有給固定寬和高，給UIButton設(shè)置了一個(gè)image和title，運(yùn)行的結(jié)果如下：
UIControlContent Vertical/Horizontal Alignment
在開始說EdgeInsets之前，先說說UIControlContentVerticalAlignment和UIControlContentHorizontalAlignment產(chǎn)生的效果，因?yàn)檫@兩個(gè)屬性的設(shè)置也會(huì)對UIButton的效果有一定影響，而且跟后面EdgeInsets的計(jì)算也有關(guān)系。
UIControlContentVerticalAlignment控制的是UIButton的image和title在豎直方向的對齊方式，其值有top、bottom、 center、fill。當(dāng)指定為fill時(shí)，圖片會(huì)在豎直方向被拉伸填滿UIButton的高度。
為了效果明顯，我給上面的那個(gè)按鈕設(shè)置了一個(gè)較大的寬高，當(dāng)取各種值時(shí)，效果如下：
的對齊方式。其值有left、right、center、fill。當(dāng)指定為fill時(shí)，圖片并沒有在水平方向?qū)?code>UIButton充滿，而是在右側(cè)留出了一定距離，這個(gè)距離應(yīng)該是title的寬度，但是title實(shí)際上也沒有乖乖的跑到那段空隙去，而是和image重疊了╮(╯▽╰)╭
當(dāng)取各種值時(shí)，效果如下：
UIControlContentHorizontalAlignment控制的則是水平方向
UIEdgeInsets
UIButton共有3個(gè)與UIEdgeInsets相關(guān)的屬性：
imageEdgeInsets調(diào)整image的上下左右邊緣離開原來位置的距離，該調(diào)整并不會(huì)改變UIButton原來的大小，image為了適應(yīng)調(diào)整，可能會(huì)變形或者跑出UIButton的外面。
titleEdgeInsets調(diào)整title的上下左右邊緣離開原來位置的距離，該調(diào)整并不會(huì)改變UIButton原來的大小，title為了適應(yīng)調(diào)整，文字可能顯示不全或者跑出UIButton的外面。
contentEdgeInsets調(diào)整UIButton本身的上下左右邊緣離開原來位置的距離，該調(diào)整會(huì)改變UIButton的大小。
這個(gè)3個(gè)屬性的默認(rèn)值都是.zero。
UIEdgeInsets由top、left、 bottom、right構(gòu)成，對于imageEdgeInsets和titleEdgeInsets來說：
top為正值時(shí)，控件會(huì)相對原來所在的位置下移相應(yīng)值，控件的頂部邊緣會(huì)在原來位置的下方相應(yīng)值。top為負(fù)值時(shí)，控件會(huì)相對原來的位置上移相應(yīng)值，控件的頂部邊緣會(huì)在原來位置的上方相應(yīng)值。
left為正值時(shí)，控件會(huì)相對原來所在的位置右移相應(yīng)值，控件的左側(cè)邊緣會(huì)在原來位置的右方相應(yīng)值。left為負(fù)值時(shí)，控件會(huì)相對原來的位置左移相應(yīng)值，控件的左側(cè)邊緣會(huì)在原來位置的左方相應(yīng)值。
bottom為正值時(shí)，控件會(huì)相對原來所在的位置上移相應(yīng)值，控件的底部邊緣會(huì)在原來位置的上方相應(yīng)值。bottom為負(fù)值時(shí)，控件會(huì)相對原來的位置下移相應(yīng)值，控件的底部邊緣會(huì)在原來位置的下方相應(yīng)值。
right為正值時(shí)，控件會(huì)相對原來所在的位置左移相應(yīng)值，控件的右側(cè)邊緣會(huì)在原來位置的左方相應(yīng)值。right為負(fù)值時(shí)，控件會(huì)相對原來位置右移相應(yīng)值，控件的右側(cè)邊緣會(huì)在原來位置的右方相應(yīng)值。
對于contentEdgeInsets來說，當(dāng)top、left、bottom、right為正值時(shí)，會(huì)使UIButton向四周擴(kuò)展變大。為負(fù)值時(shí)，會(huì)使UIButton向內(nèi)收縮變小。哈哈，這樣好記一些??
現(xiàn)在把UIButton的固定大小去掉，讓它自己自適應(yīng)。先來一個(gè)水平方向調(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并不會(huì)互相影響，第一張圖中image跟title重合了，并沒有把title往右擠了相應(yīng)距離。第二張和第四張看到，image和title本身被壓縮了。
還有一點(diǎn)值得注意的是，如果原來UIButton的大小能容納下調(diào)整后的image和title，它們將不會(huì)被壓縮。像第一張那樣，image左移后還是放得下的，所以沒有被壓縮，title卻放不下了，所以被壓縮了。為什么說是原來的大小呢，因?yàn)檎{(diào)整contentEdgeInsets也會(huì)使UIButton變大，但是image和title卻不會(huì)因此而不被壓縮。再來一個(gè)豎直方向調(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并不會(huì)改變UIButton的大小，而導(dǎo)致有時(shí)圖片被壓縮，或者文字顯示不下。這時(shí)就要接著用UIButton的另一個(gè)屬性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)整，還是一個(gè)壓縮的狀態(tài)。驗(yàn)證了上面值得注意的那一點(diǎn)~ 這時(shí)候要再調(diào)整一下它們的right值了，將其設(shè)置為-20，如愿得到了下面的結(jié)果。
需要注意 當(dāng)設(shè)置contentHorizontalAlignment為.left時(shí)，再設(shè)置imageEdgeInsets和titleEdgeInsets的.right為負(fù)值時(shí)，如果image和title原來是壓縮狀態(tài)，會(huì)對其調(diào)整。如果原來是正常狀態(tài)，則不會(huì)產(chǎn)任何影響。也就是說，imageEdgeInsets和titleEdgeInsets的設(shè)置并不會(huì)讓image和title被拉伸！其他方向亦如此~所以，為了保證image和title始終不被壓縮，.left設(shè)置了多少正值，.right就設(shè)置多少負(fù)值。上下方向也一樣。
實(shí)戰(zhàn)
上面做了這么多鋪墊，現(xiàn)在通過設(shè)置UIButton的3個(gè)EdgeInsets屬性來實(shí)現(xiàn)一些我們想要的效果吧??
在做水平方向的調(diào)整時(shí)，最好將contentHorizontalAlignment設(shè)置為.left，這樣改動(dòng)就從左開始。在做豎直方向的調(diào)整時(shí)，最好將contentVerticalAlignment設(shè)置為.top，這樣改動(dòng)就從上面開始。對于自己在設(shè)置時(shí)，比較容易在腦子想象每個(gè)值設(shè)置完的樣子??
例1：設(shè)置一個(gè)四周間隔20，image和title之間間隔20的button。
計(jì)算過程如下：
//向的調(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è)置一個(gè)image在上居中，title在下居中，兩者之間間距20，四周間距20的button。
這個(gè)看起來復(fù)雜一些，但也只是計(jì)算復(fù)雜一些~ 計(jì)算過程如下，求出標(biāo)記問號(hà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//計(jì)算圖中?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/
