UIButton imageEdgeInsets/titleEd

2015-12-03 本文已影响343人微微笑的蜗牛

通过设置imageEdgeInsets可以设置button图标的上下左右间距，同样，titleEdgeInsets可以改变title的四周的间距。之前还不知道这2个属性，自己还专门写了个button来动态调整间距，o(╯□╰)o。

默认的，image和title之间的间距为0，二者水平垂直方向整体居中，imageEdgeInsets和titleEdgeInsets均为
UIEdgeInsetsZero。

left > 0，左边距增大，右移，< 0，左移。top > 0，上边距增大，下移，< 0，上移。right > 0，右边距增大，左移，< 0，右移。bottom > 0，下边距增大，上移，< 0，下移。

这样，我们就可以通过控制inset来调整方位了。

首先我们来定义一个枚举，定义image的位置。

//图片位置
enum ButtonImagePosition: Int {
    case ButtonImageLeft = 0
    case ButtonImageRight
    case ButtonImageTop
    case ButtonImageBottom
}

默认是ButtonImageLeft的。

imageLeft.png

如果要将image移到右边来，如下图，可以看出。image左间距增大labelWidth，image的右间距减少了labelWidth，label的左间距减少了imageWidth，label的右间距增大了imageWidth。

//计算如下，可以推断出right = -left，同理bottom = -top
imageLeft = labelWidth
imageRight = -labelWidth

labelLeft = -imageWidth
labelRight = imageWidth

imageRight.png

将image移到上方。

newImageY = (buttonHeight - (labelHeight + imageHeight)) / 2

// new
imageLeft = (buttonWidth - imageWidth) / 2 - (buttonWidth - (labelWidth + imageWidth) / 2) => (labelWidth / 2)

// newImageY - oldImageY
imageTop = newImageY - (buttonHeight - imageHeight) / 2 => (-labelHeight / 2)

labelLeft = (buttonWidth - (labelWidth + imageWidth) / 2) - (buttonWidth - labelWidth) / 2 => (-imageWidth / 2)

labelTop = newImageY + imageHeight - (buttonHeight - labelHeight) / 2 => (imageHeight / 2)

同理可以算出label的left，top。

imageTop.png

将image移到下方。可以参照ButtonImageTop的自行算出。

imageBottom.png

如果我们要设置image和title之间的间距呢，也很简单。计算时+/-space*0.5就可以了。
如space=5,

ButtonImageRight：imageLeft = labelWidth + space / 2
ButtonImageTop：imageTop = -labelHeight / 2 - space / 2