美文网首页iOS定制view
YYText使用篇(四)

YYText使用篇(四)

作者: 刀客传奇 | 来源:发表于2017-06-08 00:12 被阅读641次

    版本记录

    版本号 时间
    V1.0 2017.06.07

    前言

    YYText是一个专门处理文字的框架,有了它处理文字变得非常方便,这一篇我继续介绍YYText的使用方法,希望对大家能有所帮助。大家如感兴趣还可以参考:
    1.YYText使用篇(一)
    2.YYText使用篇(二)
    3.YYText使用篇(三)

    一、YYText文本行位置调整

    该方法的作用是:由于中文、英文、Emoji 等字体高度不一致,或者富文本中出现了不同字号的字体;可能会造成每行文字的高度不一致。这里可以添加一个修改器来实现固定行高,或者自定义文本行位置。

    实现的方法:

    • 1. 创建一个文本行位置修改类,实现 YYTextLinePositionModifier 协议。
    • 2. 设置到 Label 或 TextView。

    下面看代码实现

        UILabel *label = [[UILabel alloc] init];
        label.text = @"旧时月色,算几番照我,梅边吹笛?唤起玉人,不管清寒与攀摘.何逊而今渐老,都忘却,春风词笔.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];
    

    下面看输出结果

    不同文字的混排

    从上面可以看见,文字,英文字母还有表情符号等混合排在一起,可以看见由于混排,它们之间每一行的间距是不用的。要知道为什么是这个结果,首先要知道字形描述集,首先要弄懂下边的图。

    字形渲染

    可以看到baseline并不是所有字体的最下端,它只是一条假想的参照线,以此为基础进行字形的渲染。而从YYLabel所产生的行间距不同来看,应该是利用了上一行字体的下缘线和下一行字体的上缘线做处理,由于汉字和英文、表情之类的上下缘线存在差异,就造成了行间距的不同。那么我们可以忽略上下缘线,以baseline为基准,设置两行文本之间的间距,这样看起来就工整多了。
      这里,YYTextLinePositionSimpleModifier对象的fixedLineHeight属性所修正的是字体渲染的baseline。

    下面我们接着看代码,进行修改

        NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithString: @"旧时月色,算几番照我,梅边吹笛?唤起玉人,不管清寒与攀摘.何逊而今渐老,都忘却,春风词笔.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];
    

    下面我们看显示结果

    行间距修改

    由上可知,采用YYText可以有效的改变行间距,使行间距具有相同的高度。


    二、YYText异步排版和渲染

      我们一般是在主线程渲染UI,在子线程做网络请求等耗时任务,下面我们看代码。

        dispatch_async(dispatch_get_global_queue(0, 0), ^{
            UILabel *label = [[UILabel alloc] init];
            label.text = @"旧时月色,算几番照我,梅边吹笛?唤起玉人,不管清寒与攀摘.何逊而今渐老,都忘却,春风词笔.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的系统渲染

    从上可以看出,异步也可以渲染到屏幕上,但是我们一般都是主线程做视图渲染,YYText提供了异步渲染的功能,下面我们看代码。

        // 如果你在显示字符串时有性能问题,可以这样开启异步模式:
        YYLabel *label = [[YYLabel alloc] init];
        label.displaysAsynchronously = YES;
        label.ignoreCommonProperties = YES; //忽略除了 textLayout 之外的其他属性
        
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            // 创建属性字符串
            NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:@"旧时月色,算几番照我,梅边吹笛?唤起玉人,不管清寒与攀摘.何逊而今渐老"];
            text.yy_font = [UIFont systemFontOfSize:18];
            text.yy_color = [UIColor blueColor];
            [text yy_setColor:[UIColor redColor] range:NSMakeRange(0, 20)];
            
            // 创建文本容器
            YYTextContainer *container = [[YYTextContainer alloc] init];
            container.size = CGSizeMake(400, CGFLOAT_MAX);
            container.maximumNumberOfRows = 0;
            
            // 生成排版结果
            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];
            });
        });
    

    下面看效果图

    效果图

    后记

    未完,待续哦~~~

    东北老家

    相关文章

      网友评论

        本文标题:YYText使用篇(四)

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