版本記錄

前言

YYText是一個(gè)專門(mén)處理文字的框架，有了它處理文字變得非常方便，這一篇我繼續(xù)介紹YYText的使用方法，希望對(duì)大家能有所幫助。大家如感興趣還可以參考：
1.YYText使用篇（一）
2.YYText使用篇（二）
3.YYText使用篇（三）

一、YYText文本行位置調(diào)整

該方法的作用是：由于中文、英文、Emoji 等字體高度不一致，或者富文本中出現(xiàn)了不同字號(hào)的字體；可能會(huì)造成每行文字的高度不一致。這里可以添加一個(gè)修改器來(lái)實(shí)現(xiàn)固定行高，或者自定義文本行位置。

實(shí)現(xiàn)的方法：

• 1. 創(chuàng)建一個(gè)文本行位置修改類，實(shí)現(xiàn) YYTextLinePositionModifier 協(xié)議。
• 2. 設(shè)置到 Label 或 TextView。

下面看代碼實(shí)現(xiàn)

    UILabel *label = [[UILabel alloc] init];
    label.text = @"舊時(shí)月色,算幾番照我,梅邊吹笛?喚起玉人,不管清寒與攀摘.何遜而今漸老,都忘卻,春風(fēng)詞筆.women我們?。。。。?！!!!!!!!!,梅邊吹笛?喚起玉人,AAAQIWBNMwdpnumberOfLinesnumberOfLinesbiaoqian☆★♀♂ O(∩_∩)O~ (=@__@=) (*^__^*) %>_<% └(^o^)┘; ^ˇ^≡ ‘(*>﹏<*)′ ~(@^_^@)~ (*+﹏+*)~ (^_^)∠※.這都是什么字什么字什么字";
    label.numberOfLines = 0;
    label.frame = CGRectMake(0.0, 64.0, self.view.bounds.size.width, 500.0);
    label.textColor = [UIColor blueColor];
    label.font = [UIFont boldSystemFontOfSize:20.0];
    [self.view addSubview:label];

下面看輸出結(jié)果

不同文字的混排

從上面可以看見(jiàn)，文字，英文字母還有表情符號(hào)等混合排在一起，可以看見(jiàn)由于混排，它們之間每一行的間距是不用的。要知道為什么是這個(gè)結(jié)果，首先要知道字形描述集，首先要弄懂下邊的圖。

字形渲染

可以看到baseline并不是所有字體的最下端，它只是一條假想的參照線，以此為基礎(chǔ)進(jìn)行字形的渲染。而從YYLabel所產(chǎn)生的行間距不同來(lái)看，應(yīng)該是利用了上一行字體的下緣線和下一行字體的上緣線做處理，由于漢字和英文、表情之類的上下緣線存在差異，就造成了行間距的不同。那么我們可以忽略上下緣線，以baseline為基準(zhǔn)，設(shè)置兩行文本之間的間距，這樣看起來(lái)就工整多了。
??這里，YYTextLinePositionSimpleModifier對(duì)象的fixedLineHeight屬性所修正的是字體渲染的baseline。

下面我們接著看代碼，進(jìn)行修改

    NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithString: @"舊時(shí)月色,算幾番照我,梅邊吹笛?喚起玉人,不管清寒與攀摘.何遜而今漸老,都忘卻,春風(fēng)詞筆.women我們！?。。。?！!!!!!!!!,梅邊吹笛?喚起玉人,AAAQIWBNMwdpnumberOfLinesnumberOfLinesbiaoqian☆★♀♂ O(∩_∩)O~ (=@__@=) (*^__^*) %>_<% └(^o^)┘; ^ˇ^≡ ‘(*>﹏<*)′ ~(@^_^@)~ (*+﹏+*)~ (^_^)∠※.這都是什么字什么字什么字"];
    attrStr.yy_color = [UIColor blueColor];
    attrStr.yy_font = [UIFont boldSystemFontOfSize:20.0];
    
    YYTextLinePositionSimpleModifier *modifier = [[YYTextLinePositionSimpleModifier alloc] init];
    modifier.fixedLineHeight = 20;

    YYLabel *label = [[YYLabel alloc] init];
    label.numberOfLines = 0;
    label.frame = CGRectMake(0.0, 64.0, self.view.bounds.size.width, 500.0);
    label.linePositionModifier = modifier;
    label.attributedText = attrStr;
    [self.view addSubview:label];

下面我們看顯示結(jié)果

行間距修改

由上可知，采用YYText可以有效的改變行間距，使行間距具有相同的高度。

二、YYText異步排版和渲染

??我們一般是在主線程渲染UI，在子線程做網(wǎng)絡(luò)請(qǐng)求等耗時(shí)任務(wù)，下面我們看代碼。

    dispatch_async(dispatch_get_global_queue(0, 0), ^{
        UILabel *label = [[UILabel alloc] init];
        label.text = @"舊時(shí)月色,算幾番照我,梅邊吹笛?喚起玉人,不管清寒與攀摘.何遜而今漸老,都忘卻,春風(fēng)詞筆.women我們?。。。。?！!!!!!!!!,梅邊吹笛?喚起玉人,AAAQIWBNMwdpnumberOfLinesnumberOfLinesbiaoqian☆★♀♂ O(∩_∩)O~ (=@__@=) (*^__^*) %>_<% └(^o^)┘; ^ˇ^≡ ‘(*>﹏<*)′ ~(@^_^@)~ (*+﹏+*)~ (^_^)∠※.這都是什么字什么字什么字";
        label.numberOfLines = 0;
        label.frame = CGRectMake(0.0, 64.0, self.view.bounds.size.width, 500.0);
        label.textColor = [UIColor blueColor];
        label.font = [UIFont boldSystemFontOfSize:20.0];
        [self.view addSubview:label];
        
        NSLog(@"%@",[NSThread currentThread]);
    });

我們看輸出和效果圖。

2017-06-07 23:33:41.098 YYTextDemo[1059:18833] <NSThread: 0x6080002632c0>{number = 3, name = (null)}

UILabel的系統(tǒng)渲染

從上可以看出，異步也可以渲染到屏幕上，但是我們一般都是主線程做視圖渲染，YYText提供了異步渲染的功能，下面我們看代碼。

    // 如果你在顯示字符串時(shí)有性能問(wèn)題，可以這樣開(kāi)啟異步模式：
    YYLabel *label = [[YYLabel alloc] init];
    label.displaysAsynchronously = YES;
    label.ignoreCommonProperties = YES; //忽略除了 textLayout 之外的其他屬性
    
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        // 創(chuàng)建屬性字符串
        NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:@"舊時(shí)月色,算幾番照我,梅邊吹笛?喚起玉人,不管清寒與攀摘.何遜而今漸老"];
        text.yy_font = [UIFont systemFontOfSize:18];
        text.yy_color = [UIColor blueColor];
        [text yy_setColor:[UIColor redColor] range:NSMakeRange(0, 20)];
        
        // 創(chuàng)建文本容器
        YYTextContainer *container = [[YYTextContainer alloc] init];
        container.size = CGSizeMake(400, CGFLOAT_MAX);
        container.maximumNumberOfRows = 0;
        
        // 生成排版結(jié)果
        YYTextLayout *layout = [YYTextLayout layoutWithContainer:container text:text];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            label.attributedText = text;
            label.textLayout = layout;
            CGRect rect = layout.textBoundingRect;
            rect.size = layout.textBoundingSize;
            rect.origin = CGPointMake(0.0, 100);
            label.frame = rect;
            [self.view addSubview:label];
        });
    });

下面看效果圖

效果圖

后記

未完，待續(xù)哦~~~

東北老家