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.titleLabel.text和[UIButton setTitle:],UIButton.imageView.image和[UIButton setImage]的区别

UIButton中设置Titl方法包括以下几种: - (void)setTitle:(NSString *)title forState:(UIControlState)state; ...
  • luobo140716
  • luobo140716
  • 2016年02月19日 16:48
  • 643

UIButton中imageView和titleLabel的位置调整

在使用UIButton时,有时候需要调整按钮内部的imageView和titleLabel的位置和尺寸。在默认情况下,按钮内部的imageView和titleLabel的显示效果是图片在左文字在右,然...
  • Liangyc0129
  • Liangyc0129
  • 2016年03月01日 14:55
  • 1647

iOS-调整UIButton的title和image的位置

调整原生UIButton中title和image位置仅需调用此方法:/** * 重新布局UIbutton * * @param button 所布局的UIbutton */ -(void)...
  • qiuxuewei2012
  • qiuxuewei2012
  • 2016年07月26日 11:40
  • 2628

54.变换UIButton中的label和image的位置

1.自定义一个button并实现以下方法,在返回frame的方法中拿不到字体大小,一般用myFont属性写死。 - (id)initWithCoder:(NSCoder *)aDecoder { ...
  • u012493967
  • u012493967
  • 2015年07月27日 11:40
  • 337

关于UIButton的 setBackgroundImage 和 setImage区别

关于UIButton的 setBackgroundImage 和 setImage区别相同点就是两者都可以设置图片。区别如下: 1,setBackgroundImage,图片会随着按钮的大小而改变,...
  • yqmfly
  • yqmfly
  • 2015年07月10日 14:11
  • 4105

UIButton的Image和Title的布局

UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。 如果对其理解不够深入,用纯数字进行布局管理,经过不断的调试,还是...
  • shan1991fei
  • shan1991fei
  • 2015年12月10日 15:17
  • 1869

UIButton 设置image ,title和setBackgroundImage

UIButton 设置image ,title和setBackgroundImage
  • sanjunsheng
  • sanjunsheng
  • 2015年10月23日 00:01
  • 706

UIButton如何正确调整imageView及titleLabel的位置

转自:http://blog.sina.com.cn/s/blog_5df876f301016h8h.html 一些开发者知道通过imageEdgeInsets及titleEdgeInsets可以调...
  • dxsy007
  • dxsy007
  • 2015年03月05日 10:58
  • 389

iOS UIButton如何正确调整imageView及titleLabel的位置

一些开发者知道通过imageEdgeInsets及titleEdgeInsets可以调整imageView及titleLabel的位置,但不知道如何正确计算,基本上都是通过多次调整相应的值达到期望的目...
  • u010856537
  • u010856537
  • 2015年09月16日 10:46
  • 523

详解调整UIButton的title和image的位置

转载自 http://m.blog.csdn.net/article/details?id=51323336 很多次,系统默认的UIButton不能满足需求,每次都是查了很多...
  • qhwc2009
  • qhwc2009
  • 2016年10月06日 11:47
  • 804
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UIButton 设置 image 和 title 的布局问题
举报原因:
原因补充:

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