本文介绍button中title和image的相对位置以实现如下效果
github地址,下载点我:实现了一个button的分类,有4中位置可以选择
效果图:
关键属性: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里面的格式
所以,搞清楚相对位置来说就知道了距离,然后判断远离或者是靠近就知道了符号,总结的规律就是,靠近就为-,远离就为+