UILabel 实现图文混排

很多应用类app都会显示出下载量以及评论条数,通常会有一个图标然后紧跟着一个数字,只需要一个 UILabel 就能实现这样的效果,废话不多说,直接看代码!!!!

#import "ViewController.h"

@interface ViewController ()
// 绑定插座变量
@property (weak, nonatomic) IBOutlet UILabel *myLabel;

@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    NSAttributedString *commentAttr = [self creatAttrStringWithText:@"在这里设置文字" image:[UIImage imageNamed:@"topic_Comment"]];
    // UILabel 通过XIB画的
    _myLabel.attributedText = commentAttr;
}

// 实现图文混排的方法
- (NSAttributedString *) creatAttrStringWithText:(NSString *) text image:(UIImage *) image{
    
    // NSTextAttachment可以将图片转换为富文本内容
    NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
    attachment.image = image;
    // 通过NSTextAttachment创建富文本
    // 图片的富文本
    NSAttributedString *imageAttr = [NSAttributedString attributedStringWithAttachment:attachment];
    
    // 文字的富文本
    NSAttributedString *textAttr = [[NSMutableAttributedString alloc] initWithString:text attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15]}];
    
    NSMutableAttributedString *mutableAttr = [[NSMutableAttributedString alloc] init];
    
    // 将图片、文字拼接
    // 如果要求图片在文字的后面只需要交换下面两句的顺序
    [mutableAttr appendAttributedString:imageAttr];
    [mutableAttr appendAttributedString:textAttr];
    
    return [mutableAttr copy];
}
@end

效果图:

图文混排效果图.png

说明:我给 UILabel 设置了背景色

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,260评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,196评论 4 61
  • 今天是30天写作挑战的最后一天,应老师的要求,今天总结一下这一个月来的收获。 2016年,最后一个月30天的写作挑...
    甚麽样的旋律阅读 1,917评论 2 1
  • 曾经好多次以为自己不可一世,可真正清醒的时刻才认识到自己的愚昧。 也许曾经自己有过灿烂的时光,可自己却没有好好把握...
    常毓阅读 1,248评论 4 4
  • 下班挤地铁,低头看到一个塑料饭盒还有饭粒在,抬头看到是一个男的。肯定是带的中饭吧,舍不得吃十几块二十几块的外卖,就...
    愤怒的小小小鸟阅读 1,280评论 0 0