前言
相信每位ios开发者都知道在uibutton中可以设置图片和文字，也经常见到同时设置有图片和下方提示文字的按钮，但是当我自己去对图片按钮添加提示文字的时候，却发现这并不是想象中的那么简单。怎么不简单呢？下面来一起看看详细的介绍吧。
设置图片和文字
如示例代码：
|
1
2
3
4
5
6
7
8
9
|
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方法分别为按钮设置图片和文字信息，但是会发现设置完成以后我们的图片和文字并没有重合排列，也没有上下排列，而是一个左右排列的样子。
设置图片和文字
说到这里，肯定会有人想到设置图片和文字的frame来进行处理，而且我们也确实可以通过uibutton的对象获取到对应的imageview和titlelabel，但是如果经过测试的话，你就会发现这是一个trike的方法，而且是不生效的。
|
1
2
3
4
5
6
7
8
9
10
11
|
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)
}
|
修改为这样以后，运行程序，会发现对应的视图没有任何变化。
添加frame设置
uiedgeinsets
查看uibutton的属性，我们会找到titleedgeinsets和imageedgeinsets两个属性。修改这两个属性，可以实现我们想要的效果。
titleedgeinsets和imageedgeinsets都是uiedgeinsets的对象，我们先说一下uiedgeinsets的几个属性的具体效果。
我们知道，uiedgeinsets有top，left，bottom，right几个属性，但是通过测试，就会发现设置了top以后自己的y坐标并没有增加响应的距离，而是增加了1/2，那么它们到底应该如何计算呢？
当设置了top以后，其实就是相当于view的上边缘向下移动了相应的距离。用在title中，如果titlelabel的frame(50, 50, 24, 24);那么button的上下边缘应该分别是0和124，因为正常情况下titlelabel必然处于button的中间位置。当设置了titleedgeinsets的top为10以后，相当于button的上下坐标为10，124，则titlelabel的坐标就变成了(50, 55, 24, 24)，也就是上下边缘变为了55和79， 向下移动了5个点。
经过计算可以得出，如果要将文字移动到图片的下方，需要设置titleedgeinsets和imageedgeinsets，且分别设置为
若titlelabel为 w1,h1, imageview为w2,h2, 上下间距为space
|
1
2
|
titleedgeinsets = (h2 + space, - w2, 0, 0)
imageedgeinsets = (-h1 - space, w1)
|
如上述例子若改为：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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)
}
|
则可实现我们要求的效果：
设置insets
注意：如果设置了button的frame，而且button的宽度不足以同时显示图片和文字的大小的话，titlelabel的size将会获取错误。所以如果需要设置frame，建议先将button的宽度设置为frame.size.width * 2, 等titleedgeinsets和imageedgeinsets全部设置完成以后再重新设置frame。
总结
以上就是这篇文章的全部内容了，本文还有许多不足，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：http://www.jianshu.com/p/8e4d1aa8b31d