在写代码的过程中,可能遇到很多button,但是布局并不是默认情况那样图片在左,文字在右的样式。
这个时候一般会有几种解决方案
1、把button拆分为一个只有图片的button,和一个label两个控件去实现,但是这样的话点击区域又要去做处理。
2、重写button的的两个方法
- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
一般来说这样也能解决,但是这样又很繁琐,复用性太差,不可能每次为了写个button就写个子类
3、利用TitleEdgeInsets和ImageEdgeInsets属性
如果是在xib画的,直接看着属性慢慢调
6ec56828-79bb-4bde-a410-7d5f0cec81e7.png
这样一般也能得到自己想要的效果。
但是试用了3方法之后,肯定会想想TitleEdgeInsets和ImageEdgeInsets是个什么东西，代码怎么实现的,设置的具体数值是什么含义，设置为多少是合适的。因此就开始研究两个属性，首先翻开了官方文档,虽然对他们有一些介绍,但是具体有意义的东西却没有发现。然后就网上找资料看看关于这两个属性，有很多博客内容。但是大致看了一些觉得还是没有讲清楚，于是自己写了个Demo去一探究竟。
首先可以确定的是TitleEdgeInsets和ImageEdgeInsets的初始值都是UIEdgeInsetsZero。按照许多博文的说法对于TitleEdgeInsets和ImageEdgeInsets的解释如下:
image的UIEdgeInsets属性的top，left，bottom都是相对于按钮的，right是相对于title；
title的UIEdgeInsets属性的top，bottom，right都是相对于按钮的，left是相对于image；
按照这个解释的话,那我们要对button内部label与imageView的位置做调整的话,就重新设置这两个属性就可以了。
对于top与bottom来说,因为是以button为参照,所以很直观的设置offset的时候,偏移会是top与bottom的累加效果。我一开始以为top与bottom是各自生效，但是根据我自己的实验,top与bottom并不是直观的相对偏移,它们两个是一起对label或者iamgeview在Y轴上偏移的总量产生影响,根据实验得出的一个初步结论是offsetY = (top - bottom)/2 .但是有一个现象就是即使offsetY值一样会使image(title)的center的移动距离一致，但是由于top和bottom设置的不同,可能会发生image(title)压缩或者放大的效果.
相比之下对于right与left的影响就更复杂了一下,我猜想是因为title与image会互相影响。这里也没探出个究竟。
如果在做布局变化的时候,保持top和bottom一直,left与right一致。这样比较能达到理想的效果。
833c44c2-682b-4a65-a0fa-79bf212963c7.png
做上下布局的时候top与bottom的变化，截图里用的labelHeight 其实用imageHeight也是没什么问题。
我建议还是要自己写个Demo去测试一下.反正我是没彻底弄明白这个位移的规律。
相关的博客特别多,但是我也没找到把原理说的特别清的。也算是给自己埋了个坑。。
实现Button文字(titleLabel)和图片(imageView)上下排列
注意的是这个博文里的例子是在sb里面画的button,因此是一个尺寸刚刚适合文字与图片的button,但是实际上你如果自己代码init然后赋值frame的话，可能尺寸并没那么恰好,可能button是有留白的。这个时候实验发现会有变形情况。
总之也是没搞清楚到底怎么回事。。。有点烦。
网友评论