設(shè)計(jì)圖的Label和iOS中的Lable

skech中打開設(shè)計(jì)師畫的Lable，按照標(biāo)注寫好后坞嘀，對(duì)比總是發(fā)現(xiàn)和設(shè)計(jì)稿有差異躯护，每次設(shè)計(jì)師說，讓『把行距調(diào)大一點(diǎn)點(diǎn)』加xx幾個(gè)像素等等之類丽涩，都特么頭疼棺滞，因?yàn)樵?iOS 這個(gè)對(duì)文字處理各種不友好的系統(tǒng)里，改行距并不像改字號(hào)那么簡單矢渊，只調(diào)『一點(diǎn)點(diǎn)』未必像我們想的那樣继准，改一個(gè)你想當(dāng)然數(shù)字。

文字在iOS中應(yīng)用最廣的就是UILabel矮男。UILabel里文字的高度并不是UILabel本身的高度移必。例如一個(gè) UILabel 字號(hào)為14，有些程序員可能就會(huì)把這個(gè) Label 高度定為 14 像素了昂灵。而經(jīng)驗(yàn)豐富的人就會(huì)知道不能這樣，否則『g』之類的字母都可能會(huì)被切掉一些舞萄。在 xib 里眨补，選中 label 之后按『Command + =』會(huì)發(fā)現(xiàn)字號(hào)為 14 的 label 合適的高度應(yīng)該是 比14大。那我們怎么友好的將設(shè)計(jì)圖上的標(biāo)注準(zhǔn)確的應(yīng)用到iOS的系統(tǒng)中呢倒脓？

字體的高度(lineHeight)

一個(gè)字形由很多參數(shù)構(gòu)成撑螺。字形的各個(gè)參數(shù)，如下面的兩張圖

由此可以得出：lineHeight = Ascent + |Decent| + Leading。lineHeight就是我們字體的真是高度模叙，不同的字體庫lineHeight會(huì)有差異歇拆。
pointSize就是我們字體的字號(hào)。顯而易見個(gè) lineHeight > pointSize范咨。所以一個(gè)單行的14號(hào)字體的高度并不是pointSize的14,而是lineHeight故觅。如果我們直接設(shè)置空間label高度14，有些字就會(huì)被截?cái)唷?/p>

這些字形參數(shù)iOS系統(tǒng)的UIFont都有對(duì)應(yīng)的屬性渠啊，如下：

@property(nonatomic,readonly,strong) NSString *familyName;
@property(nonatomic,readonly,strong) NSString *fontName;
@property(nonatomic,readonly)        CGFloat   pointSize;
@property(nonatomic,readonly)        CGFloat   ascender;
@property(nonatomic,readonly)        CGFloat   descender;
@property(nonatomic,readonly)        CGFloat   capHeight;
@property(nonatomic,readonly)        CGFloat   xHeight;
@property(nonatomic,readonly)        CGFloat   lineHeight NS_AVAILABLE_IOS(4_0);
@property(nonatomic,readonly)        CGFloat   leading;

這里的lineHeight就是這個(gè)字體單行的高度输吏，我們可以用這個(gè)值來判斷文本是單行還是多行。這里提供一個(gè)計(jì)算文本高度的方法：

@implementation NSString (Size)
- (CGSize)sizeWithFont:(UIFont *)font boundSize:(CGSize)size lineSpacing:(CGFloat)lineSpacing{
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc]init];
    paragraphStyle.lineSpacing = lineSpacing;
    //設(shè)置換行模式為單詞模式
    paragraphStyle.lineBreakMode = NSLineBreakByWordWrapping;
    NSDictionary *attributes = @{NSFontAttributeName:font, NSParagraphStyleAttributeName:paragraphStyle};
    CGSize resultSize = [self boundingRectWithSize:size options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingTruncatesLastVisibleLine attributes:attributes context:nil].size;
    return CGSizeMake(ceil(resultSize.width), ceil(resultSize.height));
}
@end

字體行間距

當(dāng)字體多行的時(shí)候替蛉，為了美觀贯溅，設(shè)計(jì)師會(huì)寫上行間距，使用attributedString的時(shí)候我們可以設(shè)置行間距躲查。那么行間距在視圖上到底是那一塊呢它浅？如下圖所示：

行間距示意圖

由圖所示，視覺上的行距其實(shí)由那 3 部分組成：上面一行的默認(rèn)空白 + 行距 + 下面一行的默認(rèn)空白镣煮。綠色高度是我們寫的 lineSpacing姐霍，而兩段紅色加起來正好是一倍font.lineHeight - font.pointSize的值。

@implementation NSAttributedString (Size)
+ (NSMutableAttributedString *)attributedStringWithString:(NSString *)string  font:(UIFont *)font color:(UIColor *)color lineSpacing:(CGFloat)spacing {  
 if (!font) {
        NSAssert(0, @"請(qǐng)傳遞一個(gè)正常的字體參數(shù)");
    }
    
    if (!color) {
        NSAssert(0, @"請(qǐng)傳遞一個(gè)正常的字體參數(shù)");
    }
    
    if (![string isNonEmpty]) {
        return [[NSMutableAttributedString alloc] initWithString:@"" attributes:nil];;
    }
    NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
    style.lineSpacing = spacing;
    style.lineBreakMode = NSLineBreakByWordWrapping;
    NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:string attributes:@{NSFontAttributeName:font, NSForegroundColorAttributeName:color, NSParagraphStyleAttributeName:style}];
    return [attributedString mutableCopy];
}
@end

- (BOOL)isNonEmpty {
    
    NSMutableCharacterSet *emptyStringSet = [[NSMutableCharacterSet alloc] init];
    [emptyStringSet formUnionWithCharacterSet: [NSCharacterSet whitespaceAndNewlineCharacterSet]];
    [emptyStringSet formUnionWithCharacterSet: [NSCharacterSet characterSetWithCharactersInString: @"　"]];
    if ([self length] == 0) {
        return NO;
    }
    NSString* str = [self stringByTrimmingCharactersInSet:emptyStringSet];
    return [str length] > 0;
}

同樣這里我提供了一個(gè)可以傳入行間距合成attributedString的方法，前面的nil檢查很有必要加镊折。因?yàn)閇[NSMutableAttributedString alloc] initWithString:text] 不接受 nil 參數(shù)胯府，會(huì)直接 crash。isNonEmpty是一個(gè)用來檢測字符串是否為空的方法恨胚，具體實(shí)現(xiàn)如下骂因。通過一個(gè)NSString得到NSMutableAttributedString后，直接賦值給UILable的attributedString屬性与纽。這樣我們就可以方便的設(shè)置文本的間距了侣签，是不是覺得很完美。

受蘋果歧視的中文行間距

我們先看一段的代碼急迂，如下：

    NSString * text1 = @"hhh小書包影所！";//@"hello world!";
    UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(50, 100, 150, 0)];
    label1.text = text1;
    label1.font = font;
    label1.numberOfLines = 0;
    label1.backgroundColor = UIColor.redColor;
    [self.view addSubview:label1];
    [label1 sizeToFit];
    NSLog(@"label1.heihgt = %2f",label1.bounds.size.height);
    NSLog(@"label1.lineHeight = %2f",label1.font.lineHeight);
    
    
    NSString * text2 = @"hhh小書包！小書包僚碎！小書包猴娩！小書包！小書包勺阐！小書包卷中！小書包！小書包渊抽！";//@"hello world!";
    UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectMake(200, 100, 150, 0)];
    label2.text = text2;
    label2.font = font;
    label2.numberOfLines = 0;
    label2.backgroundColor = UIColor.redColor;
    [self.view addSubview:label2];
    [label2 sizeToFit];
    NSLog(@"label1.heihgt = %2f",label1.bounds.size.height);
    NSLog(@"label1.lineHeight = %2f",label1.font.lineHeight);
    
    NSString * text3 = @"hhh小書包蟆豫！";//@"hello world!";
    UILabel *label3 = [[UILabel alloc]initWithFrame:CGRectMake(50, 250, 150, 0)];
    NSAttributedString * attriString3 = [NSAttributedString attributedStringWithString:text3 font:font color:UIColor.blackColor lineSpacing:5];
    label3.attributedText = attriString3;
    label3.numberOfLines = 0;
    label3.backgroundColor = UIColor.redColor;
    [self.view addSubview:label3];
    [label3 sizeToFit];
    NSLog(@"label2.heihgt = %2f",label2.bounds.size.height);
    NSLog(@"label2.lineHeight = %2f",label2.font.lineHeight);
    
    
    NSString * text4 = @"hhh小書包！小書包懒闷！小書包十减！";//@"hello world!";
    UILabel *label4 = [[UILabel alloc]initWithFrame:CGRectMake(200, 250, 150, 0)];
    NSAttributedString * attriString4 = [NSAttributedString attributedStringWithString:text4 font:font color:UIColor.blackColor lineSpacing:5];
    label4.attributedText = attriString4;
    label4.numberOfLines = 0;
    label4.backgroundColor = UIColor.redColor;
    [self.view addSubview:label4];
    [label4 sizeToFit];
    
    NSLog(@"label3.heihgt = %2f",label3.bounds.size.height);
    NSLog(@"label3.lineHeight = %2f",label3.font.lineHeight);

很簡單對(duì)不對(duì)，但是接下來看看我們屏幕上的UI顯示：
中英混合內(nèi)容

中英文混合

上面label中的內(nèi)容是中英文混合愤估，那如果文本內(nèi)容是純中文或者純英文呢（其他國家文字暫不考慮）帮辟，我們改下文字內(nèi)容看看最后效果，效果圖分別如下:

純英文內(nèi)容

純英文

純中文內(nèi)容

純中文

從圖中可以看出很明顯感覺到蘋果對(duì)中文深深的惡意玩焰！歸納下來就是這兩點(diǎn)：

• 當(dāng)內(nèi)容是英文的時(shí)候由驹，無論單行還是多行，使用attributedString行高都不會(huì)出現(xiàn)問題昔园。
• 當(dāng)內(nèi)容中包含的中文的時(shí)候蔓榄，單行的attributedString會(huì)自動(dòng)加上一個(gè)多余的行間距，多行則顯示正常默刚。

所以我們在使用attributedString就得單獨(dú)處理一行的情況甥郑，去掉這個(gè)多余的行間距l(xiāng)inespace。我們在NSAttributedString +Size 加一個(gè)類別方法

+ (NSMutableAttributedString *)attributedStringWithString:(NSString *)string  font:(UIFont *)font color:(UIColor *)color maxWidth:(CGFloat) maxWidth lineSpacing:(CGFloat)spacing {
    if (!font) {
        NSAssert(0, @"請(qǐng)傳遞一個(gè)正常的字體參數(shù)");
    }
    
    if (!color) {
        NSAssert(0, @"請(qǐng)傳遞一個(gè)正常的字體參數(shù)");
    }
    
    if (![string isNonEmpty]) {
        return [[NSMutableAttributedString alloc] initWithString:@"" attributes:nil];;
    }
    NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init];
    style.lineBreakMode = NSLineBreakByWordWrapping;
    NSDictionary * attributes = @{NSFontAttributeName:font, NSForegroundColorAttributeName:color, NSParagraphStyleAttributeName:style};
    CGFloat contentHeight = [string boundingRectWithSize:CGSizeMake(maxWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingTruncatesLastVisibleLine attributes:attributes context:nil].size.height;
    if (contentHeight > font.lineHeight){
        style.lineSpacing = spacing;
    } else {
        //單行的時(shí)候去掉行間距
        style.lineSpacing = 0;
    }
    NSAttributedString *attributedString = [[NSAttributedString alloc] initWithString:string attributes:attributes];
    return [attributedString mutableCopy];
}

思考：
我們定義UILable使用sizeToFit自動(dòng)撐開的高度為labelHeight,
lableHeight 和 lineHeight ,lineSpace應(yīng)該有如下關(guān)系：
lableHeight = lineHeight * numberOfLines + lineSpace * (numberOfLines - 1)
但是經(jīng)過測試log打印結(jié)果發(fā)現(xiàn)
lableHeight > lineHeight * numberOfLines + lineSpace * (numberOfLines - 1)
舉個(gè)栗子：

    UIFont *font = [UIFont systemFontOfSize:24];
    NSString * text4 = @"hello world!hello world!hello world!";//@"hello world!";
    UILabel *label4 = [[UILabel alloc]initWithFrame:CGRectMake(200, 250, 150, 0)];
    NSAttributedString * attriString4 = [NSAttributedString attributedStringWithString:text4 font:font color:UIColor.blackColor maxWidth:150 lineSpacing:5];
    label4.attributedText = attriString4;
    label4.adjustsFontSizeToFitWidth = YES;
    label4.minimumScaleFactor = 0.5;
    label4.numberOfLines = 0;
    label4.backgroundColor = UIColor.redColor;
    [self.view addSubview:label4];
    [label4 sizeToFit];

    NSLog(@"label4.heihgt1 = %2f",label4.bounds.size.height);
    //文本有三行
    NSLog(@"label4.height2 = %2f",label4.font.lineHeight * 3 + 5 * 2);

iPhone8模擬器下log打印結(jié)果

2017-12-18 18:07:13.621879+0800 Color[18188:1273525] label4.heihgt1 = 96.000000
2017-12-18 18:07:13.621999+0800 Color[18188:1273525] label4.height2 = 95.921875

至于這到底是因?yàn)槭裁聪劭茫視簳r(shí)不知道為什么壹若？有知道的銅須請(qǐng)私信我嗅钻，謝謝啦皂冰。