iOS 改变UIButton按钮的内容图片和内容文本的相对位置

先准备一张图片添加到Assets.xcassets中

常规按钮上图片内容和文本内容的位置

通过titleLabel.frame和imageView.frame来修改图片内容和文本内容的位置(不会成功)

- (void)viewDidLoad {
  [super viewDidLoad];
  
  UIButton *greenBt = [UIButton buttonWithType:UIButtonTypeCustom];
  
  greenBt.frame = CGRectMake(0, 0, 150, 70);
  
  greenBt.center = CGPointMake(self.view.center.x, 200);
  
  greenBt.backgroundColor = [UIColor grayColor];
  
  [greenBt setTitle:@"按钮二" forState:UIControlStateNormal];
  
  [greenBt setImage:[UIImage imageNamed:@"icon"] forState:UIControlStateNormal];
  
  greenBt.imageView.backgroundColor = [UIColor redColor];
  
  greenBt.titleLabel.backgroundColor = [UIColor purpleColor];
  
  // 改变位置
  greenBt.titleLabel.frame = CGRectMake(0, 0, 100, 70);
  
  greenBt.imageView.frame = CGRectMake(100, 0, 70, 70);
  
  [self.view addSubview:greenBt];

}

运行效果:

注意：在按钮外面修改的尺寸，按钮的内部都会覆盖掉

正确修改按钮图片内容和文本内容的位置的两种方法

创建一个MyButton的类继承UIButton

• 通过重新titleRectForContentRect: 和 imageRectForContentRect:

#pragma mark - 方法一
/*
  重新titleRectForContentRect: 和 imageRectForContentRect: 
  这两个方法修改文本内容位置和图片内容位置
*/
　　
// 修改文本内容位置
- (CGRect)titleRectForContentRect:(CGRect)contentRect{
  　　
  return CGRectMake(0, 0, 100, 70);
}
　　
// 修改图片内容位置
- (CGRect)imageRectForContentRect:(CGRect)contentRect{
  　　
  return CGRectMake(100, 0, 70, 70);
}
　　

• 通过重写layoutSubviews

#pragma mark - 方法二
　　
- (void)layoutSubviews{
  　　
  [super layoutSubviews];
  　　
  // 从新布局文本内容titleLabel
  self.titleLabel.frame = CGRectMake(0, 0, 100, 70);
  　　
  // 从新布局图片内容imageView
  self.imageView.frame = CGRectMake(100, 0, 70, 70);
  　　
}
　　

在ViewController 使用

- (void)viewDidLoad {
  [super viewDidLoad];
  　　
  MyButton *greenBt = [MyButton buttonWithType:UIButtonTypeCustom];
  　　
  greenBt.frame = CGRectMake(0, 0, 150, 70);
  　　
  greenBt.center = CGPointMake(self.view.center.x, 200);
  　　
  greenBt.backgroundColor = [UIColor grayColor];
  　　
  [greenBt setTitle:@"按钮二" forState:UIControlStateNormal];
  　　
  [greenBt setImage:[UIImage imageNamed:@"icon"] forState:UIControlStateNormal];
  　　
  greenBt.imageView.backgroundColor = [UIColor redColor];
  　　
  greenBt.titleLabel.backgroundColor = [UIColor purpleColor];
  　　
  [self.view addSubview:greenBt];
　　
}

运行效果:

运行效果看起来有点丑

重写initWithFrame方法优化MyButton效果

- (instancetype)initWithFrame:(CGRect)frame{
  
  self = [super initWithFrame:frame];
  
  if (self != nil) {
      
      // 设置文本居中
      self.titleLabel.textAlignment = NSTextAlignmentCenter;
      
      // 设置图片的内容模式
      self.imageView.contentMode = UIViewContentModeCenter;
  }
  
  return self;
}

运行效果：

当同时使用重写titleRectForContentRect: 、 imageRectForContentRect: 方法和重写layoutSubviews方法时

#pragma mark - 方法一
/*
  重新titleRectForContentRect: 和 imageRectForContentRect: 
  这两个方法修改文本内容位置和图片内容位置
*/

// 修改文本内容位置
- (CGRect)titleRectForContentRect:(CGRect)contentRect{
  
  return CGRectMake(0, 0, 100, 70);
}

// 修改图片内容位置
- (CGRect)imageRectForContentRect:(CGRect)contentRect{
  
  return CGRectMake(100, 0, 70, 70);
}

#pragma mark - 方法二

- (void)layoutSubviews{
  
  [super layoutSubviews];
  
  // 从新布局文本内容titleLabel
  self.titleLabel.frame = CGRectMake(70, 0, 100, 70);
  
  // 从新布局图片内容imageView
  self.imageView.frame = CGRectMake(0, 0, 70, 70);
  
}

运行效果:

最终运行的效果显示，文本内容和图片内容的位置是按照layoutSubviews中设置的数据显示的，说明layoutSubviews是最后执行的方法。打印它们执行的顺序：

-[MyButton titleRectForContentRect:]
-[MyButton imageRectForContentRect:]
-[MyButton layoutSubviews]

对其他控件内容位置不满意也可以在layoutSubviews修改内容布局。

MyButton 类的相关代码

MyButton.h 文件

#import <UIKit/UIKit.h>

@interface MyButton : UIButton

@end

MyButton.m 文件

#import "MyButton.h"

@implementation MyButton


- (instancetype)initWithFrame:(CGRect)frame{
  
  self = [super initWithFrame:frame];
  
  if (self != nil) {
      
      // 设置文本居中
      self.titleLabel.textAlignment = NSTextAlignmentCenter;
      
      // 设置图片的内容模式
      self.imageView.contentMode = UIViewContentModeCenter;
  }
  
  return self;
}

#pragma mark - 方法一
/*
  重新titleRectForContentRect: 和 imageRectForContentRect: 
  这两个方法修改文本内容位置和图片内容位置
*/

// 修改文本内容位置
- (CGRect)titleRectForContentRect:(CGRect)contentRect{
  
  NSLog(@"%s",__func__);
  
  return CGRectMake(0, 0, 100, 70);
}

// 修改图片内容位置
- (CGRect)imageRectForContentRect:(CGRect)contentRect{

  NSLog(@"%s",__func__);

  return CGRectMake(100, 0, 70, 70);
}

#pragma mark - 方法二

- (void)layoutSubviews{
  
  [super layoutSubviews];
  
  NSLog(@"%s",__func__);

  // 从新布局文本内容titleLabel
  self.titleLabel.frame = CGRectMake(70, 0, 100, 70);
  
  // 从新布局图片内容imageView
  self.imageView.frame = CGRectMake(0, 0, 70, 70);
  
}

@end

修改Button的内边距

按钮的内边距是指图片与文本之间的间距，图片与按钮边缘的间距，文本与按钮边缘的边距。

默认按钮形状：

设置按钮内边距的方法

• 在xib中之间设置

  
  

  • 设置content边距

    
    

  • 设置title边距

    
    

  • 设置image边距

    
    

content、title、image三个的边距可以同时使用。

• 通过代码改变间距:

@interface ViewController ()
//xib中拖线的按钮
@property (weak, nonatomic) IBOutlet UIButton *edgeBt;
　　
@end
　　
@implementation ViewController
　　
- (void)viewDidLoad {
  [super viewDidLoad];

  _edgeBt.imageView.backgroundColor = [UIColor redColor];
  
  _edgeBt.titleLabel.backgroundColor = [UIColor purpleColor];
  
  /*
    UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
   */
  //内容边距
  _edgeBt.contentEdgeInsets = UIEdgeInsetsMake(-20, 0, 0, 0);

  //文本边距
  _edgeBt.titleEdgeInsets = UIEdgeInsetsMake(0, 30, 0, 0);
  
  //文本边距
  _edgeBt.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 20);
}

运行效果: