Swift - 自由调整图标按钮中的图标和文字位置(扩展UIButton)
1,Custom类型的UIButton
(2)图片与文字间的间距方式1 - 设置图片偏移量(imageEdgeInsets)
1
(3)图片与文字间的间距方式2 - 设置文字偏移量(titleEdgeInsets)
(1)我们用下面的左图(64*64)制作一个带图标的按钮
1
2
3
4
5
6
7
|
let
btn1:
UIButton
=
(frame:
CGRect
(x: 50,y: 50,width: 180,height: 32))
btn1.setTitleColor(
UIColor
.orangeColor(),0)!important">//文字颜色
self
.view.addSubview(btn1)
|
(2)图片与文字间的间距方式1 - 设置图片偏移量(imageEdgeInsets)
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)使用样例
11
如果我们想要把文字和图片位置调换下(即文字在前、图片在后),或者文字和图片改成上下排列,那么同样通过设置 titleEdgeInsets和 imageEdgeInsets即可实现。
为方便快速的设置图片和文字的相对位置,以及间距,这里对UIButton进行扩展。
(1)扩展代码如下:
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)使用样例
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.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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。