iOS Button图文混排的四种实现方式

Demo：ButtonAlignmentDemo

方法一：设置 imageEdgeInsets、titleEdgeInsets

思路：先计算出原始距离 space，在此基础上将内置控件移位，如果对间隔有需求，记得最后调整 contentEdgeInsets

• 左文右图 (没有间距需求可以直接设置 semanticContentAttribut 属性)

  • 将文字和图片移动相应的位置
  • 如果有间距需要，那么记得最后调整 contentEdgeInsets

• 上下排布

  • 先将图片和文字都水平移动至中间
  • 将图片和文字各自纵向移动，移动距离是 另一控件.height*0.5，方向相反
  • 有间距需要，则图片和文字各自上下移动，移动距离是 间距*0.5，方向相反
  • 调整 contentEdgeInsets

---

方法二：利用 NSAttributedString 实现

思路：image + \n + title

步骤：
1> 利用 NSTextAttachment 在属性字符串上添加图片

NSTextAttachment *attachment = [NSTextAttachment new];
attachment.image = image;
attachment.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
NSAttributedString *imgAttStr = [NSAttributedString attributedStringWithAttachment:attachment];

2> 使用 \n 实现上下分行

NSMutableAttributedString *attr = [[NSMutableAttributedString alloc] init];
[attr appendAttributedString:imgAttStr];
// \n
[attr appendAttributedString:[[NSAttributedString alloc] initWithString:@"\n"]];
// title
[attr appendAttributedString:[[NSAttributedString alloc] initWithString:title attributes:attributes]];

3> 追加 paragraphStyle 设置行间距

NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
style.lineBreakMode = NSLineBreakByTruncatingTail;
style.lineSpacing = lineGap;
style.alignment = NSTextAlignmentCenter;
// ! 使用 addAttribute 追加属性，不要使用 setAttributes，会覆盖
[attr addAttribute:NSParagraphStyleAttributeName value:style range:NSMakeRange(0, attr.length)];

4> 构造 button，设置 titleLabel，使 label 可以接收 \n

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
// 设置 titleLabel 可接收 '\n'
btn.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
btn.titleLabel.textAlignment = NSTextAlignmentCenter;
[btn setAttributedTitle:attr.copy forState:UIControlStateNormal];

5> 如果图片要 resize的话，实现 resize方法

+ (UIImage *)resize:(UIImage *)image size:(CGSize)size {
    if (CGSizeEqualToSize(image.size, size)) return image;
    
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    CGImageAlphaInfo alpha = CGImageGetAlphaInfo(image.CGImage);
    BOOL hasAlpha = (alpha == kCGImageAlphaFirst ||
                     alpha == kCGImageAlphaLast ||
                     alpha == kCGImageAlphaPremultipliedFirst ||
                     alpha == kCGImageAlphaPremultipliedLast);
    UIGraphicsBeginImageContextWithOptions(rect.size, !hasAlpha, 0.0f);
    [image drawInRect:rect];
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

---

方法三：自定义 Button，重写rectForContentRect:方法

- (CGRect)titleRectForContentRect:(CGRect)contentRect;  
- (CGRect)imageRectForContentRect:(CGRect)contentRect;

具体实现可参考：
https://github.com/LQi2009/LQRelayoutButton/blob/master/LQRelayoutButton/obj_sub/LQRelayoutButton.m

---

方法四：自定义 Button，创建 my_imgView 和 my_titleLabel
最稳的实现方式，同时也是最费劲的方式。