简单自定义Button

Posted 2020-07-14 coderYDW

继承自UIButton的

首先我们要知道为什么要自定义Button，因为现有的Button无法满足我们要实现功能的要求

比如我们要给Button新添加一些属性的时候，如果写分类，就要研究一下进行时，显然这样没有添加一个子类来的痛快。

再有我们对按钮的内部标题和图片的布局不满意的时候也可以自定义，有人会使用使用titleEdgeInsert和imageEdgeInsert属性调整，这两个属性配合只能满足简单的要求，稍微复杂点就不行了。

如何添加一个子类：

首先要创建一个类继承自UIButton类

在头文件里面直接添加我们需要的属性

这样就可以在别处显示的调用了

那么要调整图片和文字的位置呢

这里提供两个方法,一个方法返回title的frame，一个返回image的frame

-(CGRect)titleRectForContentRect:(CGRect)contentRect{

    CGFloat titleW = 80;
    CGFloat titleH = 20;
    CGFloat titleX = 0;
    CGFloat titleY = 11;
    
    return CGRectMake(titleX, titleY, self.titleW, titleH);
}

-(CGRect)imageRectForContentRect:(CGRect)contentRect{

    CGFloat imageX = 85; 
    CGFloat imageY = 0;
    CGFloat imageW = 44; 
    CGFloat imageH = 44;

    return CGRectMake(imageX, imageY, imageW, imageH);
}

 这两个方法如果想要根据文字的内容来确定textLabel的大小的话就要进行计算了，计算方法如下

 //得到标题的宽和图片的大小
CGFloat titleW = [self.titleLabel.text boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18]} context:nil].size.width;

 

除了通过这两个方法外还可以通过layoutSubview方法来实现

注意一点，一定要调用父类的layoutSubview方法，这样父类就会先布局好两个控件的位置，我们就不需要管理图片和文字的宽高，当然如果需要的话也可以进行修改，如果不需要修改就直接拿到自身的宽高就可以了，我们可以通过改变xy的值来改变位置，这样就可以控制图片和文字显示位置了。

-(void)layoutSubviews{
    //一定要调用父类的方法
    [super layoutSubviews];

    //宽高和间距
    CGFloat width = self.bounds.size.width;
    CGFloat height = self.bounds.size.height;
    
    CGFloat margin = 5;
    //图片的宽高
    CGFloat imageW = self.imageView.image.size.width;
    CGFloat imageH = self.imageView.image.size.height;
    //标题的frame
    CGFloat titleW = self.titleLabel.bounds.size.width;
    CGFloat titleH = height;
    CGFloat titleX = (width - titleW - imageW - margin) / 2;
    CGFloat titleY = 0;
    
    self.titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH);
    //图片的xy
    CGFloat imageX = titleX + titleW + margin;
    CGFloat imageY = (height - imageH) / 2;
    
    self.imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);

}

如果想要在创建的同时设置按钮的一些属性，那么我们就可以重写如下方法

//使用代码创建按钮的时候会调用
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        [self setupProperties];
        
    }
    return self;
}

//使用storyboard或者xib创建按钮的时候会调用
- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        
        [self setupProperties];
        
    }
    return self;
}


- (void)setupProperties{

    //这里可以用来设置一些属性

}