通过button的titleEdgeInsets和imageEdgeInsets快速实现上下布局

应用场景：

开发中经常需要设置点击控件时要求图片文字同时高亮或者变色，这种情况通常有两种方式设置，一种是使用两个控件监听点击事件去改变这两个控件的状态，另外也可以使用button去改变其内部TitleLabel和ImageView的位置，实现上下和左右的布局，其中左右布局是系统默认的方式，上下布局需要自己去操作布局。

设置button内部控件布局的两种方式

一、通过自定义button控件，重写其中的布局方法

- (CGRect)backgroundRectForBounds:(CGRect)bounds{
    NSLog(@"%f----%f",bounds.size.width,bounds.size.height);
    return bounds;
}

- (CGRect)contentRectForBounds:(CGRect)bounds{
    NSLog(@"%f======%f",bounds.size.width,bounds.size.height);
    return bounds;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect{
    NSLog(@"%f----%f----%f----%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
    CGRect rect = CGRectMake(50, contentRect.origin.y+25, contentRect.size.width-50, 30);
    return rect;
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect{
    NSLog(@"%f====%f====%f====%f",contentRect.origin.x,contentRect.origin.y,contentRect.size.width,contentRect.size.height);
    CGRect rect = CGRectMake(10, contentRect.origin.y+25, 30, 30);

    return rect;
}

方法就不介绍了每个方法的方法名描述的都很清楚，你只需设置想要的frame和bounds返回就可以了。

二、第二种方式是通过button内部控件的EdgeInsets属性来设置的，这个属性也很常见可以设置其上左下右的值来改变button内部label和ImageView的布局

    button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
    button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);

我这里提供了一个计算方法可以很快的设置button内部控件的上下布局

计算代码

   ///计算button中心点imageview最大x的差
    CGFloat b1 = button.bounds.size.width/2.0-(button.imageView.frame.origin.x+button.imageView.bounds.size.width);
    ///button的label中心点减去上面的差值就是label的到button中心点的偏移量
    CGFloat b2 = button.titleLabel.bounds.size.width/2.0 -b1;
    ///计算imageview到button中心点的偏移量
    CGFloat b3 = button.bounds.size.width/2.0 - (button.imageView.frame.origin.x+button.imageView.bounds.size.width/2.0);
    button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
    button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);

Demo代码

   UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 120, 80)];
    button.backgroundColor = [UIColor yellowColor];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:12.0];
    [button setTitle:@"收藏" forState:UIControlStateNormal];
    [button setImage:[UIImage imageNamed:@"button-1"] forState:UIControlStateNormal];

    button.titleLabel.backgroundColor = [UIColor redColor];
    button.imageView.backgroundColor = [UIColor blueColor];
    
    ///计算button中心点imageview最大x的差
    CGFloat b1 = button.bounds.size.width/2.0-(button.imageView.frame.origin.x+button.imageView.bounds.size.width);
    ///button的label中心点减去上面的差值就是label的到button中心点的偏移量
    CGFloat b2 = button.titleLabel.bounds.size.width/2.0 -b1;
    ///计算imageview到button中心点的偏移量
    CGFloat b3 = button.bounds.size.width/2.0 - (button.imageView.frame.origin.x+button.imageView.bounds.size.width/2.0);
    button.imageEdgeInsets = UIEdgeInsetsMake(0, b3, 20, -b3);
    button.titleEdgeInsets = UIEdgeInsetsMake(25, -b2, -25, b2);
    
    [self.view addSubview:button];
}

这里只是计算了imageView和Label的居中 具体的高度没有计算，所以大家使用时可以自己调整一下高度问题，如果button宽度显示不下可以调整b2的大小例如两边减去某个值。

注意点：

使用上面的计算代码时一定要先设置好图片和标题，不要先计算后设置，否则拿到的iamgeview和label的size可以为nil导致布局失败。