UIButton 设置 image 和 title 的布局问题

原创 2016年08月29日 18:48:26

系统自带的 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)






版权声明:本文为博主原创文章,未经博主允许不得转载。

UIButton的Image和Title的布局

UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。 如果对其理解不够深入,用纯数字进行布局管理,经过不断的调试,还是...

设置UIButton的image title 位置

UIButton 的image title 的位置都是可以调整的,具体如何调整可以按照下面的步骤1、设置内容的水平垂直位置 self.contentVerticalAlignment = UIC...
  • reylen
  • reylen
  • 2016年01月18日 17:27
  • 675

UIButton通过UIEdgeInsetsMake设置image和title的位置

使用 UIEdgeInsetsMake时

[iOS]UIButton同时添加image和title后子视图位置管理

[iOS]UIButton同时添加image和title后子视图位置管理 本文产生原因: 自定义TableBar时,一般需要给Button设置Image和Title,以便改变点击效果及调用响应方法。...

UIButton将title和image放置在任意位置上

实现效果图: // 设置内容对齐方式,并设置内容距离四周距离(上左下右)   button.contentHorizontalAlignment = UIControlCo...
  • ITMan_K
  • ITMan_K
  • 2017年03月09日 15:24
  • 141

UIButton 调整title和image的位置

想深入了解 UIButton 的image 和 titleLabel的关系必须知道的原理 (1) Button有两个属性:titleEdgeInsets和imageEdgeInsets,通...

在UIbutton下面添加title

  • 2011年08月22日 14:36
  • 1KB
  • 下载

UIButton-system类型 动态改变title 显示文字时闪动(解决方案)

今天发现动态改变button title时会出现闪动.很蛋疼的问题,后来经过反复尝试,发现一个解决方案. dispatch_queue_t queue = dispatch_get_global_qu...

openframeworks设置title bar标题图标问题

openframework在一些东西的时候很方便 但是有些关于windows设置方面的东西提供的库却很有限 这里说的是改图标问题,先上个图 首先icon可以通过改项目中的icon.rc路...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UIButton 设置 image 和 title 的布局问题
举报原因:
原因补充:

(最多只允许输入30个字)