iOS工程中对富文本的使用封装

作者: Peter_Zhang | 来源:发表于2018-03-21 12:33 被阅读26次

      在iOS开发过程中,经常会用到很多酷炫的文本,比如说文本中的某些文字要改变字号大小和文字颜色,某些文字要支持点击功能等,这些如果我们用Label文本是比较难以实现的,所以我们采用富文本的形式来实现这些功能。代码示例如下,效果图往下翻:

    /**
     *  #pragma mark -- 富文本的封装 --
     */
    + (NSMutableAttributedString*_Nullable)createMutableAttibutedStingWithPrefixStr:(NSString *_Nullable)prefixStr
            SuffixStr:(NSString *_Nullable)SuffixStr
     prefixStrColor:(UIColor *_Nullable)prefixStrColor
      SuffixStrColor:(UIColor *_Nullable)SuffixStrColor
       prefixStrFont:(CGFloat)prefixStrFont
       SuffixStrFont:(CGFloat)SuffixStrFont
    {
    NSMutableAttributedString *mutableAttributedStr = [NSMutableAttributedString new];
    
        // set family price
        NSMutableAttributedString *mutabPrefixStr
        = [[NSMutableAttributedString alloc]
           initWithString:prefixStr
           attributes:@{NSForegroundColorAttributeName : prefixStrColor,
                        NSFontAttributeName : [UIFont systemFontOfSize:prefixStrFont]}];
        NSMutableAttributedString *mutabSuffixStr
        = [[NSMutableAttributedString alloc]
           initWithString:SuffixStr
           attributes:@{NSForegroundColorAttributeName : SuffixStrColor,
                        NSFontAttributeName : [UIFont systemFontOfSize:SuffixStrFont]}];
        [mutabPrefixStr appendAttributedString:mutabSuffixStr];
        mutableAttributedStr = mutabPrefixStr;
    
        return mutableAttributedStr;
    }
    

     上面是对于文字颜色和文字字号的设置,下面我们来看下文本中支持点击的富文本是神马样子滴?!

    /**
     *  #pragma mark -- 可点击的富文本 --
     */
    +(NSMutableAttributedString *_Nullable)setAttributedStringWithRecommedAtt:(NSString *_Nullable)recommedAtt
                                                             recommedAttibutes:(nullable NSDictionary<NSString *, id> *)recommedAttibutes
                                                                    contentAtt:(NSString *_Nullable)contentAtt
                                                              contentAttibutes:(nullable NSDictionary<NSString *, id> *)contentAttibutes
                                                                 rangeOfString:(NSString *_Nullable)rangeOfString
                                                            linkAttributeValue:(id _Nullable )linkAttributeValue
    
    {
        NSMutableAttributedString *recommedAtti
        = [[NSMutableAttributedString alloc]initWithString:recommedAtt
                                                attributes:recommedAttibutes];
        NSMutableAttributedString *contentAtti = [[NSMutableAttributedString alloc]initWithString:contentAtt
                                                                                       attributes:contentAttibutes];
        
        //获取需点击的文字
        if ([rangeOfString isEqualToString:@""] == NO ||
            [rangeOfString isKindOfClass:[NSNull class]] == NO ||
            rangeOfString != nil)
        {
            NSRange range = [[contentAtti string] rangeOfString:rangeOfString];
            [contentAtti addAttribute:NSLinkAttributeName value:linkAttributeValue range:range];
        }
        
        [recommedAtti appendAttributedString:contentAtti];
        
        return recommedAtti;
    }
    

     这个方法返回的富文本需配合使用UITextView使用,可点击的文本需赋值给UITextView显示,实现UItextView的这个代理:

    - (BOOL)     textView:(UITextView*)textView
    shouldInteractWithURL:(NSURL*)URL
                  inRange:(NSRange)characterRange
    

     接下来我们再看下富文本中插入图片,是怎么实现的,代码来也。。。

    +(NSMutableAttributedString *)lableInsertImageByString:(NSString *)string
                                      needInsertImageNamed:(NSString *)imageNamed
                                               imageBounds:(CGRect)imageBounds
                                             insertAtIndex:(NSInteger)atIndex
    {
        //文本中放置图片
        NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:string];
        // 添加图片
        NSTextAttachment *attch = [[NSTextAttachment alloc] init];
        // 插入图片
        attch.image = [UIImage imageNamed:imageNamed];
        // 设置图片大小
        attch.bounds = imageBounds;//CGRectMake(0, -2, 22, 18);
        
        // 创建带有图片的富文本
        NSAttributedString *attStr = [NSAttributedString attributedStringWithAttachment:attch];
        
        //图片插入文本中的位置
        [attri insertAttributedString:attStr atIndex:atIndex];
        return attri;
    
    }
    

     以上是用于UILabel和UITextView的文本显示的,下面我们再来按下UIButton上使用富文本,构造出来的是什么效果呢,期待。。。往下看代码实现:

    /**
     *  #pragma mark -- 自定义按钮 --
     */
    + (void)customsButtonWithButton:(UIButton *)button
                           TopTitle:(NSString *_Nullable)topTitle
                        bottomTitle:(NSString *_Nullable)bottomTitle
                       topTitleFont:(CGFloat)topTitleFont
                    bottomTitleFont:(CGFloat)bottomTitleFont
                      topTitleColor:(UIColor *_Nullable)topTitleColor
                   bottomTitleColor:(UIColor *_Nullable)bottomTitleColor
                     titleAlignment:(NSTextAlignment)titleAlignment
                          imageName:(NSString *_Nullable)imageName
                        titleInsert:(UIEdgeInsets)titleInsert
                        imageInsert:(UIEdgeInsets)imageInsert
    {
        NSMutableAttributedString *topMutableStr
        = [[NSMutableAttributedString alloc]
           initWithString:[NSString stringWithFormat:@"%@\n",topTitle]
           attributes:@{NSForegroundColorAttributeName : topTitleColor,
                        NSFontAttributeName : [UIFont systemFontOfSize:topTitleFont]}];
        NSMutableAttributedString *bottomMutableStr
        = [[NSMutableAttributedString alloc]
           initWithString:bottomTitle
           attributes:@{NSForegroundColorAttributeName : bottomTitleColor,
                        NSFontAttributeName : [UIFont systemFontOfSize:bottomTitleFont]}];
        
        [topMutableStr appendAttributedString:bottomMutableStr];
        
        [bottomTitle isEqualToString:@""]== NO ||
        [bottomTitle isKindOfClass:[NSNull class]] == NO ||
        bottomTitle != nil ? [button setAttributedTitle:topMutableStr forState:UIControlStateNormal]
                           : [button setTitle:topTitle forState:UIControlStateNormal];
        
        [button setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
        
        button.titleEdgeInsets = titleInsert;
        button.imageEdgeInsets = imageInsert;
        button.titleLabel.numberOfLines = 0;
        
        button.titleLabel.textAlignment = titleAlignment;
        button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
    }
    

     好了,大家如有好的想法和建议可留言相互交流学习,奉上以上的实现效果如下:


    代码测试.png

    相关文章

      网友评论

        本文标题:iOS工程中对富文本的使用封装

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