用UIButton的titleEdgeInsets属性和 imageEdgeInsets属性达成图片文字按须求排列,

用UIButton的title艾德geInsets属性和 imageEdgeInsets属性完成图片文字按需要排列,

button能够安装 titleEdgeInsets属性和
imageEdgeInsets属性来调治其image和label绝对地点,具体参考
图片 1  
这里说说作者自身的知晓,精通有误的地方,大家能够研究  
前提:那是在button的frame丰硕展现image和label内容的气象下,假诺frame相当不够,图片也许文字会被压缩(demo的button是xib上画的,所以大小刚好好)
 
后置知识点:titleEdgeInsets是title相对于其左右左右的inset,跟tableView的contentInset是左近的,
假使唯有title,这它上下左右都以相对于button的,image也是平等;
假设还要有image和label,那这时候image的上左下是相对于button,左侧是相对于label的;title的上右下是周旋于button,侧边是相持于image的。
 
作者写了个demo来评释怎么设置那七个属性以高达本身想要的职能:
看作用图来讲雀巢(Nestle)下:
图片 2
在那之中,左边的是给相应的左边的button及button.imageView,
button.titleLabel加下面框的功用  
暗中同意情状下,button的image和label是紧贴着居中的,
那假设想要image在右边,label在右侧应该咋做呢? 答案正是:
self.oneButton.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0,
-labelWidth); self.oneButton.titleEdgeInsets = UIEdgeInsetsMake(0,
-imageWith, 0, imageWith); 来解释一下为何: 其实正是这一句:This
property is used only for positioning the image during layout
其实titleEdgeInsets属性和
imageEdgeInsets属性只是在画那个button出来的时候用来调动image和label地方的性质,并不影响button自身的轻重(那几个看第三排的图相比较分明),
它们只是image和button相较于原本职位的偏移量,那怎么着是原来的岗位吗?就是图片 3那些未有安装edgeInset时候的职位了。
 
如要要image在左侧,label在右边手,那image的左边手相对于button的左边手右移了labelWidth的偏离,image的左侧相对于label的左边右移了labelWidth的相距
所以,self.oneButton.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth,
0, -labelWidth);为啥是负值呢?因为那是contentInset,是偏移量,不是偏离
同样的,label的动手相对于button的左侧左移了imageWith的偏离,label的左臂绝对于image的侧面左移了imageWith的相距
所以self.oneButton.title艾德geInsets = UIEdgeInsetsMake(0, -imageWith, 0,
imageWith); 那样就完事image在左侧,label在左手的效应了。    
第三排,image在上,label在下 同样的第三排调度前的依然首先排的指南,
跟第一排比起来,image的主导地方向右移动了 CGFloat imageOffsetX =
(imageWith + labelWidth) / 2 – imageWith / 2; 上腾飞移动了 CGFloat
imageOffsetY = imageHeight / 2; 所以self.twoButton.imageEdgeInsets =
UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY,
-imageOffsetX); label的中坚岗位像左移动了CGFloat labelOffsetX =
(imageWith + labelWidth / 2) – (imageWith + labelWidth) / 2;
向下活动了CGFloat labelOffsetY = labelHeight / 2;
所以self.twoButton.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY,
-labelOffsetX, -labelOffsetY, labelOffsetX);
然后就大功告成了,未来早就完善兑现一个button内image在上,label在下,切居中了

imageEdgeInsets属性实现图片文字按需要排列, button能够安装
titleEdgeInsets属性和 imageEdgeInsets属性来调动其image和…

图片 4里面,侧面的是给相应的左侧的button及button.imageView,
button.titleLabel加上面框的作用

所以self.oneButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWith, 0,
imageWith);

答案正是:

button能够安装 titleEdgeInsets属性和
imageEdgeInsets属性来调动其image和label绝对地方,具体参照他事他说加以考察

下一场就马到成功了,未来早已完美兑现一个button内image在上,label在下,且居中了

暗中认可情状下,button的image和label是紧贴着居中的,那假诺想要image在左臂,label在左臂应该如何做吧?

内置知识点:titleEdgeInsets是title相对于其前后左右的inset,跟tableView的contentInset是近似的,假设独有title,那它上下左右都以争辨于button的,image也是大同小异;借使同一时候有image和label,那那时候image的上左下是周旋于button,右侧是相持于label的;title的上右下是相对于button,侧面是相对于image的。

 

实际上便是这一句:This property is used only for positioning the image
during layout

自己写了个demo来申明怎么设置这两性格格以高达和煦想要的效力:

于是左侧一列是越来越好的,能够比完美的协作autoLayout;

所以self.oneButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWith, 0,
imageWith);

默许意况下,button的image和label是紧贴着居中的,这要是想要image在左边,label在左边应该咋办吧?答案正是:self.oneButton.imageEdgeInsets
= UIEdgeInsetsMake(0, labelWidth, 0,
-labelWidth);self.oneButton.titleEdgeInsets = UIEdgeInsetsMake(0,
-imageWith, 0, imageWith);来解释一下为啥:其实正是这一句:This
property is used only for positioning the image during
layout其实titleEdgeInsets属性和
imageEdgeInsets属性只是在画那些button出来的时候用来调度image和label地点的性质,并不影响button自个儿的深浅(那么些看第三排的图比较了然),

如要要image在侧边,label在左边,那image的左臂相对于button的左臂右移了labelWidth的离开,image的右边相对于label的左边右移了labelWidth的偏离

同一的,label的侧面相对于button的右边左移了imageWith的相距,label的右边手相对于image的左边左移了imageWith的距离

此间说说作者要好的接头,精晓有误的地点,我们能够谈谈

此地说说自个儿要好的了然,了然有误的地点,大家能够谈谈

如此那般就成功image在左边手,label在左臂的职能了。

它们只是image和button相较于原本职位的偏移量,那怎么是本来的职位吗?便是图片 5本条从未设置edgeInset时候的职责了。

假如同期有image和label,那那时候image的上左下是对峙于button,右侧是相对于label的;title的上右下是周旋于button,侧边是对峙于image的。

self.oneButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWith, 0,
imageWith);

图片 6

本身写了个demo来证明怎么设置那七个属性以达到自身想要的功能:

故此,self.oneButton.imageEdgeInsets = UI艾德geInsetsMake(0, labelWidth,
0, -labelWidth);为啥是负值呢?因为那是contentInset,是偏移量,不是距离

如要要image在左手,label在左臂,那image的左边相对于button的左边右移了labelWidth的相距,image的侧边相对于label的左边右移了labelWidth的距离所以,self.oneButton.imageEdgeInsets
= UIEdgeInsetsMake(0, labelWidth, 0,
-labelWidth);为啥是负值呢?因为那是contentInset,是偏移量,不是距离同样的,label的右侧相对于button的右侧左移了imageWith的相距,label的左侧相对于image的左边手左移了imageWith的离开所以self.oneButton.titleEdgeInsets
= UIEdgeInsetsMake(0, -imageWith, 0,
imageWith);这样就成功image在左手,label在侧边的效果与利益了。

那样就完结image在左手,label在左边手的作用了。

来解释一下为啥:

前提:那是在button的frame充分显示image和label内容的场地下,如果frame相当不足,图片也许文字会被压缩(demo的button是xib上画的,所以大小刚好好)

据此建议照旧提前安装好约束,对于button恐怕label来说,因为有intrinsicSize的留存,所以能够不设置宽高,只设置绝对于别的空间的职位)

沟通Button中图纸与文字左右职分

其三排,image在上,label在下同样的第三排调节前的依然率先排的轨范,跟第一排比起来,image的基本地方向右移动了
CGFloat imageOffsetX = (imageWith + labelWidth) / 2 – imageWith /
2;上进步移动了 CGFloat imageOffsetY = imageHeight /
2;所以self.twoButton.image艾德geInsets = UIEdgeInsetsMake(-imageOffsetY,
imageOffsetX, imageOffsetY,
-imageOffsetX);label的核心岗位像左移动了CGFloat labelOffsetX =
(imageWith + labelWidth / 2) – (imageWith + labelWidth) /
2;向下活动了CGFloat labelOffsetY = labelHeight /
2;所以self.twoButton.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY,
-labelOffsetX, -labelOffsetY,
labelOffsetX);然后就马到功成了,未来早就完美兑现二个button内image在上,label在下,切居中了

实际上titleEdgeInsets属性和
imageEdgeInsets属性只是在画那个button出来的时候用来调治image和label地方的性子,并不影响button本身的大大小小(这一个看第三排的图相比刚强),

实际上titleEdgeInsets属性和
imageEdgeInsets属性只是在画那么些button出来的时候用来调治image和label地点的品质,并不影响button自个儿的轻重缓急。

接待使用~~ 

self.oneButton.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0,
-labelWidth);

self.oneButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWith, 0,
imageWith);

假诺要image在侧面,label在左边,那image的侧面相对于button的左边手右移了labelWidth的距离,image的右手相对于label的侧边右移了labelWidth的离开

button是用contentInset来测算其intrinsicSize的尺寸的!!!

它们只是image和button相较于原本地方的偏移量,这怎样是原来的岗位吗?正是未有设置edgeInset时候的任务了。

button的可主要调节范围是橄榄绿框框内的局地,在模拟器上得以尝试,点击不在深青莲框框内的片段button是不会有响应的。

[self.oneButton.titleLabel sizeToFit];

左臂一列和中级一列是只设置了titleEdgeInsets属性和imageEdgeInsets的功能;

图片 7

发表评论

电子邮件地址不会被公开。 必填项已用*标注