图文混排三种境界

作者: iOSPeter | 来源:发表于2017-04-19 16:06 被阅读79次

目标:显示富文本,包括文字、图片、链接等,图片需要点击预览,链接可以正常跳转。

境界一. 采用UILabel实现

使用方法:

NSAttributedString *attributedString = [[NSAttributedString alloc] initWithData:[content dataUsingEncoding:NSUnicodeStringEncoding] options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType} documentAttributes:nil error:nil];

contentLabel.attributedText = attributedString;

优点:使用简单,可以完美显示HTML格式的内容。
缺点:富文本渲染速度一般,很难实现图片预览和链接跳转。

境界二. 采用UIWebView或者WKWebView实现

使用方法:
方法1. [webView loadHTMLString:content baseURL:nil];
方法2. [webView loadRequest:[NSURL URLWithString:@"http://xxx"]];

图片预览:
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    NSString *jsStr = @"function registerImageClickAction(){\
    var imgs=document.getElementsByTagName('img');\
    var length=imgs.length;\
    for(var i=0;i<length;i++){\
    img=imgs[i];\
    img.onclick=function(){\
    window.location.href='image-preview:'+this.src}\
    }\
    }";
    [webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        [webView evaluateJavaScript:@"registerImageClickAction();" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            
        }];
    }];
}
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSURL *requestURL = navigationAction.request.URL;
    //预览图片
    if ([requestURL.scheme isEqualToString:@"image-preview"] && self.imageMArray.count > 0) {
    NSString* path = [requestURL.absoluteString substringFromIndex:[@"image-preview:" length]];
    path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    //path 就是被点击图片的url
    int k = 0;
    for (int i = 0; i < self.imageMArray.count; i ++) {
        if ([self.imageMArray[i] isEqualToString:path]) {
            k = i;
            break;
        }
    }
    
    SDPhotoBrowserd *browser = [[SDPhotoBrowserd alloc] init];
    browser.imageCount = xxx; // 图片总数
    browser.currentImageIndex = k;
    browser.delegate = self;
    [browser show];
    
    decisionHandler(WKNavigationActionPolicyCancel);
 }
 decisionHandler(WKNavigationActionPolicyAllow);
}

优点:可以完美显示HTML格式内容;链接跳转、图片预览容易实现。
缺点:量级较重,性能一般,体验较差。

境界三. 采用CoreText实现

使用方法:参考巧神的三篇文章

  1. 基于 CoreText 的排版引擎:基础
    http://blog.devtang.com/2015/06/27/using-coretext-1/
  2. 基于 CoreText 的排版引擎:进阶
    http://blog.devtang.com/2015/06/27/using-coretext-2/
  3. 猿题库iOS客户端的技术细节(三):基于CoreText的排版引擎
    http://blog.devtang.com/2013/10/21/the-tech-detail-of-ape-client-3/

优点:可以完美显示HTML格式内容,而且渲染速度快,性能很不错!
缺点:链接跳转、图片预览等功能需要自己实现,实现难道中等,需要后台配合。

相关文章

  • 图文混排三种境界

    目标:显示富文本,包括文字、图片、链接等,图片需要点击预览,链接可以正常跳转。 境界一. 采用UILabel实现 ...

  • 尊重人是智慧

    尊重别人,可以分为三种境界: 第一种境界:尊重亲人 第二种境界:尊重路人 第三种境界:尊重敌人 当我们可以做到尊重...

  • 社群运营笔记(4)如何让陌生人也能主动成交

    【听课笔记】 1.成交有三种境界: 第一种境界:孙子式成交; 第二种境界:朋友式成交; 第三种境界:被动成交(无痕...

  • 人这一生不过这三种境界,缺一不可

    王国维先生在《人间词话》这本书里阐释了人生的三种境界,这三种境界却是人这一生必须经历的,如果将此三种境界化归本来,...

  • 爱的境界初稿

    我认为人与人之间沟通有三种境界,第一种境界是语言沟通,第二这种境界是肢体沟通,第三种境界是灵魂沟通 有的人你认识他...

  • 四种境界,放大人生格局

    王维曾有治学三境界,三种境界代表三种成就。而我们这平凡而真实的一生,大约也有四种境界,四种境界亦是四种心态,四种人...

  • 看懂这4重境界,放大你的人生格局!

    王国维曾有治学三境界,三种境界代表三种成就。而我们这平凡而真实的一生,大约也有四种境界,四种境界亦是四种心态,四种...

  • 王国维经典十言

    1、人生三境界 王国维的人生三种境界,不知点醒了多少人: 古今之成大事业、大学问者,必经过三种之境界。“昨夜西风凋...

  • 三种境界

    前言 古今之成大事业、大学问者,罔不经过三种之境界。 三种境界 原文   古今之成大事业、大学问者,罔不经过三种之...

  • CoreText实现图文混排之文字环绕及点击算法

    系列文章: CoreText实现图文混排 CoreText实现图文混排之点击事件 CoreText实现图文混排之文...

网友评论

    本文标题:图文混排三种境界

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