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

96
生如夏花逝如秋叶
0.2 2016.08.12 10:44* 字数 407
先准备一张图片添加到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);
}

运行效果:

我iOS笔记
Web note ad 1