重写UIButton使图片在上,文字在下

系统自带的UIButton的排版默认是图片在左,文字在右:
重写UIButton使图片在上,文字在下_第1张图片
但是开发中经常遇到需要把图片显示在上面,文字显示在下面的需求,如图:
重写UIButton使图片在上,文字在下_第2张图片
  • 此时,我们就需要重写UIbutton:
  • 首先创建一个类继承自UIButton
重写UIButton使图片在上,文字在下_第3张图片
  • 然后在LHLButton.m中重写- (void)layoutSubviews(我在项目中由于多次需要使用view的x,y,宽,高,所以我给UIView添加了分类,重写了setter,getter方法,我会另外写一篇文章单独介绍):
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    self.imageView.lhl_y = 0;
    self.imageView.lhl_centerX = self.bounds.size.width * 0.5;
    
    self.titleLabel.lhl_y = self.bounds.size.height - self.titleLabel.frame.size.height;
    [self.titleLabel sizeToFit];
    self.titleLabel.lhl_centerX = self.bounds.size.width * 0.5;
}
  • 如果是用的xib一定要在这里指定Button的类型:
重写UIButton使图片在上,文字在下_第4张图片
  • 在这里我只是重新计算了一下子控件的y值和center值,当然也可以全部重写,因为这里的需求比较简单,所以没必要全部重写.在重写的时候千万要注意,[self.titleLabel sizeToFit];这句一定要在计算self.titleLabel.lhl_centerX之前进行,否则在点击的时候会发生label位移的BUG:
    重写UIButton使图片在上,文字在下_第5张图片

你可能感兴趣的:(重写UIButton使图片在上,文字在下)