iOS中UILabel的深度定制之图文居中

背景

效果图

如果要实现图中所示效果，需要解决两个问题

• 图片和文字居中
• 文字如何居于 label 中间

因此笔者通过以下两步，解决：

//图片和文字居中
+(NSAttributedString *)grabStatusString {
    NSMutableAttributedString *attri2 = [[NSMutableAttributedString alloc] init];
    // 添加表情
    NSTextAttachment *attch = [[NSTextAttachment alloc] init];
    attch.image = [UIImage imageNamed:@"ic_grab_gou_green"];
    
    attch.bounds = CGRectMake(1, 1, attch.image.size.width * 1.1, attch.image.size.height * 1.1);
    NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
    [attri2 insertAttributedString:string atIndex:0];
    //文字
    NSDictionary *style1 = [LPDAppStyle attributesWithFont:FONT(11) color:COLOR(FFF)];
    NSMutableDictionary *resultStyle = [NSMutableDictionary dictionaryWithDictionary:style1];
    
    NSString *statusText = @" 已取餐";
    NSAttributedString *statusAttriString = [[NSAttributedString alloc] initWithString:statusText attributes:resultStyle];
    [attri2 appendAttributedString:statusAttriString];
    return attri2;
}

以及

//文字如何居于 label 中间
-(void)drawTextInRect:(CGRect)rect {
    // inset 的意思 是相对u于以前的，以前相对于各个方向是0，那么如果想要改变，则需要 加 或者减
    UIEdgeInsets insets = {-1, 2, 2, 2};
    [super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];
}

但人工的计算太麻烦，笔者最终找到如下方案：

最终解决方案：

+(NSAttributedString *)grabStatusString {
    NSMutableAttributedString *attri2 = [[NSMutableAttributedString alloc] init];
    // 添加表情
    NSTextAttachment *attch = [[NSTextAttachment alloc] init];
    attch.image = [UIImage imageNamed:@"ic_grab_gou_green"];
    
    attch.bounds = CGRectMake(1, (FONT(11).capHeight - attch.image.size.height * 1.1)/2, attch.image.size.width * 1.1, attch.image.size.height * 1.1);
    NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
    [attri2 insertAttributedString:string atIndex:0];
    //文字
    NSDictionary *style1 = [LPDAppStyle attributesWithFont:FONT(11) color:COLOR(FFF)];
    NSMutableDictionary *resultStyle = [NSMutableDictionary dictionaryWithDictionary:style1];
    
    NSString *statusText = @" 已取餐";
    NSAttributedString *statusAttriString = [[NSAttributedString alloc] initWithString:statusText attributes:resultStyle];
    [attri2 appendAttributedString:statusAttriString];
    return attri2;
}

其中关键的一句代码是：

attch.bounds = CGRectMake(1, (FONT(11).capHeight - attch.image.size.height * 1.1)/2, attch.image.size.width * 1.1, attch.image.size.height * 1.1);

中的：

 (FONT(11).capHeight - attch.image.size.height * 1.1)/2

最后笔者告诉大家代码中的几个宏定义：

#define COLOR(value) [UIColor colorWithHexString:@ #value]
#define TOP_HEIGHT (((UINavigationController *)([UIApplication sharedApplication].delegate.window.rootViewController)).navigationBar.frame.size.height + [[UIApplication sharedApplication] statusBarFrame].size.height)

#define FONT(x) [UIFont systemFontOfSize:(x)]
#define BOLD_FONT(x) [UIFont boldSystemFontOfSize:(x)]
#define SAFE_MID_FONT(x) ([UIFont fontWithName:@"PingFangSC-Medium" size:x] ?: BOLD_FONT(x))

@interface LPDAppStyle : NSObject
@end

@implementation LPDAppStyle (TextAttributes)
+ (NSDictionary *)attributesWithFont:(UIFont *)aFont color:(UIColor *)aColor {
  return @{NSFontAttributeName: aFont,
           NSForegroundColorAttributeName:aColor};
}
@end

最后奉上 效果图：

UILabel 图文排序最终