前言

相信每位iOS開發(fā)者都知道在UIButton中可以設(shè)置圖片和文字，也經(jīng)常見到同時(shí)設(shè)置有圖片和下方提示文字的按鈕，但是當(dāng)我自己去對(duì)圖片按鈕添加提示文字的時(shí)候，卻發(fā)現(xiàn)這并不是想象中的那么簡(jiǎn)單。怎么不簡(jiǎn)單呢？下面來一起看看詳細(xì)的介紹吧。

設(shè)置圖片和文字

如示例代碼：

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按鈕", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()

self.view.addSubview(button)
}

我們可以通過UIButton的setTitle和setImage方法分別為按鈕設(shè)置圖片和文字信息，但是會(huì)發(fā)現(xiàn)設(shè)置完成以后我們的圖片和文字并沒有重合排列，也沒有上下排列，而是一個(gè)左右排列的樣子。

設(shè)置圖片和文字

說到這里，肯定會(huì)有人想到設(shè)置圖片和文字的frame來進(jìn)行處理，而且我們也確實(shí)可以通過UIButton的對(duì)象獲取到對(duì)應(yīng)的imageView和titleLabel，但是如果經(jīng)過測(cè)試的話，你就會(huì)發(fā)現(xiàn)這是一個(gè)trike的方法，而且是不生效的。

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按鈕", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()
button.titleLabel?.frame = CGRectMake(20, 0, 30, 30)
button.imageView?.frame = CGRectMake(0, 0, 20, 20)

self.view.addSubview(button)
}

修改為這樣以后，運(yùn)行程序，會(huì)發(fā)現(xiàn)對(duì)應(yīng)的視圖沒有任何變化。

添加frame設(shè)置

UIEdgeInsets

查看UIButton的屬性，我們會(huì)找到titleEdgeInsets和imageEdgeInsets兩個(gè)屬性。修改這兩個(gè)屬性，可以實(shí)現(xiàn)我們想要的效果。

titleEdgeInsets和imageEdgeInsets都是UIEdgeInsets的對(duì)象，我們先說一下UIEdgeInsets的幾個(gè)屬性的具體效果。

我們知道，UIEdgeInsets有top，left，bottom，right幾個(gè)屬性，但是通過測(cè)試，就會(huì)發(fā)現(xiàn)設(shè)置了top以后自己的y坐標(biāo)并沒有增加響應(yīng)的距離，而是增加了1/2，那么它們到底應(yīng)該如何計(jì)算呢？

當(dāng)設(shè)置了top以后，其實(shí)就是相當(dāng)于view的上邊緣向下移動(dòng)了相應(yīng)的距離。用在title中，如果titleLabel的frame(50, 50, 24, 24);那么Button的上下邊緣應(yīng)該分別是0和124，因?yàn)檎Ｇ闆r下titleLabel必然處于Button的中間位置。當(dāng)設(shè)置了titleEdgeInsets的top為10以后，相當(dāng)于button的上下坐標(biāo)為10，124，則titleLabel的坐標(biāo)就變成了(50, 55, 24, 24)，也就是上下邊緣變?yōu)榱?5和79， 向下移動(dòng)了5個(gè)點(diǎn)。

經(jīng)過計(jì)算可以得出，如果要將文字移動(dòng)到圖片的下方，需要設(shè)置titleEdgeInsets和imageEdgeInsets，且分別設(shè)置為
若titleLabel為 w1,h1, imageView為w2,h2, 上下間距為space

titleEdgeInsets = (h2 + space, - w2, 0, 0)
imageEdgeInsets = (-h1 - space, w1)

如上述例子若改為：

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按鈕", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()

var imageSize:CGSize = button.imageView!.frame.size
var titleSize:CGSize = button.titleLabel!.frame.size
button.titleEdgeInsets = UIEdgeInsets(top: 0, left:-imageSize.width, bottom: -imageSize.height - 5, right: 0)
button.imageEdgeInsets = UIEdgeInsets(top: -titleSize.height - 5, left: 0, bottom: 0, right: -titleSize.width)
self.view.addSubview(button)
}

則可實(shí)現(xiàn)我們要求的效果：

設(shè)置insets

注意：如果設(shè)置了button的frame，而且button的寬度不足以同時(shí)顯示圖片和文字的大小的話，titleLabel的size將會(huì)獲取錯(cuò)誤。所以如果需要設(shè)置frame，建議先將button的寬度設(shè)置為frame.size.width * 2, 等titleEdgeInsets和imageEdgeInsets全部設(shè)置完成以后再重新設(shè)置frame。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，本文還有許多不足，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論