在上一篇博客 開源中國iOS客戶端學習——(十二)用戶登錄 中講到用戶登錄界面,loginView.xib佈局中咱們看到有一個UIWebView控件,可是它並無加載一個網頁,而是顯示一些文本信息,其中有一些網址的連接,點擊這個連接的時候條找轉到該網站,或者點擊某個文字標籤一樣的效果。html
再來看看另一個ViewController,在News/tab下有一個NewDetail類,查看這個ViewController類的xib時又看到WebView控件,一樣他也不是用來加載一個網頁,而是做爲視圖佈局使用,在開源中國iOS客戶端源碼中仍是不止這兩個類中使用webView控件做爲佈局引擎,在工程文件tab目錄下的SinglePost、SoftwareDeatil 、BlogDetail這些類都是這樣使用;NewDetail這個類做用用於加載顯示一條資訊信息的詳細內容;git
而後來看看WebView佈局界面顯示內容,在選中首頁綜合裏資訊某一條的時候,想查看給諮詢詳情,而後查看一些界面特效:github
或許咱們會想問什麼要使用WebView佈局呢,普通的view也同樣能夠顯示,顯示文字有ULabel UITextView 顯示圖片有UIImageView均可以知足,接着向下看。。。web
有一些特殊字體顏色,點擊他們的時候有的跳轉道另外一個視圖,有的跳轉道某一個網站,可以響應用戶的交互;當點擊TNW 和點擊相關文章的某一文章標題時抓取截圖示例以下api
或許有人已經知道這些都是iOS中的富文本,確實這就是使用Web視圖顯示富文本;在普通view中不可使用富文本嗎?必然也能夠,還有一些第三方類庫如RTLabel來支持富文本的使用,在iOS 6爲UIKit也帶來了富文本的支持。或許顯示簡單文本標籤沒問題,可是佈局一些複雜的視圖就可能比較難搞了,就像在一段文本中對某兩字加上超連接,點擊兩個字跳轉道一個網頁,若是是單單兩個字也不是難題,可是對於使用多條信息使用同一個xib界面佈局怎麼辦?咱們並不知道哪些字須要使用富文本加上超連接?這時候webView視圖成了最好解決方案,常常咱們打開一個網頁的時候好比hao123導航,上面有許多文字連接,點擊這些文字跳轉道相應官網,恰好 WebView也能夠加載HTML代碼,並且也很簡單,可是在View上就有些困難了;瀏覽器
好了 不廢話,先看看WebView如何加載某一條資訊的內容,先看看某一篇資訊,返回xml格式 http://www.oschina.net/action/api/news_detail?id=40840,解析body節點中的數據是HTML代碼,由WebView加載這些HTML代碼,其餘標題有對應的url,將解析的標題和url格式化轉換成HTML代碼加載道webView中;緩存
必然仍是先看ViewDidLoad方法網絡
- (void)viewDidLoad { [super viewDidLoad]; self.tabBarItem.title = @"資訊詳情"; self.tabBarItem.p_w_picpath = [UIImage p_w_picpathNamed:@"detail"]; //WebView的背景顏色去除 [Tool clearWebViewself.webView]; self.singleNews = [[SingleNews alloc] init]; self.navigationController.title = @"資訊詳情"; self.webView.delegate = self; [self.webView loadHTMLString:@"" baseURL:nil]; if ([Config Instance].isNetworkRunning) { MBProgressHUD *hud = [[MBProgressHUD alloc] initWithView:self.view]; [Tool showHUD:@"正在加載" andView:self.view andHUD:hud]; NSString *url = [NSString stringWithFormat:@"%@?id=%d",api_news_detail, newsID]; [[AFOSCClient sharedClient] getPath:url parameters:nil success:^(AFHTTPRequestOperation *operation, id responseObject) { [Tool getOSCNotice2:operation.responseString]; [hud hide:YES]; self.singleNews = [Tool readStrNewsDetail:operation.responseString]; if (self.singleNews == nil) { [Tool ToastNotification:@"加載失敗" andView:self.view andLoading:NO andIsBottom:NO]; return; } [self loadData:self.singleNews]; //若是有網絡 則緩存它 if ([Config Instance].isNetworkRunning) { [Tool saveCache:1 andID:self.singleNews._id andString:operation.responseString]; } } failure:^(AFHTTPRequestOperation *operation, NSError *error) { [hud hide:YES]; if ([Config Instance].isNetworkRunning) { [Tool ToastNotification:@"錯誤 網絡無鏈接" andView:self.view andLoading:NO andIsBottom:NO]; } }]; } else { NSString *value = [Tool getCache:1 andID:newsID]; if (value) { self.singleNews = [Tool readStrNewsDetail:value]; [self loadData:self.singleNews]; } else { [Tool ToastNotification:@"錯誤 網絡無鏈接" andView:self.view andLoading:NO andIsBottom:NO]; } } }
ViewDidLoad中主要兩個方法:ide
1. [ToolclearWebViewBackground:self.webView];去掉WebView背景色,顯示數據的時候就不會以爲他是一個WebView而是一個普通的View視圖;佈局
2. [selfloadData:self.singleNews]; 格式化處理字符串,轉換成HTML格式,如設置html的背景顏色字體顏色字體大小等,對於HTML也沒用很深研究,大概能看懂一點,
- (void)loadData:(SingleNews *)n { [self refreshFavorite:n]; //通知去修改新聞評論數 Notification_CommentCount *notification = [[Notification_CommentCount alloc] initWithParameters:self andCommentCount:n.commentCount]; [[NSNotificationCenter defaultCenter] postNotificationName:Notification_DetailCommentCount object:notification]; //新聞 主要用於微博分享 [Config Instance].shareObject = [[ShareObject alloc] initWithParameters:n.title andUrl:n.url]; //控件更新 NSString *author_str = [NSString stringWithFormat:@"<a href='http://my.oschina.net/u/%d'>%@</a> 發佈於 %@",n.authorid,n.author,n.pubDate]; NSString *software = @""; if ([n.softwarename isEqualToString:@""] == NO) { software = [NSString stringWithFormat:@"<div id='oschina_software' style='margin-top:8px;color:#FF0000;font-size:14px;font-weight:bold'>更多關於: <a href='%@'>%@</a> 的詳細信息</div>",n.softwarelink, n.softwarename]; } NSString *html = [NSString stringWithFormat:@"<body style='background-color:#EBEBF3'>%@<div id='oschina_title'>%@</div><div id='oschina_outline'>%@</div><hr/><div id='oschina_body'>%@</div>%@%@%@</body>",HTML_Style, n.title,author_str, n.body,software,[Tool generateRelativeNewsString:n.relativies],HTML_Bottom]; NSString *result = [Tool getHTMLString:html]; [self.webView loadHTMLString:result baseURL:nil]; }
[selfloadData:self.singleNews]方法中對HTML特色格式化中
//html頭部 #define HTML_Style @"<style>#oschina_title {color: #000000; margin-bottom: 6px; font-weight:bold;}#oschina_title img{vertical-align:middle;margin-right:6px;}#oschina_title a{color:#0D6DA8;}#oschina_outline {color: #707070; font-size: 12px;}#oschina_outline a{color:#0D6DA8;}#oschina_software{color:#808080;font-size:12px}#oschina_body img {max-width: 300px;}#oschina_body {font-size:16px;max-width:300px;line-height:24px;} #oschina_body table{max-width:300px;}#oschina_body pre { font-size:9pt;font-family:Courier New,Arial;border:1px solid #ddd;border-left:5px solid #6CE26C;background:#f6f6f6;padding:5px;}</style>" #define HTML_Bottom @"<div style='margin-bottom:60px'/>"
[ToolgenerateRelativeNewsString:n.relativies] 處理資訊後面相關文章的佈局的HTML
+ (NSString *)generateRelativeNewsString:(NSArray *)array { if (array == nil || [array count] == 0) { return @""; } NSString *middle = @""; for (RelativeNews *r in array) { middle = [NSString stringWithFormat:@"%@<a href=%@ style='text-decoration:none'>%@</a><p/>",middle, r.url, r.title]; } return [NSString stringWithFormat:@"<hr/>相關文章<div style='font-size:14px'><p/>%@</div>", middle]; }
[self.webView loadHTMLString:result baseURL:nil];纔是將html格式化成NSString對象後加載道WebView上,還必須處理webView的一個委託方法。
若是委託方法返回YES表示容許UIWebView請求,可是webView用來佈局顯示自定義內容,應該返回爲NO;假如咱們點擊某個文字超連接或url時就會發送發送給委託方法,基於這個url作出響應;
#pragma 瀏覽器連接處理 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { [Tool analysis:[request.URL absoluteString] andNavController:self.parentViewController.navigationController]; if ([request.URL.absoluteString isEqualToString:@"about:blank"]) { return YES; } else { return NO; } }
if()語句有個判斷,若是請求的URL網址是空白,則webView就會加載這個頁面,不然不加載這個url request.URL.absoluteString表示獲取url完整連接
本篇博客並沒講解多少WebView如何去佈局,主要還在於HTML標籤的設計,仍是請求數據,解析xml,解析出來的數據格式化添加到HTML的標籤節點之中,再有WebView去加載顯示;
下面的一個示例測試,獲取的都是靜態文本數據,主要仍是看HTML格式,效果圖: