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

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

1，Custom类型的UIButton

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

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

@H_301_127@

 
         //创建一个图片加文字的按钮 
        
 
         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 @H_301_127@

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

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

 
           btn1.titleEdgeInsets= 
           UIEdgeInsets 
           301_127@

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

@H_301_274@ 32

@H_301_127@

@H_301_312@import UIKit

extension UIButton {

@H_301_312@@objc @H_301_312@func @H_301_312@set (image anImage: UIImage ?,title: String titlePosition: UIViewContentMode CGFloat UIControlState ){

self .imageView?.contentMode = . Center

.setImage(anImage,forState: state)

positionLabelRespectToImage(title,position: titlePosition,spacing: additionalSpacing)

.titleLabel?.contentMode = . Center

.setTitle(title,forState: state)

}

private @H_301_312@func positionLabelRespectToImage(title: String UIViewContentMode 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 Bottom :

titleInsets = (top: (imageSize.height + titleSize.height + spacing),

imageInsets = Left :

right: -(titleSize.width * 2 + spacing))

Right :

default :

}

.titleEdgeInsets = titleInsets

.imageEdgeInsets = imageInsets

}

（2）使用样例

@H_301_127@

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 Normal ) //文字颜色

btn1. (image: (named: "alert" "文字在左侧" additionalSpacing: 10.0,state: . )

view.addSubview(btn1)

btn2: btn2.center = btn2.titleLabel?.font = //文字大小

btn2.setTitleColor( UIColor UIControlState //文字颜色

btn2. (image: UIImage "文字在右侧" )

view.addSubview(btn2)

btn3: = btn3.center = CGPointMake btn3.titleLabel?.font = UIFont //文字大小

btn3.setTitleColor( //文字颜色

btn3. "文字在上方" )

view.addSubview(btn3)

btn4: btn4.center = btn4.titleLabel?.font = //文字大小

btn4.setTitleColor( //文字颜色

btn4. "文字在下方" )

view.addSubview(btn4)

}

didReceiveMemoryWarning() {

.didReceiveMemoryWarning()

}

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

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

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

猜你在找的Swift相关文章