通过设置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
默认是ButtonImageLeft的。
ButtonImageRight
如果要将image移到右边来,如下图,可以看出。image左间距增大labelWidth,image的右间距减少了labelWidth,label的左间距减少了imageWidth,label的右间距增大了imageWidth。
//计算如下,可以推断出right = -left,同理bottom = -top
imageLeft = labelWidth
imageRight = -labelWidth
labelLeft = -imageWidth
labelRight = imageWidth
ButtonImageTop
将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。
ButtonImageBottom
将image移到下方。可以参照ButtonImageTop的自行算出。
添加space
如果我们要设置image和title之间的间距呢,也很简单。计算时+/-space*0.5就可以了。
如space=5,
ButtonImageRight:imageLeft = labelWidth + space / 2
ButtonImageTop:imageTop = -labelHeight / 2 - space / 2
我写了个button的extension,代码在https://github.com/silan-liu/buttonEdgeInset.git