Swift - 自由调整图标按钮中的图标和文字位置（扩展UIButton）

2015-12-25 发布：hangge 阅读：1250

1，Custom类型的UIButton

我们使用定制类型（Custom）的按钮就可以设置文字前面的图标。但是图片和文字的相对位置是固定的（按钮在前，文字在后）。

（1）我们用下面的左图（64*64）制作一个带图标的按钮

1 2 3 4 5 6 7

//创建一个图片加文字的按钮 let btn1: UIButton = (frame: CGRect (x: 50,y: 50,width: 180,height: 32)) btn1.setimage( UIImage (named: "alert" ),forState: UIControlState . normal ) //按钮图标 btn1.titleLabel?.font = UIFont .boldSystemFontOfSize(28) //文字大小 btn1.setTitle( "带图标按钮" ,forState: UIControlState //按钮文字 btn1.setTitleColor( UIColor .orangeColor(),0)!important">//文字颜色 self .view.addSubview(btn1)

（2）图片与文字间的间距方式1 - 设置图片偏移量（imageEdgeInsets）

1

btn1.imageEdgeInsets = UIEdgeInsets (top: 0,left: -20,bottom: 0,right: 0)

（3）图片与文字间的间距方式2 - 设置文字偏移量（titleEdgeInsets）

1

btn1.titleEdgeInsets= UIEdgeInsets ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,left: 20,right: 0)

2，扩展UIButton
如果我们想要把文字和图片位置调换下（即文字在前、图片在后），或者文字和图片改成上下排列，那么同样通过设置 titleEdgeInsets和 imageEdgeInsets即可实现。
为方便快速的设置图片和文字的相对位置，以及间距，这里对UIButton进行扩展。
（1）扩展代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

import UIKit extension UIButton { @objc func set (image anImage: UIImage ?,title: String ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, titlePosition: UIViewContentMode ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,additionalSpacing: CGFloat ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,state: UIControlState ){ self .imageView?.contentMode = . Center .setimage(anImage,forState: state) positionLabelRespectToImage(title,position: titlePosition,spacing: additionalSpacing) .titleLabel?.contentMode = . Center .setTitle(title,forState: state) } private func positionLabelRespectToImage(title: String ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,position: UIViewContentMode ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, spacing: CGFloat ) { let imageSize = .imageRectForContentRect( .frame) titleFont = .titleLabel?.font! titleSize = title.sizeWithAttributes([ NSFontAttributeName : titleFont!]) var titleInsets: UIEdgeInsets imageInsets: UIEdgeInsets switch (position){ case . Top : titleInsets = (top: -(imageSize.height + titleSize.height + spacing), left: -(imageSize.width),right: 0) imageInsets = UIEdgeInsets ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,left: 0,right: -titleSize.width) Bottom : titleInsets = (top: (imageSize.height + titleSize.height + spacing), imageInsets = ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,right: -titleSize.width) Left : right: -(titleSize.width * 2 + spacing)) Right : default : } .titleEdgeInsets = titleInsets .imageEdgeInsets = imageInsets } }

（2）使用样例

11

12

13

20

21

22

28

29

30

36

37

38

45

class ViewController : UIViewController override viewDidLoad() { super .viewDidLoad() btn1: = UIButton (frame: CGRect (x: 0,y: 0,width: 200,height: 32)) btn1.center = CGPointMake (view.frame.size.width/2,60) btn1.titleLabel?.font = UIFont .boldSystemFontOfSize(28) //文字大小 btn1.setTitleColor( UIColor ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,forState: normal ) //文字颜色 btn1. (image: (named: "alert" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,title: "文字在左侧" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,titlePosition: . ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, additionalSpacing: 10.0,state: . ) view.addSubview(btn1) btn2: ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,height: 32)) btn2.center = ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,120) btn2.titleLabel?.font = //文字大小 btn2.setTitleColor( UIColor ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,forState: UIControlState //文字颜色 btn2. (image: UIImage "文字在右侧" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, ) view.addSubview(btn2) btn3: = ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,width: 170,height: 70)) btn3.center = CGPointMake ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,230) btn3.titleLabel?.font = UIFont //文字大小 btn3.setTitleColor( //文字颜色 btn3. "文字在上方" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, ) view.addSubview(btn3) btn4: ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,height: 70)) btn4.center = ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,290) btn4.titleLabel?.font = //文字大小 btn4.setTitleColor( //文字颜色 btn4. "文字在下方" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.5em!important; margin:0px!important; overflow:visible!important; padding:1px 0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, ) view.addSubview(btn4) } didReceiveMemoryWarning() { .didReceiveMemoryWarning() }

原文出自： www.hangge.com 转载请保留原文链接： http://www.hangge.com/blog/cache/detail_960.html