新闻内容的图文混排的效果,网上有人开源一个仿网易新闻的代码,本文就是简单记录学习其详细页面显示的效果实现;
一般网易详情页面后台返回的数据内容与通常的json格式,其原理:通过网络请求获得相关的信息,再通过手机端进行拼HTML,然后在WebView进行展示,此处还对文章中的图片增加点击效果,可以保存到相册中;文章的样式已经存在项目中,直接去调用;
1:首先了解两个相关的实体对象,一个是新闻的主体内容,另外一个就是图片的相关信息实体,所以我们需要NSURL进行读取网站
NSURL *url = [NSURL URLWithString:@"http://c.m.163.com/nc/article/A7AQOT560001124J/full.html"];
2.进行数据请求(创建一个- (void)showNews:(NSDictionary *)news)将所请求接受的数据进行拼接
// 2.requets
NSURLRequest *request = [NSURLRequest requestWithURL:url];
// 3.发送请求
[NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:nil];
NSDictionary *news = dict[@"A7AQOT560001124J"];
[self showNews:news];
}];
- (void)showNews:(NSDictionary *)news
{
// 1.取出网页内容
NSString *body = news[@"body"];
// 2.取出图片
NSDictionary *img = [news[@"img"] lastObject];
NSString *imgHTML = [NSString stringWithFormat:@"<img src=\"%@\" width=\"300\" height=\"171\">", img[@"src"]];
// 2.创建一个webView,显示网页
UIWebView *webView = [[UIWebView alloc] init];
webView.frame = self.view.bounds;
[self.view addSubview:webView];
// 3.拼接网页内容
NSString *html = [body stringByReplacingOccurrencesOfString:img[@"ref"] withString:imgHTML];
// 4.取出新闻标题
NSString *title = news[@"title"];
// 5.取出新闻的时间
NSString *time = news[@"ptime"];
// 头部内容
NSString *header = [NSString stringWithFormat:@"<div class=\"title\">%@</div><div class=\"time\">%@</div>", title, time];
html = [NSString stringWithFormat:@"%@%@", header, html];
// 链接mainBundle中的CSS文件
NSURL *cssURL = [[NSBundle mainBundle] URLForResource:@"news" withExtension:@"css"];
html = [NSString stringWithFormat:@"%@<link rel=\"stylesheet\" href=\"%@\">", html, cssURL];
// 5.加载网页内容
[webView loadHTMLString:html baseURL:nil];
}