搜索
您的当前位置:首页正文

技术分享---YYText的分析与使用

来源:二三娱乐

YYText的架构


首先拿其中很重要的一个类YYTextLayout来说
YYTextLayout其中有一个到多个container(容器)来组成 而container又可以通过insets或者贝塞尔曲线来绘制间距


//YYTextLayout提供了以下的初始化方法 需要注意的是 需要container和attributedString两个基础要素 返回的Array是layout的Array 一一对应
+ (YYTextLayout *)layoutWithContainerSize:(CGSize)size text:(NSAttributedString *)text;
+ (YYTextLayout *)layoutWithContainer:(YYTextContainer *)container text:(NSAttributedString *)text;
+ (YYTextLayout *)layoutWithContainer:(YYTextContainer *)container text:(NSAttributedString *)text range:(NSRange)range;
+ (NSArray *)layoutWithContainers:(NSArray *)containers text:(NSAttributedString *)text;
+ (NSArray *)layoutWithContainers:(NSArray *)containers text:(NSAttributedString *)text range:(NSRange)range;

//需要注意的是 YYTextLayout的属性皆为readonly

YYLabel
一些需要注意的属性

//垂直布局中 用这个属性控制布局 只有center/top/bottom 还无法实现竖排情况下的居中
@property (nonatomic, assign) YYTextVerticalAlignment textVerticalAlignment;

//在显示不下的时候显示 默认是熟悉的...
@property (nonatomic, copy) NSAttributedString *truncationToken;

//显而易见 代理 可以去改变text 加高亮 换字体什么的 非常有用
@property (nonatomic, strong) id<YYTextParser> textParser;

//贝塞尔曲线用来限定text显示的区域
@property (nonatomic, copy) UIBezierPath *textContainerPath;

//贝塞尔曲线的集合 即一个YYLabel里可以由多个贝塞尔曲线截出来text显示区域
@property (nonatomic, copy) NSArray *exclusionPaths;

//是否是竖排显示模式
@property (nonatomic, assign, getter=isVerticalForm) BOOL verticalForm;
//代理 改变YYTextLine
@property (nonatomic, copy) id<YYTextLinePositionModifier> linePositionModifier;

//debug设置
@property (nonatomic, copy) YYTextDebugOption *debugOption;

//事件触发使用YYTextAction 置为highlight
@property (nonatomic, copy) YYTextAction highlightTapAction;

@property (nonatomic, copy) YYTextAction highlightLongPressAction;

//是否采取异步显示 默认是no 以下属性均为display mode
@property (nonatomic, assign) BOOL displaysAsynchronously;

//在异步显示前是否将content清空 异步下生效 默认是yes
@property (nonatomic, assign) BOOL clearContentsBeforeAsynchronouslyDisplay;

//在content变化的时候 加个fade动画 默认yes
@property (nonatomic, assign) BOOL fadeOnAsynchronouslyDisplay;

//在置为highlight的时候 加个fade动画 默认no
@property (nonatomic, assign) BOOL fadeOnHighlight;

//如果你的绘制都交给textlayout去做 那么可以为了更好的性能 忽略掉label的一些属性 例如text/font等等
@property (nonatomic, assign) BOOL ignoreCommonProperties;

作者在这里给出了几条tips:
如果你只是展示下富文本 那么大可不必去管display mode的东西 如果你想追求更好的性能 那么就这样
YYLabel *label = [YYLabel new]; label.displaysAsynchronously = YES;//开启异步 label.ignoreCommonProperties = YES;//忽略common properity

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

    // Create attributed string.
    NSMutableAttributedString *text = [[NSMutableAttributedString alloc] initWithString:@"贝贝iOSer"];
    text.yy_font = [UIFont systemFontOfSize:16];
    text.yy_color = [UIColor grayColor];
    [text yy_setColor:[UIColor redColor] range:NSMakeRange(0, 4)];

    // Create text container
    YYTextContainer *container = [YYTextContainer new];
    container.size = CGSizeMake(100, CGFLOAT_MAX);
    container.maximumNumberOfRows = 0;
    
    // Generate a text layout.
    YYTextLayout *layout = [YYTextLayout layoutWithContainer:container text:text];
    
    dispatch_async(dispatch_get_main_queue(), ^{
        label.size = layout.textBoundingSize;
        label.textLayout = layout;
    });
});

//lineBreakMode
NSLineBreakByTruncatingHead NSLineBreakByTruncatingMiddle NSLineBreakByTruncatingTail NSLineBreakByWordWrapping
以上四种截断mode呈现的结果如下


NSLineBreakByCharWrapping
按照字符截断如下

NSLineBreakByClipping
按行直接截断

YYTextDebugOption
细心的作者为YYText加了debug的类 使开发者便于调试自己的文本 通过给一些组件设置以下颜色来纠正细节
@property (nonatomic, strong) UIColor *baselineColor; ///< baseline color @property (nonatomic, strong) UIColor *CTFrameBorderColor; ///< CTFrame path border color @property (nonatomic, strong) UIColor *CTFrameFillColor; ///< CTFrame path fill color @property (nonatomic, strong) UIColor *CTLineBorderColor; ///< CTLine bounds border color @property (nonatomic, strong) UIColor *CTLineFillColor; ///< CTLine bounds fill color @property (nonatomic, strong) UIColor *CTLineNumberColor; ///< CTLine line number color @property (nonatomic, strong) UIColor *CTRunBorderColor; ///< CTRun bounds border color @property (nonatomic, strong) UIColor *CTRunFillColor; ///< CTRun bounds fill color @property (nonatomic, strong) UIColor *CTRunNumberColor; ///< CTRun number color @property (nonatomic, strong) UIColor *CGGlyphBorderColor; ///< CGGlyph bounds border color @property (nonatomic, strong) UIColor *CGGlyphFillColor; ///< CGGlyph bounds fill color
举个栗子
YYTextDebugOption *debugOption = [YYTextDebugOption new]; debugOption.baselineColor = [UIColor blackColor]; debugOption.CTFrameBorderColor = [UIColor redColor]; debugOption.CTLineBorderColor = [UIColor blueColor]; [YYTextDebugOption setSharedDebugOption:debugOption];
这样设置debugOption
效果如下 各种线的作用自己感受下

Top