YYText使用篇(四)

版本记录

版本号 时间
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];
        });
    });

下面看效果图

效果图

后记

未完,待续哦~~~

东北老家
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容

  • 文字是界面设计中最基本的构成之一,如何定义网页设计中的文字系统?可大体分为有三步: 第1步,系统全面的了解文字的基...
    蜗牛启奏阅读 4,833评论 0 19
  • 本文只是让自己加深下理解,方便以后查看,原作者看到有不合适的地方,或者大神们看到有不对的地方希望指正 ~ 原文地址...
    态度哥阅读 19,819评论 12 36
  • 文字是界面设计中最基本的构成之一,如何定义网页设计中的文字系统?可大体分为三步: 系统全面地了解文字的基础知识、显...
    设计师的奇幻之旅阅读 2,291评论 0 15
  • Android系统提供了Textview来提供文字的显示,但很多时候开发者还需要使用Canvas来绘制Text,这...
    eclipse_xu阅读 434评论 0 1
  • (一)幸福的滋味 大二开学已经有一段时间了,丁淇似乎都没有进入状态。身体在学校,心却在D市。有时候在教室里捧着各种...
    芸羲阅读 450评论 3 7