UIButton 的edgeInsets研究

UIButton内有两个控件titleLabel和imageView,可以用来显示一个文本和图片,这里的图片区别于背景图片。给UIButton设置了title和image后,它们会图片在左边,文本在图片右边显示。它们两个做为一个整体依赖于button的
contentHorizontalAlignment居左居右或居中显示。(默认是居中)

  1. 当button.width < image.width时,只显示被压缩后的图片,图片是按fillXY的方式压缩。

  2. 当button.width > image.width,且 button.width < (image.width + text.width)时,图片正常显示,文本被压缩。

  3. 当button.width > (image.width + text.width),两者并列默认居中显示,可通过button的属性contentHorizontalAlignment改变对齐方式。

  4. 想两改变两个子控件的显示位置,可以分别通过setTitleEdgeInsets和setImageEdgeInsets来实现。 需要注意的是,对titleLabel和imageView设置偏移,是针对它当前的位置起作用的,并不是针对它距离button边框的距离的。
    看到网上很多说 UIEdgeInsetsMake ( CGFloat top, CGFloat left, CGFloat bottom, CGFloat right ); 构造出,分别表示其中的内容/标题/图片离各边的距离。刚开始搞的很郁闷不知道为什么总是设置不对。可能是我理解错了吧,需要有空在看一下官方文档了解一下UIEdgeInsetsMake

当第三种情况的时候,button的contentHorizontalAlignment不同,我们设置UIEdgeInsetsMake的值也是不一样的

button:width=150 image:width=24 label:width=102

1.button.contentHorizontalAlignment=UIControlContentHorizontalAlignmentCenter;时 image离左边的距离为(button.width-image.width-label.width)/2 = 12, 那么我们设置
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 0)];其实图片只向左移了6。
当[btn setImageEdgeInsets:UIEdgeInsetsMake(0, -24, 0, 0)];或
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, -12, 0, 12)];
图片才向左移了12
所以当button的对齐方式为居中时,对应方向偏移的距离要乘2;

UIButton 的edgeInsets研究_第1张图片
UIEdgeInsetsMake(0, -12, 0, 0)
UIButton 的edgeInsets研究_第2张图片
UIEdgeInsetsMake(0, -12, 0, 12)

2.button.contentHorizontalAlignment=UIControlContentHorizontalAlignmentLeft;时 image离左边的距离为0,label离左边的距离为image.width=24;
设置[btn setImageEdgeInsets:UIEdgeInsetsMake(0, 24, 0, 0)];
[btn setTitleEdgeInsets:UIEdgeInsetsMake(0, 24, 0, 0)];
图片和文字都正确的向右移动了24距离,而不用乘2

UIButton 的edgeInsets研究_第3张图片
UIControlContentHorizontalAlignmentLeft
UIButton 的edgeInsets研究_第4张图片
btn setImageEdgeInsets:UIEdgeInsetsMake(0, 24, 0, 0)

注意:位置的偏移是按最初的原始坐标来算的,比如情况2图片的原始坐标为(0,0),title的原始坐标为(24,0),偏移一次过后第二次偏移也是按照那个原始坐标来算,而不是第一次偏移后的那个坐标

我简单了写了个uibutton的分类,能简单的设置图片离左边的距离,和设置文字居中。
github:UIButtonDemo

你可能感兴趣的:(UIButton 的edgeInsets研究)