美文网首页iOS 开发每天分享优质文章
iOS中UILabel的深度定制之图文居中

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

作者: kyson老师 | 来源:发表于2019-05-29 21:27 被阅读0次

    背景

    效果图

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

    • 图片和文字居中
    • 文字如何居于 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 图文排序最终

    相关文章

      网友评论

        本文标题:iOS中UILabel的深度定制之图文居中

        本文链接:https://www.haomeiwen.com/subject/bjiutctx.html