iOS新闻详情界面实现
2017-06-19 本文已影响763人
风外杏林香
1、首先了解到后台返回的数据格式（此处为网易新闻返回的数据格式）
/*
{
"CN8JAMBI0001875N":{
"body":"<!--IMG#0--><p> 本文的........</p>",//文章的核心内容
"users":Array[0],
"img":[
{
"ref":"<!--IMG#0-->", // 图片的占位符
"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:@"<div class=\"title\">%@</div>",[self.dataDictionary objectForKey:@"title"]];
[body appendFormat:@"<div class=\"time\">%@</div>",[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:@"<div class=\"img-parent\">"];
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:@"<img onload=\"%@\" width=\"%f\" height=\"%f\" src=\"%@\">",onload,width,height,[dict objectForKey:@"src"]];
[imgHtml appendString:@"</div>"];
[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>"];
[html appendString:@"<head>"];
[html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"InfoDetails.css" withExtension:nil]];//创建CSS文件
[html appendString:@"</head>"];
[html appendString:@"<body style=\"background:#f6f6f6\">"];
[html appendString:[self getBodyString]];
[html appendString:@"</body>"];
[html appendString:@"</html>"];
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实现新闻详情页面实现（图片的点击和视频的播放功能，后面会实现）
