美文网首页
iOS 轻量级富文本方案

iOS 轻量级富文本方案

作者: zhangbo1992 | 来源:发表于2016-09-01 14:02 被阅读0次

    项目中多多少少会遇到一些需求,需要给部分文案添加点击事件。例如:"我已阅读《xxx协议》",这个时候最简单的实现方案是:添加一个button覆盖上去。但如果有多处文案需要添加点击事件,就会比较懵逼。下面我说下我的实现方案。

    最初的时候我打算使用CoreText实现,查询了相关资料后发现自己不能很快的造出轮子,虽然网上有很多现成的轮子可以用,但是我并不想只纯粹的搬运代码。需要直接拿轮子的可以点击这里。于是我把目光转移到TextKit上面,发现相关代码要比CoreText易读易懂很多,于是就有了下面的事情。

    言归正传,给Label的文字添加点击事件,首先需要让文字有不同的颜色,不同的字号,这个时候就需要用到 NSMutableAttributedString,下面是一些常规的处理。

    NSMutableAttributedString

    • 设置颜色
    ///根据range设置颜色
    -(void)addColor:(UIColor *)color range:(NSRange)range
    {
        if (range.length > self.attributedText.length) {
            return;
        }
        [self.attributedText addAttribute:NSForegroundColorAttributeName value:color range:range];
    }
    
    • 设置字体大小
    ///根据range设置字体大小
    -(void)addFontSize:(CGFloat)size range:(NSRange)range
    {
        if (range.length > self.attributedText.length) {
            return;
        }
        UIFont * font;
        //判断是其他字体
        if (self.fontName.length == 0) {
            //判断是否是粗体
            if (self.isBold) {
                font = [UIFont boldSystemFontOfSize:size];
            }
            else
            {
                font = [UIFont systemFontOfSize:size];
            }
        }
        else
        {
            font = [UIFont fontWithName:self.fontName size:size];
        }
        [self.attributedText addAttribute:NSFontAttributeName value:font range:range];
    }
    
    • 设置字间距
    ///设置字间距
    -(void)addKerningWithSpace:(CGFloat)space
    {
        [self.attributedText addAttribute:NSKernAttributeName value:[NSNumber numberWithFloat:space] range:NSMakeRange(0, 10)];
    }
    
    • 添加单删除线
    ///添加单删除线
    -(void)addSingleStrikethroughWithColor:(UIColor * )color range:(NSRange)range
    {
        [self.attributedText addAttribute:NSStrikethroughStyleAttributeName value:[NSNumber numberWithInt:NSUnderlineStyleSingle] range:range];
        if (color) {
            [self.attributedText addAttribute:NSStrikethroughColorAttributeName value:color range:range];
        }
    }
    
    • 添加单下划线
    ///添加单下划线
    -(void)addSingleUnderlineWithColor:(UIColor * )color range:(NSRange)range
    {
        [self.attributedText addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInt:NSUnderlineStyleSingle] range:range];
        if (color) {
            [self.attributedText addAttribute:NSUnderlineColorAttributeName value:color range:range];
        }
    }
    
    • 设置基线偏移值
    ///设置基线偏移值
    -(void)addBaselineOffset:(CGFloat)offset range:(NSRange)range
    {
        [self.attributedText addAttribute:NSBaselineOffsetAttributeName value:[NSNumber numberWithFloat:offset] range:range];
    }
    
    • 设置凸版印刷体效果
    ///设置凸版印刷体效果
    -(void)addEffectLetterpressWithRange:(NSRange)range
    {
        [self.attributedText addAttribute:NSTextEffectAttributeName value:NSTextEffectLetterpressStyle range:range];
    }
    
    • 插入图片
    ///在某个位置插入图片 不要在结尾处插入图片,在iOS8的某个小版本会出现bug
    -(void)addAttachmentWithImageName:(NSString *)imageName index:(NSInteger)index size:(CGSize)size
    {
        UIImage * image = [UIImage imageNamed:imageName];
        NSTextAttachment * attachment = [[NSTextAttachment alloc] init];
        attachment.image = image;
        //设置默认大小
        if (CGSizeEqualToSize(size, CGSizeZero)) {
            attachment.bounds = CGRectMake(0, 0, 20, 20);
        }
        else
        {
            attachment.bounds = CGRectMake(0, 0, size.width, size.height);
        }
        NSAttributedString * attibutedString = [NSAttributedString attributedStringWithAttachment:attachment];
        [self.attributedText insertAttributedString:attibutedString atIndex:index];
    }
    
    • 设置字体段落样式
    //把字体样式添加到可变字符串中
         [self.attributedText addAttribute:NSParagraphStyleAttributeName value:_desParagraphStyle range:NSMakeRange(0, [self.attributedText length])];
    

    NSMutableParagraphStyle 字体段落样式

    • 设置字体行间距
    ///设置字体行间距
    -(void)setLineSpacing:(CGFloat)lineSpacing
    {
        self.desParagraphStyle.lineSpacing = lineSpacing;
    }
    
    • 设置换行方式
    ///设置换行方式
    -(void)setLineBreakMode:(NSLineBreakMode)lineBreakMode
    {
        self.desParagraphStyle.lineBreakMode = lineBreakMode;
    }
    
    • 设置首行缩进
    ///设置首行缩进
    -(void)setFirstLineHeadIndent:(CGFloat)firstLineHeadIndent
    {
        self.desParagraphStyle.firstLineHeadIndent = firstLineHeadIndent;
    }
    
    • 设置文本对齐方式
    //文本对齐方式
    -(void)setNSTextAlignment:(NSTextAlignment)alignment
    {
        self.desParagraphStyle.alignment = alignment;
    }
    
    • 设置段落间距
    //段与段之间的间距
    -(void)setParagraphSpacing:(CGFloat)paragraphSpacing
    {
        self.desParagraphStyle.paragraphSpacing = paragraphSpacing;
    }
    

    高度的计算

    ///获取最终大小
    -(CGSize)getSizeWithMaxWidth:(CGFloat)maxWidth
    {
        
        if (self.maxWidth == maxWidth) {
            return self.stringSize;
        }
        self.maxWidth = maxWidth;
        
        CGRect rect = [self.attributedText boundingRectWithSize:CGSizeMake(maxWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading context:nil];
        //误差值
        rect.size.height += 0.5;
        self.stringSize = rect.size;
        return self.stringSize;
    }
    

    以上方法设置了常用的属性,下面要设置点击事件的属性。因为NSMutableAttributedString并不包含点击事件的属性,所以我们需要自定义一个Key,设置我们的value。

    • 添加自定义属性(为点击事件服务)
    ///添加自定义属性,为自定义label(ZHHitLabel)提供服务
    - (void)addRichHelpWithType:(ZHRichHelpType)type range:(NSRange)range color:(UIColor *)textColor
    {
        if (range.length > self.attributedText.length) {
            return;
        }
        if (textColor) {
            [self addColor:textColor range:range];
        }
        
        ZHRichHelpModel * model = [[ZHRichHelpModel alloc] init];
        model.richHelpType = type;
        model.valueRange = range;
        model.valueStr = [self.attributedText.string substringWithRange:range];
        [self.attributedText addAttribute:RichKey value:model range:range];
    }
    
    
    ///其中我们自定义了一个Model,枚举了常用的事件,添加了一些后续可能用到的属性。
    typedef enum : NSUInteger {
        ZHRichHelpTypeNone  = 0,  //啥事不干
        ZHRichHelpTypeLink  = 1,  //链接
        ZHRichHelpTypePhone = 2,  //电话号码
        ZHRichHelpTypeClick = 3,  //点击事件
    } ZHRichHelpType;
    
    @interface ZHRichHelpModel : NSObject
    ///记录目标类型
    @property (nonatomic, assign) ZHRichHelpType richHelpType;
    ///记录目标字符串
    @property (nonatomic, strong) NSString * valueStr;
    ///记录目标范围
    @property (nonatomic, assign) NSRange valueRange;
    @end
    
    
    
    • 自定义UILable

    拥有了有自定义属性和富文本格式的NSMutableAttributedString后,我们需要一个展示的控件,系统默认可以设置NSAttributedString的控件都可以直接赋值,并且展示出富文本效果。如果需要点击事件,就需要自定义label了

    #import <UIKit/UIKit.h>
    #import "ZHRichHelpModel.h"
    
    typedef void(^HitLableTouchBlock)(ZHRichHelpModel * model);
    
    @interface ZHHitLabel : UILabel
    ///点击事件回调
    @property (nonatomic, copy) HitLableTouchBlock clickBlock;
    
    @end
    

    在触摸的时候,检测触摸的文字是否拥有点击事件

    #pragma mark - Touch
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        UITouch * touch = [touches anyObject];
        CGPoint touchPoint = [touch locationInView:self];
        self.richModel = [self touchStrAtPoint:touchPoint];
        if (!self.richModel) {
            [super touchesBegan:touches withEvent:event];
        }
        else
        {
            [self drawBackgroundColorWithState:NO withRange:self.richModel.valueRange];
        }
    
    }
    
    - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        if (self.richModel) {
            UITouch * touch = [touches anyObject];
            CGPoint touchPoint = [touch locationInView:self];
            ZHRichHelpModel * moveRichModel = [self touchStrAtPoint:touchPoint];
            if (self.richModel != moveRichModel) {
                [self drawBackgroundColorWithState:YES withRange:self.richModel.valueRange];
                self.richModel = nil;
            }
        }
        else
        {
            [super touchesMoved:touches withEvent:event];
        }
    }
    
    - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        if (self.richModel) {
            if (self.clickBlock) {
                self.clickBlock(self.richModel);
            }
            [self drawBackgroundColorWithState:YES withRange:self.richModel.valueRange];
        }
        else
        {
            [super touchesEnded:touches withEvent:event];
        }
    }
    
    - (void)touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        if (self.richModel) {
            [self drawBackgroundColorWithState:YES withRange:self.richModel.valueRange];
            self.richModel = nil;
        } else {
            [super touchesCancelled:touches withEvent:event];
        }
    }
    
    #pragma mark - CGSize CGRect CGPoint
    - (ZHRichHelpModel *)touchStrAtPoint:(CGPoint)location
    {
        
        CGPoint textOffset;
        //在执行usedRectForTextContainer之前最好还是执行下glyphRangeForTextContainer relayout
        [self.layoutManager glyphRangeForTextContainer:self.textContainer];
        textOffset = [self textOffsetWithTextSize:[self.layoutManager usedRectForTextContainer:self.textContainer].size];
        
        //location转换成在textContainer的绘制区域的坐标
        location.x -= textOffset.x;
        location.y -= textOffset.y;
        
        
        //返回触摸区域的字形  如果location的区域没字形,可能返回的是最近的字形index,所以需要再找到这个字形所处于的rect来确认
        NSUInteger glyphIndex = [self.layoutManager glyphIndexForPoint:location inTextContainer:self.textContainer];
        CGRect glyphRect = [self.layoutManager boundingRectForGlyphRange:NSMakeRange(glyphIndex, 1) inTextContainer:self.textContainer];
        if (!CGRectContainsPoint(glyphRect, location)) {
            return nil;
        }
        
        for (ZHRichHelpModel * model in self.helpValueArray) {
            if (NSLocationInRange(glyphIndex, model.valueRange)) {
                return model;
            }
        }
        
        return nil;
    }
    
    //这个计算出来的是绘制起点
    - (CGPoint)textOffsetWithTextSize:(CGSize)textSize
    {
        CGPoint textOffset = CGPointZero;
        //根据insets和默认垂直居中来计算出偏移
        textOffset.x = 0;
        CGFloat paddingHeight = (_textContainer.size.height - textSize.height) / 2.0f;
        textOffset.y = paddingHeight+ 0;
        
        return textOffset;
    }
    
    ///绘制背景颜色 根据触摸的状态 以及范围
    - (void)drawBackgroundColorWithState:(BOOL)isEnd withRange:(NSRange)range
    {
        NSMutableAttributedString * mutableStr = [self.lastAttributedString mutableCopy];
        if (!isEnd) {
            [mutableStr addAttribute:NSBackgroundColorAttributeName value:[UIColor colorWithRed:239/255.0 green:253/255.0 blue:1 alpha:1] range:range];
        }
        else
        {
            [mutableStr removeAttribute:NSBackgroundColorAttributeName range:range];
        }
        
        self.attributedText = mutableStr;
        
    }
    

    源码

    相关文章

      网友评论

          本文标题:iOS 轻量级富文本方案

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