仿网易新闻中详细页图文混排功能的实现

注：文章来源于网络，感谢原作者
最近在了解关于新闻内容的图文混排的效果，网上有人开源一个仿网易新闻的代码，本文就是简单记录学习其详细页面显示的效果实现；

下载地址：https://github.com/dsxNiubility/SXNews
效果图：

效果1	效果2

其原理：通过网络请求获得相关的信息,再通过手机端进行拼HTML,然后在WebView进行展示，此处还对文章中的图片增加点击效果，可以保存到相册中；文章的样式已经存在项目中，直接去调用。

1：首先了解两个相关的实体对象，一个是新闻的主体内容，另外一个就是图片的相关信息实体

1：主体内容

//.H文件

@interface SXDetailModel : NSObject
/** 新闻标题 */
@property (nonatomic, copy) NSString *title;
/** 新闻发布时间 */
@property (nonatomic, copy) NSString *ptime;
/** 新闻内容 */
@property (nonatomic, copy) NSString *body;
/** 新闻配图(希望这个数组中以后放HMNewsDetailImg模型) */
@property (nonatomic, strong) NSArray *img;
//创建详细页对象
+ (instancetype)detailWithDict:(NSDictionary *)dict;
@end

//.M文件

#import "SXDetailModel.h"
#import "SXDetailImgModel.h"  //图片类

@implementation SXDetailModel

/** 便利构造器 */
+ (instancetype)detailWithDict:(NSDictionary *)dict
{
    SXDetailModel *detail = [[self alloc]init];
    detail.title = dict[@"title"];
    detail.ptime = dict[@"ptime"];
    detail.body = dict[@"body"];
    
    NSArray *imgArray = dict[@"img"];  //数组里面存的是字典，每一个字典是一张图片的信息
    NSMutableArray *temArray = [NSMutableArray arrayWithCapacity:imgArray.count];
    
    for (NSDictionary *dict in imgArray) {

        //此model类，用于对图片的信息的相关处理，处理结果存入model
        SXDetailImgModel *imgModel = [SXDetailImgModel detailImgWithDict:dict];
        [temArray addObject:imgModel];
    }

    detail.img = temArray;//详细页里面的图片

    return detail;
}

@end

2：图片信息实体

//.H文件：

@interface SXDetailImgModel : NSObject
@property (nonatomic, copy) NSString *src;
/** 图片尺寸 */
@property (nonatomic, copy) NSString *pixel;
/** 图片所处的位置 */
@property (nonatomic, copy) NSString *ref;
+ (instancetype)detailImgWithDict:(NSDictionary *)dict;
@end

.M文件：

@implementation SXDetailImgModel

/** 便利构造器方法 */
+ (instancetype)detailImgWithDict:(NSDictionary *)dict
{
    SXDetailImgModel *imgModel = [[self alloc]init];
    imgModel.ref = dict[@"ref"];
    imgModel.pixel = dict[@"pixel"];
    imgModel.src = dict[@"src"];
    
    return imgModel;
}

@end

2：网络请求，并转化成实体对象

NSString *url = [NSString stringWithFormat:@"http://c.m.163.com/nc/article/%@/full.html",self.newsModel.docid];

//SXHTTPManager类是自己对AFN的二次封装
[[SXHTTPManager manager]GET:url parameters:nil success:^(AFHTTPRequestOperation *operation, id responSEObject) {

        self.detailModel = [SXDetailModel detailWithDict:responseObject[self.newsModel.docid]];
        [self showInWebView];
    }failure:^(AFHTTPRequestOperation *operation, NSError *error) {
        NSLog(@"failure %@",error);
    }];

其中[self showInWebView]就是下一步中拼接HTML源代码的内容，这边可以查看它的URL,以及回转回来的内容：
http://c.m.163.com/nc/article/B4A3HU9300963VRO/full.html

{"B4A3HU9300963VRO":{"body":"
　　中国日报网9月24日电（信莲）当地时间9月23日，第八届中美互联网论坛在美国西雅图召开，300多名中美互联网巨头齐聚一堂，共商网络空间合作与发展大计。当天下午，正在美国访问的来到会场会见中美互联网企业巨头，并发表了热情洋溢的讲话。

他强调，中国倡导建设和平、安全、开放、合作的网络空间，主张各国制定符合自身国情的互联网公共政策。中美都是网络大国，双方拥有重要共同利益和合作空间。双方理应在相互尊重、相互信任的基础上，就网络问题开展建设性对话，打造中美合作的亮点，让网络空间更好地造福两国人民和世界人民。

此前，22日在西雅图市出席华盛顿州当地政府和美国友好团体联合举行的欢迎宴会并发表演讲时强调，中国是网络安全的坚定维护者，愿同美国建立两国共同打击网络犯罪高级别联合对话机制。

连续就互联网阐述重要观点，受到参加中美互联网论坛的中美互联网巨头的高度关注。参加23日会见的巨头们在现场聆听了的讲话，反应更是强烈。

脸谱创始人扎克伯格说，自己一直在读的著作，知道他今天所讲的与此前的思想都是一致的，那就是中国会坚定不移地对外开放；是一个很坚定的人，今天的讲话展现了一贯的立场和……

3：拼接HTML源代码

#pragma mark - ******************** 拼接html语言
- (void)showInWebView
{
    NSMutableString *html = [NSMutableString string];
    [html appendString:@""];
    [html appendString:@""];
    [html appendFormat:@"",[[NSBundle mainBundle] URLForResource:@"SXDetails.CSS" withExtension:nil]];
    [html appendString:@""];
    
    [html appendString:@""];
    [html appendString:[self touchBody]];
    [html appendString:@""];
    
    [html appendString:@""];
    
    [self.webView loadHTMLString:html baseURL:nil];
}

- (NSString *)touchBody
{
    NSMutableString *body = [NSMutableString string];
    [body appendFormat:@"
%@
",self.detailModel.title];
    [body appendFormat:@"
%@
",self.detailModel.ptime];
    if (self.detailModel.body != nil) {
        [body appendString:self.detailModel.body];
    }
    // 遍历img
    for (SXDetailImgModel *detailImgModel in self.detailModel.img) {
        NSMutableString *imgHtml = [NSMutableString string];
    // 设置img的div
         [imgHtml appendString:@"
"];
    
    // 数组存放被切割的像素
        NSArray *pixel = [detailImgModel.pixel componentsSeparatedByString:@"*"];
        CGFloat width = [[pixel firstObject]floatValue];
        CGFloat height = [[pixel lastObject]floatValue];
    // 判断是否超过最大宽度
        CGFloat maxWidth = [UIScreen mainScreen].bounds.size.width * 0.96;
      if (width > maxWidth) {
            height = maxWidth / width * height;
            width = maxWidth;
        }
        
        NSString *onload = @"this.onclick = function() {"
                            "  window.location.href = 'sx:src=' +this.src;"
                                    "};";
     [imgHtml appendFormat:@"",onload,width,height,detailImgModel.src];
    // 结束标记 
    [imgHtml appendString:@"
"];
    // 替换标记
        [body replaceOccurrencesOfString:detailImgModel.ref withString:imgHtml options:NSCaseInsensitiveSearch range:NSMakeRange(0, body.length)];
    }
    return body;
}  

这边注意有个是去读项目中已经写好的CSS文件，来定义新闻页在手机端的显示样式；图片也增加相应的点击事件，为后面WebView做通信，把拼接好的HTML直接展示在webView里；此处还对图片的大小进行比较跟处理；并在图片的位置进行替换标记；

SXDetails.css样式内容：

.title {
    text-align:left;
    font-size:25px;
    font-weight:bold;
    color:black;
    margin-left:10px;

}

.time {
    text-align:left;
    font-size:15px;
    color:gray;
    margin-top:7px;
    margin-bottom:7px;
    margin-left:10px;
    
}

.img-parent {
    text-align:center;
    margin-bottom:10px;

}

4:关于WebView与网页进行交互，并把图片保存到手机相册中

#pragma mark - ******************** 将发出通知时调用
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *url = request.URL.absoluteString;
    NSRange range = [url rangeOfString:@"sx:src="];
   if (range.location != NSNotFound) {
        NSInteger begin = range.location + range.length;
        NSString *src = [url substringFromIndex:begin];
        [self savePictureToAlbum:src];
        return NO;
    }
    return YES;
}

#pragma mark - ******************** 保存到相册方法
- (void)savePictureToAlbum:(NSString *)src
{
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提示" message:@"确定要保存到相册吗？" preferredStyle:UIAlertControllerStyleActionSheet];
    
 [alert addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil]];
    [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDestructive handler:^(UIAlertAction *action) {
        
        NSURLCache *cache =[NSURLCache sharedURLCache];
        NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:src]];
    NSData *imgData = [cache cachedResponseForRequest:request].data; UIImage *image = [UIImage imageWithData:imgData]; UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil); 

}]]; 
[self presentViewController:alert animated:YES completion:nil];
}

注意关于webView协议的self.webView.delegate = self

5:拼接后的HTML内容如下:

无

6：效果图中另外一张有比较多的图片源文件如下：

请求地址：http://c.m.163.com/nc/article/B4A39DDB00964LQ9/full.html