iOS UILabel中图文混排

最近做项目领导提出一个奇葩需求,需要在活动商品名前添加一个活动的标识,如下图

iOS UILabel中图文混排_第1张图片



要做到图中在文字中插入图片的效果,首先我们得来了解一下一个叫富文本的东西。所谓富文本,我的理解就是一个丰富多彩的文本,多彩体现在可以在一个text中显示出不同的文字,加入一些色彩丰富的图片,但它能做到的还可以修改不同文字的字体加入下划线,丰富多采。

我们都知道label有text这个文本属性,要做到富文本效果,就需要用到一个并不是所有人都知道的富文本属性 attributedText(textView、textField中都有这个属性)

 
  

1.修改文字的样式

步骤如下:

  • NSMutableAttributedString 创建一个富文本对象
  • 调用富文本的对象方法 addAttribute:(NSString * )value:(id) range:(NSRange) 来修改对应range范围中 attribute属性的 value值
NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:@"绿音富平柿饼500g独立包装抽真空霜降柿子饼"];
    
    [attri addAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:14 ],NSForegroundColorAttributeName:JKCOLORBLACK} range:NSMakeRange(0, name.length)];

 
  

2.文字中添加图片

步骤如下:

  • 创建NSTextAttachment的对象,用来装在图片
  • NSTextAttachment对象的image属性设置为想要使用的图片
  • 设置NSTextAttachment对象bounds大小,也就是要显示的图片的大小
  • [NSAttributedString attributedStringWithAttachment:attch]方法,将图片添加到富文本上

// 添加表情
        NSTextAttachment *attch = [[NSTextAttachment alloc] init];
        
        // 表情图片
        switch ([_model.active[@"activeType"] intValue]) {
            case 1://助力活动
                attch.image = [UIImage imageNamed:@"activity_icon"];
                break;
                
            default:
                attch.image = [UIImage imageNamed:@"activity_icon1"];
                break;
        }
        // 设置图片大小
        attch.bounds = CGRectMake(0, 0, 60, 17);
        
        // 创建带有图片的富文本
        NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
        [attri insertAttributedString:string atIndex:0];

君凯商联网-iOS-字唐名僧






你可能感兴趣的:(OC篇)