UI设计的这种样子的按钮,以前时间紧遇到这种需求就用最low的方式imageview+label,最近稍微有点时间,实在是看不下去,抽空看了一下button的imageEdgeInsets和titleEdgeInsets属性,使用这两个属性的前提是button的size足以放下image和label,写一写个人总结
按钮默认显示的样子是image在左label在右,居中显示
实现需求的时候首先设置了contentHorizontalAlignment为UIControlContentHorizontalAlignmentRight,默认居中调整insets时好像有一点偏差,left跟right类似,大同小异
图1是设置UIControlContentHorizontalAlignmentRight还未调整insets
图2是调整过insets的样子
UIEdgeInsets有四个属性,top, left, bottom, right分别代表四个方向,箭头所示为正方向,远离箭头的方向为负方向
以图1为参照,从图2到图1
以图1为参照,从图2到图1
以图1为参照,从图2到图1
(重要说三遍...)
首先分析图片(向下的白色箭头为图片...)
image右边(right方向)向左移动了label宽度(26)距离,另一种描述方式,right向右为正向,image右边向右移动了-26;
image左边(left方向)向左移动了label宽度(26)距离;
所以 button.imageEdgeInsets = UIEdgeInsetsMake(0, 26, 0, -26);
分析label(红色定位)
label左边向右移动了image宽度(11)距离,另一种描述方式,left向左为正向,label左边向左移动了-11;
label右边向右移动了image宽度(11)距离;
所以 button.titleEdgeInsets = UIEdgeInsetsMake(0, -11, 0, 11);
设置完成之后就显示成图2的样子,这个是调整完成之后从后往前推出来的结论,但是按照正常的思路来讲应该将2设置参照,计算1移动到2的各种距离,但是这样计算的结果恰好是相反的。
以上为个人见解,欢迎批评指正!