iOS实现markdown展示

背景:最近AI对话比较热门,AI回复的内容有很多markdown格式,需要展示一下。

三方库:CocoaMarkdown

在github上搜索并下载源码到本地,打开工程文件,选择Any iOS Device编译成功后,在左侧文件栏最下面有一个Products目录,展开找到CocoaMarkdown.framework,将此文件复制到自己的工程,这里是真机的,需要使用模拟器的自己选择模拟器编译进行后再合并,这里不叙述。

下面是关键代码,计算高度

    // 导入
    #import <CocoaMarkdown/CocoaMarkdown.h> 
  
    self.aiResWidth = k_screen_width - 55 - 26 - 10;
    DLog(@"self.dadaAiResWidth = %f",self.aiResWidth);
    CGSize maxSize = CGSizeMake(self.aiResWidth, 100000);
    
    // 1.字符串转data
    NSData *data = [self.body dataUsingEncoding:NSUTF8StringEncoding];

    // 2. 渲染成 NSAttributedString
    CMDocument *doc = [[CMDocument alloc] initWithData:data options:CMDocumentOptionsSmart];
    
    // 3. 创建属性对象
    CMTextAttributes *attrs = [[CMTextAttributes alloc] init];
    [attrs addStringAttributes:@{NSFontAttributeName:kFont14} forElementWithKinds:CMElementKindAnyHeader];
    [attrs addStringAttributes:@{NSFontAttributeName:kFont13} forElementWithKinds:CMElementKindParagraph];
    [attrs addStringAttributes:@{NSFontAttributeName:kFont13} forElementWithKinds:CMElementKindText];
    CMAttributedStringRenderer *renderer = [[CMAttributedStringRenderer alloc] initWithDocument:doc
                                                 attributes:attrs];
    NSAttributedString *attrStr = [renderer render];
    [self setAttrStr:attrStr];
    
    // 4. 计算高度,给定最大宽度(例如 tableView 的 contentWidth)
    CGRect boundingRect = [attrStr boundingRectWithSize:maxSize
                                              options:NSStringDrawingUsesLineFragmentOrigin
                                              context:nil];
    self.aiResHeight = ceil(boundingRect.size.height);

下面是关键代码,使用UITextView进行渲染

- (UITextView *)body {
    if (!_body) {
        CGRect rect = CGRectMake(16, 10, 197, 80);
        _body = [[UITextView alloc] initWithFrame:rect];
        _body.font = kFont13;
        _body.textColor = kBlackColorD;
        _body.editable = NO;
        _body.scrollEnabled = NO;  // 如果外层有 UIScrollView/UITableView 就关掉
        _body.textContainerInset = UIEdgeInsetsMake(0, 0, 0, 0);// 去掉上下默认8pt边距
        _body.textContainer.lineFragmentPadding = 0; // 去掉左右 5 pt 的边距
        [_body setContentCompressionResistancePriority:UILayoutPriorityRequired
                                                  forAxis:UILayoutConstraintAxisVertical];
    }
    return _body;
}
// 赋值显示
self.body.attributedText = att.attrStr;
// 设置位置
self.body.frame = CGRectMake(16, 12, att.aiResWidth, att.aiResHeight);

注:去掉边距比较重要, 不然显示可能会少一行。

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

推荐阅读更多精彩内容

  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,950评论 1 180
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,225评论 4 61
  • """1.个性化消息: 将用户的姓名存到一个变量中,并向该用户显示一条消息。显示的消息应非常简单,如“Hello ...
    她即我命阅读 8,618评论 0 5
  • 为了让我有一个更快速、更精彩、更辉煌的成长,我将开始这段刻骨铭心的自我蜕变之旅!从今天开始,我将每天坚持阅...
    李薇帆阅读 6,075评论 0 3
  • 似乎最近一直都在路上,每次出来走的时候感受都会很不一样。 1、感恩一直遇到好心人,很幸运。在路上总是...
    时间里的花Lily阅读 5,262评论 0 2