系统自带的 UIButton 是可以添加一个图片和一个标题的,并且位置是可以随意设置的。
主要用到两个属性
imageEdgeInsets
titleEdgeInsets
1.如果图片的宽/高(@2x@3x做相应的处理)大于等于 button 的大小,
imageView 的 frame 的 x/y 为0,width/height 为 button 的 width/height,
titleLabel 的 frame 的 x = image.width, y = (button.height - titleLabel.height)/2
2.如果小于,
imageView 的 frame 的 x 为(button.width - image.width - titleLabel.width) / 2 (titleLabel 的宽度根据文字多少来决定,如果太多,中间会以省略号代替),y 为(button.width - image.height)/2
titleLabel 的 frame 的 x 为imageView.x + image.width, y = (button.height - titleLabel.height)/2
imageEdgeInsets 的设置:只要设置的4个点之间有位置,图片就能正确加上,并且图片总是正常放置,不会翻转,如果左右点或者上下点没有对换,图片不会被拉伸(如果图片本身大于 button,会展示为 button 大小),如果发生了对换,则会填满对换方向的大小,图片被拉伸,图片不会发生翻转,还是正常显示
titleEdgeInsets 的设置:设置 titleEdgeInsets 时不能将左右点交换,如 button 的 width 为100,没有图片的情况下,titleEdgeInsets的 left = 75, titleEdgeInsets 的 right= 75,虽然左右之间有50的距离,但是因为左右交换了,所以 title 会显示不出来。而上下交换则不会出现这个问题
但是UIEdgeInsets 与 frame 之间的关系好像不是这么简单,更细节的设置需要继续探究
创建一个 button,设置一个图片和标题,都居中显示
1.图片小于 button
let button = UIButton()
button.frame = CGRectMake(100, 100, 100, 100)
button.backgroundColor = UIColor.blueColor()
self.view.addSubview(button)
button.setTitle("0000", forState: .Normal)
button.setImage(UIImage(named: "qp_fault_littleShow"), forState: .Normal)//@2x 150*150 @3x 225*225
let imageVX = button.imageView?.frame.origin.x
let imageVWidth = button.imageView?.frame.size.width
button.imageEdgeInsets = UIEdgeInsetsMake(0, -imageVX!, 0, -(button.width - imageVX! - imageVWidth!))
let labelX = button.titleLabel?.frame.origin.x
let labelWidth = button.titleLabel?.frame.size.width
button.titleEdgeInsets = UIEdgeInsetsMake(0, -labelX!, 0, -(button.width - labelX! - labelWidth!))
2.图片大于 button
let button = UIButton()
button.frame = CGRectMake(100, 100, 100, 100)
button.backgroundColor = UIColor.blueColor()
self.view.addSubview(button)
button.setTitle("0000", forState: .Normal)
button.setImage(UIImage(named: "newVersion"), forState: .Normal)//@2x 640*400 @3x 960*600
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0)
button.titleEdgeInsets = UIEdgeInsetsMake(0, -320, 0, 0)
3.图片小于 button,并且 imageEdgeInsets titleEdgeInsets 没有翻转
let button = UIButton()
button.frame = CGRectMake(0, 100, 300, 200)
button.backgroundColor = UIColor.blueColor()
self.view.addSubview(button)
button.setTitle("0000", forState: .Normal)
button.setImage(UIImage(named: "u=98923187,3761999633&fm=111&gp=0.jpg"), forState: .Normal)//220 * 123(没做@2x,@3x 图)
<span style="white-space:pre"> </span>let imageVX = button.imageView?.frame.origin.x
<span style="white-space:pre"> </span>let imageVWidth = button.imageView?.frame.size.width
<span style="white-space:pre"> </span>button.imageEdgeInsets = UIEdgeInsetsMake(<0, -imageVX!, 0, -(button.width - imageVX! - imageVWidth!))
let labelX = button.titleLabel?.frame.origin.x
let labelWidth = button.titleLabel?.frame.size.width
button.titleEdgeInsets = UIEdgeInsetsMake(0, -labelX!, 0, -(button.width - labelX! - labelWidth!))
button.setTitleColor(UIColor.blackColor(), forState: .Normal)