Swift - 自由调整图标按钮中的图标和文字位置(扩展UIButton)
作者:hangge | 2015-12-25 08:40
1,Custom类型的UIButton
(2)图片与文字间的间距方式1 - 设置图片偏移量(imageEdgeInsets)
(3)图片与文字间的间距方式2 - 设置文字偏移量(titleEdgeInsets)
我们使用定制类型(Custom)的按钮就可以设置文字前面的图标。但是图片和文字的相对位置是固定的(按钮在前,文字在后)。
(1)我们用下面的左图(64*64)制作一个带图标的按钮

//创建一个图片加文字的按钮
let btn1:UIButton = 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.Normal) //按钮文字
btn1.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
self.view.addSubview(btn1)
(2)图片与文字间的间距方式1 - 设置图片偏移量(imageEdgeInsets)

btn1.imageEdgeInsets = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)
(3)图片与文字间的间距方式2 - 设置文字偏移量(titleEdgeInsets)
btn1.titleEdgeInsets= UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 0)
2,扩展UIButton
如果我们想要把文字和图片位置调换下(即文字在前、图片在后),或者文字和图片改成上下排列,那么同样通过设置 titleEdgeInsets 和 imageEdgeInsets 即可实现。
为方便快速的设置图片和文字的相对位置,以及间距,这里对UIButton进行扩展。
(1)扩展代码如下:
(2)使用样例
如果我们想要把文字和图片位置调换下(即文字在前、图片在后),或者文字和图片改成上下排列,那么同样通过设置 titleEdgeInsets 和 imageEdgeInsets 即可实现。
为方便快速的设置图片和文字的相对位置,以及间距,这里对UIButton进行扩展。
(1)扩展代码如下:
import UIKit
extension UIButton {
@objc func set(image anImage: UIImage?, title: String,
titlePosition: UIViewContentMode, additionalSpacing: CGFloat, state: UIControlState){
self.imageView?.contentMode = .Center
self.setImage(anImage, forState: state)
positionLabelRespectToImage(title, position: titlePosition, spacing: additionalSpacing)
self.titleLabel?.contentMode = .Center
self.setTitle(title, forState: state)
}
private func positionLabelRespectToImage(title: String, position: UIViewContentMode,
spacing: CGFloat) {
let imageSize = self.imageRectForContentRect(self.frame)
let titleFont = self.titleLabel?.font!
let titleSize = title.sizeWithAttributes([NSFontAttributeName: titleFont!])
var titleInsets: UIEdgeInsets
var imageInsets: UIEdgeInsets
switch (position){
case .Top:
titleInsets = UIEdgeInsets(top: -(imageSize.height + titleSize.height + spacing),
left: -(imageSize.width), bottom: 0, right: 0)
imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -titleSize.width)
case .Bottom:
titleInsets = UIEdgeInsets(top: (imageSize.height + titleSize.height + spacing),
left: -(imageSize.width), bottom: 0, right: 0)
imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -titleSize.width)
case .Left:
titleInsets = UIEdgeInsets(top: 0, left: -(imageSize.width * 2), bottom: 0, right: 0)
imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0,
right: -(titleSize.width * 2 + spacing))
case .Right:
titleInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: -spacing)
imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
default:
titleInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
self.titleEdgeInsets = titleInsets
self.imageEdgeInsets = imageInsets
}
}
(2)使用样例
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let btn1:UIButton = 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.orangeColor(), forState: UIControlState.Normal) //文字颜色
btn1.set(image: UIImage(named: "alert"), title: "文字在左侧", titlePosition: .Left,
additionalSpacing: 10.0, state: .Normal)
view.addSubview(btn1)
let btn2:UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 32))
btn2.center = CGPointMake(view.frame.size.width/2, 120)
btn2.titleLabel?.font = UIFont.boldSystemFontOfSize(28) //文字大小
btn2.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
btn2.set(image: UIImage(named: "alert"), title: "文字在右侧", titlePosition: .Right,
additionalSpacing: 10.0, state: .Normal)
view.addSubview(btn2)
let btn3:UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 170, height: 70))
btn3.center = CGPointMake(view.frame.size.width/2, 230)
btn3.titleLabel?.font = UIFont.boldSystemFontOfSize(28) //文字大小
btn3.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
btn3.set(image: UIImage(named: "alert"), title: "文字在上方", titlePosition: .Top,
additionalSpacing: 10.0, state: .Normal)
view.addSubview(btn3)
let btn4:UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 170, height: 70))
btn4.center = CGPointMake(view.frame.size.width/2, 290)
btn4.titleLabel?.font = UIFont.boldSystemFontOfSize(28) //文字大小
btn4.setTitleColor(UIColor.orangeColor(), forState: UIControlState.Normal) //文字颜色
btn4.set(image: UIImage(named: "alert"), title: "文字在下方", titlePosition: .Bottom,
additionalSpacing: 10.0, state: .Normal)
view.addSubview(btn4)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
全部评论(2)
为什么我把语言切换成阿拉伯语,然后文字放下面,就是乱的
站长回复:运行我的demo,让后切换语言会有问题吗? 因为看不到你的代码,我也不知道是哪里出问题了。
没有考虑布局方向,如果是阿拉伯语,这样就全乱了
站长回复:目前只有希伯来文和阿拉伯文书写顺序是从右向左的。但这不影响文子和图标的位置,怎么会乱呢,你设置文字在左,不管何种语言文字就一定在左边。设置在右边就一定在右边。
