iOS View自定义窍门——UIButton实现上显示图片，下显示文字

本文链接：https://blog.youkuaiyun.com/autom_lishun/article/details/78424276

本文介绍两种实现UIButton内图片和文字垂直居中且保持间距的方法：一是通过自定义类继承UIButton并重写layoutSubviews方法；二是使用verticalImageAndTitle方法调整imageView与titleLabel的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种

自定义类继承UIButton，然后
-(void)layoutSubviews
{
    [super layoutSubviews];
    CGFloat midX = self.frame.size.width / 2;
    CGFloat midY = self.frame.size.height/ 2 ;
    self.titleLabel.center = CGPointMake(midX, midY + 15);
    self.imageView.center = CGPointMake(midX, midY - 10);

}
第二种
- (void)verticalImageAndTitle:(CGFloat)spacing
{
    self.titleLabel.backgroundColor = [UIColor greenColor];
    CGSize imageSize = self.imageView.frame.size;
    CGSize titleSize = self.titleLabel.frame.size;
    CGSize textSize = [self.titleLabel.text sizeWithFont:self.titleLabel.font];
    CGSize frameSize = CGSizeMake(ceilf(textSize.width), ceilf(textSize.height));
    if (titleSize.width + 0.5 < frameSize.width) {
        titleSize.width = frameSize.width;
    }
    CGFloat totalHeight = (imageSize.height + titleSize.height + spacing);
    self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight - imageSize.height), 0.0, 0.0, - titleSize.width);
    self.titleEdgeInsets = UIEdgeInsetsMake(0, - imageSize.width, - (totalHeight - titleSize.height), 0);

}
效果如下。imageView和label的大小都是根据内容确定的，而且二者的整体始终在中央，上下的间距可以设置。使用的时候要保证Button的宽度一定要大于等于图片的宽