开发小控件-UIButton图片位置imageEdgeInsets&titleEdgeInsets

小控件学习笔记,记录一下。

https://github.com/DawnWdf/ExtentionDemo.git

buttonImagePostion.gif

原理分析:

默认情况下,按钮image在左,label在右,中间无间隔。相对距离为image的上下左相对于按钮的上下左,右相对于label的左。label的上下右相对于按钮的上下右,左相对于image的右。像这样:

开发小控件-UIButton图片位置imageEdgeInsets&titleEdgeInsets_第1张图片
屏幕快照 2018-08-31 上午11.20.57.png

以图片在右侧为例:

UIControlContentHorizontalAlignmentLeft左对齐的情况,因为高度上没有变化,所以contentVerticalAlignment忽略不计。让按钮的image和label排序成为这样


开发小控件-UIButton图片位置imageEdgeInsets&titleEdgeInsets_第2张图片
屏幕快照 2018-08-31 上午11.22.39.png

图片在右,文字在左,中间一个间距。
如果把两个图放在一起,如下:


开发小控件-UIButton图片位置imageEdgeInsets&titleEdgeInsets_第3张图片
屏幕快照 2018-08-31 上午11.34.36.png
  • 线1为image左面变化的距离,长度为:label宽度labelWidth+间距pading,因为左面相对于按钮左面位置没有变化,所以为正数;
  • 线2为image右面变化的距离:长度为:label宽度labelWidth+间距pading,因为image右面相对于label的左面位置产生了变化,所以为负数;
  • 线3为label左侧变化的距离,长度为image的宽度imageWidth,因为相对于图片的右侧位置发生了变化,所以为负数;
  • 线4为label右侧变化的距离,长度为imageWidth,因为相对于按钮右侧位置没有变化,所以为正书;
    综上所述:
imageOffsetXLeft  = labelWidth + pading;
titleOffsetXLeft = -imageWidth;

如果contentHorizontalAlignment == UIControlContentHorizontalAlignmentRight的时候稍微有些不同,上图button的content在添加了间距pading后其实是有变化的,左对齐的时候,右侧是多处一个pading的宽度。位置变化参照物是左面,如果是右对齐,图片要变化一下成如下:


开发小控件-UIButton图片位置imageEdgeInsets&titleEdgeInsets_第4张图片
屏幕快照 2018-08-31 上午11.53.42.png

线2为image右侧变化,长度为labelWidth,因为相对于label左侧位置改变,所以为负数;
线4为label右侧变化,长度为imageWidth+pading,因为相对于按钮右侧位置没有变化,所以为正数;

imageOffsetXRight = -(labelWidth);
titleOffsetXRight = imageWidth + pading ;

当contentHorizontalAlignment == UIControlContentHorizontalAlignmentCenter的时候。线乱的一P,将就看吧。


开发小控件-UIButton图片位置imageEdgeInsets&titleEdgeInsets_第5张图片
屏幕快照 2018-08-31 下午2.24.50.png

原理同上,所以

imageOffsetXLeft  = labelWidth + pading / 2;
imageOffsetXRight = -imageOffsetXLeft;
titleOffsetXRight = (imageWidth + pading / 2);
titleOffsetXLeft = -titleOffsetXRight;

图片在上和在下原理一致。

你可能感兴趣的:(开发小控件-UIButton图片位置imageEdgeInsets&titleEdgeInsets)