完全解决UIButton的imageEdgeInsets

重要的事说三遍,我从网上找到的中文资料都多少有问题。


下面以imageEdgeInsets为例,只考虑水平方向,垂直方向和水平方向原理相同, 

titleEdgeInsets和imageEdgeInsets也是一样的。



UIEdgeInsets的定义:
typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right; 
} UIEdgeInsets;


先说最终结论:
button的imageView最终水平位置为:imageView.frame.origin.x = imageView.frame.origin.x + imageEdgeInsets.left/2.0 - imageEdgeInsets.right/2.0。

结果就是:

           imageEdgeInsets的left如果为+10,则button的imageView向右移动5。

           imageEdgeInsets的left如果为-10,则button的imageView向左移动5。

           imageEdgeInsets的right如果为+10,则button的imageView向左移动5。

           imageEdgeInsets的right如果为-10,则button的imageView向右移动5。


原因:
1、如果button足够大,image是原尺寸显示,不会变形。
也就是说imageView的frame只决定image的位置,不影响image的size。
imageView本身的center始终位于frame的center,两者重合,frame的center改变则imageView将跟着移动。


2、image的frame对应为一个长方形,而imageEdgeInsets的值会移动这个长方形的各条边。
下面只以UIEdgeInsets的left来讲:

如果left的值为正,则使长方形的左边线向靠近长方形center的方向移动,左边线距离center更近,结果长方形变小(先不考虑移动超过右边线的这种情况)。

因为EdgeInsets意为内边距,以image的内容为border,以其frame为内边线,left为正的意思是内边距变大,因为border不可变,结果就是作为内边线的frame变小了。

如果left的值为负,长方形的左边线将远离center,长方形变大。


例如:imageEdgeInsets的left为 10,则长方形的左侧边线向右移动10个单位,结果长方形水平方向上缩短了10个单位。
因为长方形变短10个单位,在长方形的左侧边线向右移动10之后,长方形center的位置也跟随左边线向右移动, 
center向右移动的数量是10的一半:5。因为imageView的center始终重合于frame的center,
所以最终的结果就是imageView向右移动5:

imageView.frame.origin.x = imageView.frame.origin.x + imageEdgeInsets.left/2.0


猜你喜欢

转载自blog.csdn.net/gaoyp/article/details/51958274