新聞內容的圖文混排的效果,網(wǎng)上有人開源一個仿網(wǎng)易新聞的代碼挨队,本文就是簡單記錄學習其詳細頁面顯示的效果實現(xiàn);
一般網(wǎng)易詳情頁面后臺返回的數(shù)據(jù)內容與通常的json格式,其原理:通過網(wǎng)絡請求獲得相關的信息,再通過手機端進行拼HTML,然后在WebView進行展示蒿往,此處還對文章中的圖片增加點擊效果盛垦,可以保存到相冊中;文章的樣式已經存在項目中瓤漏,直接去調用腾夯;
1:首先了解兩個相關的實體對象,一個是新聞的主體內容蔬充,另外一個就是圖片的相關信息實體,所以我們需要NSURL進行讀取網(wǎng)站
NSURL *url = [NSURL URLWithString:@"http://c.m.163.com/nc/article/A7AQOT560001124J/full.html"];
2.進行數(shù)據(jù)請求(創(chuàng)建一個- (void)showNews:(NSDictionary *)news)將所請求接受的數(shù)據(jù)進行拼接
// 2.requets
NSURLRequest *request = [NSURLRequest requestWithURL:url];
// 3.發(fā)送請求
[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.取出網(wǎng)頁內容
NSString *body = news[@"body"];
// 2.取出圖片
NSDictionary *img = [news[@"img"] lastObject];
NSString *imgHTML = [NSString stringWithFormat:@"<img src=\"%@\" width=\"300\" height=\"171\">", img[@"src"]];
// 2.創(chuàng)建一個webView蝶俱,顯示網(wǎng)頁
UIWebView *webView = [[UIWebView alloc] init];
webView.frame = self.view.bounds;
[self.view addSubview:webView];
// 3.拼接網(wǎng)頁內容
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.加載網(wǎng)頁內容
[webView loadHTMLString:html baseURL:nil];
}