UIButton 调整title和image的位置

想深入了解 UIButton 的image 和 titleLabel的关系必须知道的原理

（1）

Button有两个属性：titleEdgeInsets和imageEdgeInsets，通过设置这两个，就可以实现所有需要的Button的样式，如：image在上、image在下、image在左、image在右。

（2）

1. titleEdgeInsets是titleLabel相对于其上下左右的inset，跟tableView的contentInset是类似的；
2. 如果只有title，那titleLabel的 上下左右 都是 相对于Button 的；
3. 如果只有image，那imageView的 上下左右 都是 相对于Button 的；

4. 如果同时有image和label，那image的 上下左 是 相对于Button 的，右 是 相对于label 的；
   label的 上下右 是 相对于Button的， 左 是 相对于label 的。

（3） 获取image的宽度和高度，获取titleLabel的宽度和高度

 // 1. 得到imageView和titleLabel的宽、高
    CGFloat imageWith = self.imageView.frame.size.width;
    CGFloat imageHeight = self.imageView.frame.size.height;

    CGFloat labelWidth = 0.0;
    CGFloat labelHeight = 0.0;
    if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
        // 由于iOS8中titleLabel的size为0，用下面的这种设置
        labelWidth = self.titleLabel.intrinsicContentSize.width;
        labelHeight = self.titleLabel.intrinsicContentSize.height;
    } else {
        labelWidth = self.titleLabel.frame.size.width;
        labelHeight = self.titleLabel.frame.size.height;
    }

- (void)createButtonOne{

    /*

           (1)button设置了image和title后都在button的中间

          */

     UIButton * button = [[UIButtonalloc]initWithFrame:CGRectMake(10, 100, width_screen -100 , 60)];         button.titleLabel.adjustsFontSizeToFitWidth = YES;

   button.backgroundColor = [UIColor greenColor];

  [button setImage:[UIImage imageNamed:@"my_navigationicon"]forState:UIControlStateNormal];

  [button setTitle:@"立即导航" forState:UIControlStateNormal];

  [self.view addSubview:button];

  CGFloat imageWidth = button.imageView.frame.size.width;

  CGFloat imageHeight = button.imageView.frame.size.height;

  CGFloat labelWidth = 0.0;

  CGFloat labelHeight = 0.0;

  if([UIDevice currentDevice].systemVersion.floatValue > 8){

       labelWidth = button.titleLabel.intrinsicContentSize.width;

       labelHeight = button.titleLabel.intrinsicContentSize.height;

    }else{

        labelWidth = button.titleLabel.frame.size.width;

        labelHeight = button.titleLabel.frame.size.height;

    }

    //image的尺寸 35*40.  button 的高度是60   image 居中  Top：（60 - 20 ）/2     image 要距离左侧15

    //image在右侧 title在左侧

//    button.imageEdgeInsets = UIEdgeInsetsMake(0,labelWidth,0,-labelWidth);

//    button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWidth, 0, imageWidth)

    //image在上 title在下

//    button.imageEdgeInsets = UIEdgeInsetsMake(-imageHeight/2, labelWidth/2, imageHeight/2, -labelWidth/2);

//    button.titleEdgeInsets = UIEdgeInsetsMake(labelHeight/2, -imageWidth/2, -labelHeight/2, imageWidth/2);

    //button的宽度  减去  image的宽度  和  titleLabel的宽度

    /*         设置  图片距离左侧的距离是 15  然后文字紧挨着图片

      （1）计算出 helfWidth  =（整个按钮的宽度 - 图片和label的宽度）/ 2  的出的是是图片距离button左侧的距离

      （2）如果要让图片距离按钮的左侧 15，需要作出的偏移量，就是计算出img想左侧偏移的距离。这种计算以img的中心点为参照也好，以左侧或者右侧为参照都是可以的。需要明白的是，这里只是一个参照值

     */

//    成功的图片左侧距离15，title紧挨着图片

    CGFloat leftWidth = (button.frame.size.width - imageWidth - labelWidth)/2;

    button.imageEdgeInsets = UIEdgeInsetsMake(0, -(leftWidth-imageWidth/2-15), 0, leftWidth - 15 - imageWidth/2);

    button.titleEdgeInsets = UIEdgeInsetsMake(0, -(leftWidth-imageWidth-15), 0, leftWidth - 15 - imageWidth);

    //成功的图片在左侧距离15，title紧挨着图片

//    CGFloat leftWidth = (button.frame.size.width - imageWidth - labelWidth)/2;

//    button.imageEdgeInsets = UIEdgeInsetsMake(0, -(leftWidth-15), 0, leftWidth - 15);

//    button.titleEdgeInsets = UIEdgeInsetsMake(0, -(leftWidth-15), 0, leftWidth - 15);   

}

参考

1. UIButton的titleEdgeInsets属性和imageEdgeInsets属性实现图片文字按要求排列，这篇博客里介绍了上面的原理，建议仔细看，理解之后就可以明白
2. UIButton 的 imageEdgeInsets 和 titleEdgeInsets，这篇博客末尾有github地址，我写的时候没有理解原理，所以设置的时候，参照了他的代码
3. 如何布局包含Image和Title的UIButton，这篇是我最开始参考的，只有代码，没有原理