iOS新闻详情界面实现

1、首先了解到后台返回的数据格式（此处为网易新闻返回的数据格式）

/*
{
 "CN8JAMBI0001875N":{
 "body":"
　　本文的........
",//文章的核心内容
 "users":Array[0],
 "img":[
 {
 "ref":"",   // 图片的占位符
 "pixel":"750*300",      //图片的宽高
 "alt":"",               //图片的文字说明
 "src":"http://cms-bucket.nosdn.127.net/0710e75f54d146fc87fb801d4cdfc39d20170619000031.jpeg"
 },     //图片的路径
 ],
 "title":"中央查处这件事，让一些地方“形同十级地震”",//文章的标题
 "ptime":"2016-09-20 21:56:57"//文章的发布时间
 }
 }
*/

2、获取数据并解析数据

self.dataDictionary = [NSDictionary dictionaryWithDictionary:[dict objectForKey:@"CN8JAMBI0001875N"]];//得到详情数据字典

3、使用UIWebView来接收页面返回的数据

@property (nonatomic, strong)UIWebView *webView;
- (UIWebView *)webView
{
    if (!_webView) {
        _webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 64, ScreenWidth, 100)];
        _webView.delegate = self;
    }
    return _webView;
}

4、核心内容：加载网页的内容，里面有设计拼接网页元素，以及h5的相关知识

- (NSString *)getBodyString
{
    NSMutableString *body = [NSMutableString string];
    if (self.dataDictionary.count != 0) {
        [body appendFormat:@"
%@
",[self.dataDictionary objectForKey:@"title"]];
        [body appendFormat:@"
%@
",[self.dataDictionary objectForKey:@"ptime"]];        
        [body appendString:[self.dataDictionary objectForKey:@"body"]];
        NSMutableArray *imageArr = [self.dataDictionary objectForKey:@"img"];
        for (int i = 0; i < imageArr.count; i ++) {
            NSDictionary *dict = [imageArr objectAtIndex:i];
            NSMutableString *imgHtml = [NSMutableString string];
            // 设置img的div
            [imgHtml appendString:@"
"];
            NSArray *pixel = [[dict objectForKey:@"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://github.com/dsxNiubility?src=' +this.src+'&top=' + this.getBoundingClientRect().top + '&whscale=' + this.clientWidth/this.clientHeight ;"
            "};";
            [imgHtml appendFormat:@"",onload,width,height,[dict objectForKey:@"src"]];
            [imgHtml appendString:@"
"];
            [body replaceOccurrencesOfString:[dict objectForKey:@"ref"] withString:imgHtml options:NSCaseInsensitiveSearch range:NSMakeRange(0, body.length)];
        }
    }
    return body;
}
- (NSString *)getHtmlString
{
    NSMutableString *html = [NSMutableString string];
    [html appendString:@""];
    [html appendString:@""];
    [html appendFormat:@"",[[NSBundle mainBundle] URLForResource:@"InfoDetails.css" withExtension:nil]];//创建CSS文件
    [html appendString:@""];
    [html appendString:@""];
    [html appendString:[self getBodyString]];
    [html appendString:@""];
    [html appendString:@""];
    return html;
}

5、UIWebView代理方法实现

#pragma mark -- UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    self.webView.height = self.webView.scrollView.contentSize.height;
    [self.dataTableView reloadData]; //同时刷新页面
}

6、将webView 直接加载到tableViewheader上面,同时设置header高度为webview高度

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return self.webView.height;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    return self.webView;
}

7、如果需要加载评论信息的话 直接可以自定义cell完成实现，
以上就是使用webView实现新闻详情页面实现（图片的点击和视频的播放功能，后面会实现）