iOS UIButton之UIEdgeInsets详解

今天在写按钮的时候，需要调整图片和文字的位置。UIButton的默认是图片在左侧，文字在右侧。需求是文字在左侧，图片在右侧。进而就研究了一下UIEdgeInsets

UIEdgeInsets

我们先来看苹果官方文档对其的解释

typedef struct __attribute__((objc_boxable)) UIEdgeInsets {
    CGFloat top, left, bottom, right;  // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;

大致意思：对每条边向内方向的偏移量，可以为正值（向内偏移）也可以为负值（向外偏移）。

UIButton 设置UIEdgeInsets

先来做个实验，程序是最好的解释工具

 UIButton *textBtn0 = [[UIButton alloc]initWithFrame:CGRectMake(100, 10, 200, 50)];
    [textBtn0 setTitle:@"文sssssss" forState:UIControlStateNormal];
    textBtn0.backgroundColor = [UIColor redColor];
    [self.view addSubview:textBtn0];
    NSSLog(@"--textBtn0---titleLabel-%@-imageView-%@",NSStringFromCGRect(textBtn0.titleLabel.frame),NSStringFromCGRect(textBtn0.imageView.frame));
    
    
    UIButton *textBtn1 = [[UIButton alloc]initWithFrame:CGRectMake(100, 100, 200, 50)];
    [textBtn1 setImage:HSS_IMAGE(@"chat_fasongshibai") forState:UIControlStateNormal];
    textBtn1.backgroundColor = [UIColor redColor];
    [self.view addSubview:textBtn1];
    NSSLog(@"--textBtn1---titleLabel-%@-imageView-%@",NSStringFromCGRect(textBtn1.titleLabel.frame),NSStringFromCGRect(textBtn1.imageView.frame));

    
    
    UIButton *textBtn2 = [[UIButton alloc]initWithFrame:CGRectMake(100, 170, 200, 50)];
    [textBtn2 setImage:HSS_IMAGE(@"chat_fasongshibai") forState:UIControlStateNormal];
    [textBtn2 setTitle:@"文sssssss" forState:UIControlStateNormal];
    textBtn2.backgroundColor = [UIColor redColor];
    [self.view addSubview:textBtn2];
    
    NSSLog(@"--textBtn2--titleLabel--%@-imageView-%@",NSStringFromCGRect(textBtn2.titleLabel.frame),NSStringFromCGRect(textBtn2.imageView.frame));

    UIButton *textBtn3 = [[UIButton alloc]initWithFrame:CGRectMake(100, 270, 200, 50)];
       [textBtn3 setImage:HSS_IMAGE(@"chat_fasongshibai") forState:UIControlStateNormal];
       [textBtn3 setTitle:@"文sssssss" forState:UIControlStateNormal];
       textBtn3.backgroundColor = [UIColor redColor];
       [self.view addSubview:textBtn3];
    
    [textBtn3 setTitleEdgeInsets:UIEdgeInsetsMake(0, -textBtn3.imageView.frame.size.width, 0, textBtn3.imageView.frame.size.width)];
    [textBtn3 setImageEdgeInsets:UIEdgeInsetsMake(0, textBtn3.titleLabel.frame.size.width, 0, -textBtn3.titleLabel.frame.size.width)];
NSSLog(@"-----textBtn3--titleLabel-%@-imageView-%@",NSStringFromCGRect(textBtn3.titleLabel.frame),NSStringFromCGRect(textBtn3.imageView.frame));

然后运行程序看运行结果：

EmailSessionListViewController.m:48	--textBtn0---titleLabel-{{58.666666666666657, 14}, {83, 22}}-imageView-{{58.333333333333336, 25}, {0, 0}}
EmailSessionListViewController.m:55	--textBtn1---titleLabel-{{0, 0}, {0, 0}}-imageView-{{90, 15}, {20, 20}}
EmailSessionListViewController.m:65	--textBtn2--titleLabel--{{68.666666666666657, 14}, {83, 22}}-imageView-{{48.333333333333336, 15}, {20, 20}}
EmailSessionListViewController.m:75	-----textBtn3--titleLabel-{{68.666666666666657, 14}, {83, 22}}-imageView-{{131.33333333333334, 15}, {20, 20}}

对比textBtn0和textBtn2的 titleLabel.frame 会发现文字右移了imageView的宽度的一半。我是经过多次测试的。

对比textBtn0和textBtn3的 imageView.frame 会发现文字左移titleLabel的宽度的一半。我是经过多次测试的。

那么如此我是不是就可以这样写来调整代码：

 UIButton *textBtn4 = [[UIButton alloc]initWithFrame:CGRectMake(100, 340, 200, 50)];
           [textBtn4 setImage:HSS_IMAGE(@"chat_fasongshibai") forState:UIControlStateNormal];
           [textBtn4 setTitle:@"文sssssss" forState:UIControlStateNormal];
           textBtn4.backgroundColor = [UIColor redColor];
           [self.view addSubview:textBtn4];
        
        [textBtn4 setTitleEdgeInsets:UIEdgeInsetsMake(0, -textBtn4.imageView.frame.size.width/2, 0, 0)];
        [textBtn4 setImageEdgeInsets:UIEdgeInsetsMake(0, textBtn4.titleLabel.frame.size.width/2, 0, 0)];
    NSSLog(@"-----textBtn4--titleLabel-%@-imageView-%@",NSStringFromCGRect(textBtn4.titleLabel.frame),NSStringFromCGRect(textBtn4.imageView.frame));

结果输出如下：

EmailSessionListViewController.m:85	-----textBtn4--titleLabel-{{68.666666666666657, 14}, {83, 22}}-imageView-{{69.333333333333329, 15}, {20, 20}}

整体效果如下

对比textBtn0 textBtn1 textBtn2 textBtn4发现，textBtn4这样写回不到对应的中间位置？为什么呢？这个小编也不知道，如果有人知道，请赐教。
但是textBtn3这样设置就可以的。

我在看别人的博客，这个博主也有解释，我看了半天还是不明白。如果有人明白，请告知。谢谢