iOS 改变UIButton按钮的内容图片和内容文本的相对位置和内边距 - Go语言中文社区

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);
}

运行效果:

版权声明：本文来源简书，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.jianshu.com/p/e8e20e232305
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2020-01-08 08:05:55
  • 阅读 ( 1266 )
  • 分类：

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！