imageEdgeInsets、titleEdgeInsets详解

UIButton 上可以放置一个title和一个image，要说EdgeInsets的设置，首先我们要知道button默认布局是image在左，title在右，两者之间无间隙，整体居中对齐如下：

可以参考TestButtonEdgeController.xib文件中的设置：

为了便于大家直观的理解，我在xib上拖了一个button，绿色区域都是button的面积,已知常量如下：

    CGFloat btnW = 200;
    CGFloat btnH = 200;
    CGFloat imgW = 50;
    CGFloat titleW = 40;
    CGFloat marginW = 55;

　   if (btnW < imgW){图像会被压缩，文字不显示}

      if (btnW < imgW + titleW){图像正常显示，文字显示不全}

      if (btnW >=  imgW + titleW){图像和文字都居中显示，imageView在左，label在右，中间没有空隙}  

Tips:假如只是想换一下按钮图片文字位置，让文字在左图片在右 。不需要往下看，只需要做如下操作：

        button.imageEdgeInsets = UIEdgeInsetsMake(0, titleW, 0, -titleW)//设置图片位置
        button.titleEdgeInsets = UIEdgeInsetsMake(0, -(imgW + titleImgMargin), 0, (imgW + titleImgMargin))//设置文字位置  titleImgMargin为图片文字中间间隔

注意：titleImgMargin是文字跟图片间的间隔，imgW是图片的实际宽度，也就是UI切图出来的图片宽度，并不是你想要图片的宽度

btnW应该大于imgW+titleW+titleImgMargin之和，否则会造成文字无法显示完全

此布局后的文字图片有可能会直接撑出按钮区域，但是超出部分不可点击,所以可以尽量将btnW设置的大一些

1、button单个元素布局

只有一个title或者image,暂时不考虑垂直方向。仅有title的情况下，title默认居中显示：（假设我们要让title据左10的宽度）

    button.titleEdgeInsets =UIEdgeInsetsMake(0,10,0, btnW -10 - titleW);

仅有image的情况下，image默认居中显示：（假设我们要让image据右20的宽度）

    button.imageEdgeInsets =UIEdgeInsetsMake(0, btnW -20 - imgW, 0,20);

也可以设置为：

    button.imageEdgeInsets =UIEdgeInsetsMake(0, btnW -20*2 - imgW,0,0);--right正值就相当于left减去改值，负值就相当于left加上改值，换句话说我们可以通过仅设置一个变量来实现button位置偏移

设置后显示结果如下：

2、水平布局

当image和title都存在的情况下，我们想要自定义布局方式

2.1左对齐布局方式

我们首先对button做如下设置：

    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;

（代码跟xib设置方式选择一种就可以了）

设置完成显示如下:

(由图可知image据左0,title据左为imgW)

这时候我们来设置title据左20，image居右20 （效果间图2.1）

    button.imageEdgeInsets =UIEdgeInsetsMake(0,btnW - 20 - imgW,0,20);---与原始位置无关

这时候我们来设 要移动X, X+ imgW(原始位置) = 20，所以X = 20 - imgW

    button.titleEdgeInsets =UIEdgeInsetsMake(0,20 - imgW, 0,0); ---为什么要减去imgW，看图可知原始X位置是imgW

2.2默认居中布局方式

我们再来看看当button默认的居中布局时我们应该怎么办：

    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;

这时候我们来设置image据左20，title居右20：

button.imageEdgeInsets = UIEdgeInsetsMake(0, 20, 0, btnW - 20 - imgW); --与原始位置无关

计算title的时候，我们要考虑刚开始title右边离button右边是originMarginR  =  (btnW - imgW - titleW)/2 = 55;

我们现在调整为据右MarginR :20，就要往右边移（originMarginR - MarginR ）= 35的宽度，由于居中布局*2=70

    button.titleEdgeInsets = UIEdgeInsetsMake(0,70, 0, 0);

最后显示结果如下：

（图2.1）

3、垂直方向上的偏移

3.1 top对齐布局

首先设置button布局从top开始排列：

    button.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;

然后我们可以看到image与title据上都是0，这时候要设置title据上20，image据下20：

    button.imageEdgeInsets = UIEdgeInsetsMake(btnH - 20 - imgW, 20, 20, btnW - 20 - imgW);
    button.titleEdgeInsets = UIEdgeInsetsMake(20,70, 0, 0);

3.2 默认垂直居中对齐布局

设置button布局从居中开始排列：

    button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

然后我们可以看到image与title据上都是居中显示，这时候要设置image据上20，title据下20：

    button.imageEdgeInsets = UIEdgeInsetsMake(20, 20, btnH - 20 - imgW, btnW - 20 - imgW);//据上20
    //刚开始据下Y=(btnH - titleH)/2 = 90,现在调整为据下20，为70*2 = 140
    button.titleEdgeInsets = UIEdgeInsetsMake(0,(marginW - 20) * 2, 0, 0);

显示效果如下：

到此我们基本可以做到对button中title和image位置的完全定制了，总结一下：

image设置是比较独立的，不管是水平方向还是垂直方向，只要按照需要的位置计算就可以了，但是title会受原始位置以及布局方式的影响，但是我们要记住，假如默认的居中排列方式，所有计算出来位置要*2

最后透露一个比较猥琐的方法，假如UI一定要按钮跟文字之间多一点间隙，我们可以不必计算，之间在文字前面加适当空格