iOS實(shí)現(xiàn)markdown展示

背景:最近AI對(duì)話(huà)比較熱門(mén),AI回復(fù)的內(nèi)容有很多markdown格式,需要展示一下。

三方庫(kù):CocoaMarkdown

在github上搜索并下載源碼到本地,打開(kāi)工程文件,選擇Any iOS Device編譯成功后,在左側(cè)文件欄最下面有一個(gè)Products目錄,展開(kāi)找到CocoaMarkdown.framework,將此文件復(fù)制到自己的工程,這里是真機(jī)的,需要使用模擬器的自己選擇模擬器編譯進(jìn)行后再合并,這里不敘述。

下面是關(guān)鍵代碼,計(jì)算高度

    // 導(dǎo)入
    #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.字符串轉(zhuǎn)data
    NSData *data = [self.body dataUsingEncoding:NSUTF8StringEncoding];

    // 2. 渲染成 NSAttributedString
    CMDocument *doc = [[CMDocument alloc] initWithData:data options:CMDocumentOptionsSmart];
    
    // 3. 創(chuàng)建屬性對(duì)象
    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. 計(jì)算高度,給定最大寬度(例如 tableView 的 contentWidth)
    CGRect boundingRect = [attrStr boundingRectWithSize:maxSize
                                              options:NSStringDrawingUsesLineFragmentOrigin
                                              context:nil];
    self.aiResHeight = ceil(boundingRect.size.height);

下面是關(guān)鍵代碼,使用UITextView進(jìn)行渲染

- (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 就關(guān)掉
        _body.textContainerInset = UIEdgeInsetsMake(0, 0, 0, 0);// 去掉上下默認(rèn)8pt邊距
        _body.textContainer.lineFragmentPadding = 0; // 去掉左右 5 pt 的邊距
        [_body setContentCompressionResistancePriority:UILayoutPriorityRequired
                                                  forAxis:UILayoutConstraintAxisVertical];
    }
    return _body;
}
// 賦值顯示
self.body.attributedText = att.attrStr;
// 設(shè)置位置
self.body.frame = CGRectMake(16, 12, att.aiResWidth, att.aiResHeight);

注:去掉邊距比較重要, 不然顯示可能會(huì)少一行。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 用到的組件 1、通過(guò)CocoaPods安裝 2、第三方類(lèi)庫(kù)安裝 3、第三方服務(wù) 友盟社會(huì)化分享組件 友盟用戶(hù)反饋 ...
    SunnyLeong閱讀 15,139評(píng)論 1 180
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,043評(píng)論 4 61
  • """1.個(gè)性化消息: 將用戶(hù)的姓名存到一個(gè)變量中,并向該用戶(hù)顯示一條消息。顯示的消息應(yīng)非常簡(jiǎn)單,如“Hello ...
    她即我命閱讀 4,828評(píng)論 0 6
  • 為了讓我有一個(gè)更快速、更精彩、更輝煌的成長(zhǎng),我將開(kāi)始這段刻骨銘心的自我蛻變之旅!從今天開(kāi)始,我將每天堅(jiān)持閱...
    李薇帆閱讀 2,224評(píng)論 1 4
  • 似乎最近一直都在路上,每次出來(lái)走的時(shí)候感受都會(huì)很不一樣。 1、感恩一直遇到好心人,很幸運(yùn)。在路上總是...
    時(shí)間里的花Lily閱讀 1,703評(píng)論 1 3

友情鏈接更多精彩內(nèi)容