本文介绍button中title和image的相对位置以实现如下效果

github地址,下载点我:实现了一个button的分类,有4中位置可以选择

效果图:

WSl imges 位置_图片和文字位置

WSl imges 位置_图片和文字位置_02

关键属性:EdgeInsets

titleEdgeInsets是titleLabel相对其上下左右的inset
如果只有title,那么titleLabel的上下左右都是相对于button的
如果只有image,那么image的上下左右都是相对于button的
如果同时有image和title,那么image的上左下相对于button,右相对于label
label的上右下是相对于button的,左是相对于image的

1.文字在左 图片在右
imageEdgeInsets = UIEdgeInsetsMake(0, labelW + space / 2, 0, -labelW - space / 2);
titleEdgeInsets = UIEdgeInsetsMake(0, -imageW - space / 2, 0, imageW + space / 2);

计算方式:

label的左边相对于button的左边来说是靠近,所以- ; label的右边相对于button的右边是远离,所以是+
image的左边相对于button的左边来说是远离,所以为+ ; image的右边相对于button的右边来说是靠近,所以是 -

2.文字在右 图片在左
imageEdgeInsets = UIEdgeInsetsMake(0, -space / 2, 0, space / 2);
titleEdgeInsets = UIEdgeInsetsMake(0, space / 2, 0, -space / 2);

计算方式:

label的左边相对于button的左边来说是远离,所以+ ; label的右边相对于button的右边是靠近,所以是-
image的左边相对于button的左边来说是靠近,所以为- ; image的右边相对于button的右边来说是远离,所以是 +

3.文字在上 图片在下
imageEdgeInsets = UIEdgeInsetsMake(0, -labelW / 2, -labelH - space / 2, -labelW);

titleEdgeInsets = UIEdgeInsetsMake(0, -imageW / 2, imageH +space / 2, labelW);

更准确的来说,应该是下面这种格式:

imageEdgeInsets = UIEdgeInsetsMake(labelH / 2 + space / 4, labelW / 2, -labelH / 2 - space / 4, -labelW / 2);

titleEdgeInsets = UIEdgeInsetsMake(-imageH / 2 - space / 4, - imageW / 2, imageH / 2 + space / 4, imageW / 2);

计算方式
image相对于label来说,往下移了labelH / 2 + space / 4的距离,label相对于image来说,往上移了imageH /2 + space / 4的距离,整体来看,image的上面相对于button的上面远离是+,image的下面相对于button的下面是靠近,所以是-,然后把image移到中间去,image向右移,image的左边相对于button的左边,远离所以是+,image的右边相对于button的右边靠近,所以是-,同理 label也是这样

还可以变形为:

imageEdgeInsets = UIEdgeInsetsMake(labelH + space / 2, -labelW / 2, 0, -labelW);

titleEdgeInsets = UIEdgeInsetsMake(-imageH -space / 2, -imageW / 2, 0, labelW);
4.文字在下 图片在上
imageEdgeInsets = UIEdgeInsetsMake(-labelH / 2 - space / 4, labelW / 2, labelH / 2 + space / 4, - labelW / 2);

titleEdgeInsets = UIEdgeInsetsMake(imageH / 2 + space / 4, -imageW / 2, - imageH / 2 - space / 4, imageW / 2);

同理可以写成3里面的格式
所以,搞清楚相对位置来说就知道了距离,然后判断远离或者是靠近就知道了符号,总结的规律就是,靠近就为-,远离就为+