在上一篇博客 開源中國(guó)iOS客戶端學(xué)習(xí)——(十二)用戶登陸 中講到用戶登陸界面,loginView.xib布局中我們看到有一個(gè)UIWebView控件,但是它并沒有加載一個(gè)網(wǎng)頁(yè),而是顯示一些文本信息,其中有一些網(wǎng)址的鏈接,點(diǎn)擊這個(gè)鏈接的時(shí)候條找轉(zhuǎn)到該網(wǎng)站,或者點(diǎn)擊某個(gè)文字標(biāo)簽同樣的效果。
專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)黃山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
再來(lái)看看另外一個(gè)ViewController,在News/tab下有一個(gè)NewDetail類,查看這個(gè)ViewController類的xib時(shí)又看到WebView控件,同樣他也不是用來(lái)加載一個(gè)網(wǎng)頁(yè),而是作為視圖布局使用,在開源中國(guó)iOS客戶端源碼中還是不止這兩個(gè)類中使用webView控件作為布局引擎,在工程文件tab目錄下的SinglePost、SoftwareDeatil 、BlogDetail這些類都是這樣使用;NewDetail這個(gè)類作用用于加載顯示一條資訊信息的詳細(xì)內(nèi)容;
然后來(lái)看看WebView布局界面顯示內(nèi)容,在選中首頁(yè)綜合里資訊某一條的時(shí)候,想查看給咨詢?cè)斍?,然后查看一些界面特?
或許我們會(huì)想問(wèn)什么要使用WebView布局呢,普通的view也一樣可以顯示,顯示文字有ULabel UITextView 顯示圖片有UIImageView都可以滿足,接著向下看。。。
有一些特殊字體顏色,點(diǎn)擊他們的時(shí)候有的跳轉(zhuǎn)道另一個(gè)視圖,有的跳轉(zhuǎn)道某一個(gè)網(wǎng)站,能夠響應(yīng)用戶的交互;當(dāng)點(diǎn)擊TNW 和點(diǎn)擊相關(guān)文章的某一文章標(biāo)題時(shí)抓取截圖示例如下
或許有人已經(jīng)知道這些都是iOS中的富文本,確實(shí)這就是使用Web視圖顯示富文本;在普通view中不可以使用富文本嗎?必然也可以,還有一些第三方類庫(kù)如RTLabel來(lái)支持富文本的使用,在iOS 6為UIKit也帶來(lái)了富文本的支持?;蛟S顯示簡(jiǎn)單文本標(biāo)簽沒問(wèn)題,但是布局一些復(fù)雜的視圖就可能比較難搞了,就像在一段文本中對(duì)某兩字加上超鏈接,點(diǎn)擊兩個(gè)字跳轉(zhuǎn)道一個(gè)網(wǎng)頁(yè),如果是單單兩個(gè)字也不是難題,但是對(duì)于使用多條信息使用同一個(gè)xib界面布局怎么辦?我們并不知道哪些字需要使用富文本加上超鏈接?這時(shí)候webView視圖成了最好解決方案,經(jīng)常我們打開一個(gè)網(wǎng)頁(yè)的時(shí)候比如hao123導(dǎo)航,上面有許多文字鏈接,點(diǎn)擊這些文字跳轉(zhuǎn)道相應(yīng)官網(wǎng),剛好 WebView也可以加載HTML代碼,而且也很簡(jiǎn)單,但是在View上就有些困難了;
好了 不廢話,先看看WebView如何加載某一條資訊的內(nèi)容,先看看某一篇資訊,返回xml格式 http://www.oschina.net/action/api/news_detail?id=40840,解析body節(jié)點(diǎn)中的數(shù)據(jù)是HTML代碼,由WebView加載這些HTML代碼,其他標(biāo)題有對(duì)應(yīng)的url,將解析的標(biāo)題和url格式化轉(zhuǎn)換成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]; //如果有網(wǎng)絡(luò) 則緩存它 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:@"錯(cuò)誤 網(wǎng)絡(luò)無(wú)連接" 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:@"錯(cuò)誤 網(wǎng)絡(luò)無(wú)連接" andView:self.view andLoading:NO andIsBottom:NO]; } } }
ViewDidLoad中主要兩個(gè)方法:
1.[ToolclearWebViewBackground:self.webView];去掉WebView背景色,顯示數(shù)據(jù)的時(shí)候就不會(huì)覺得他是一個(gè)WebView而是一個(gè)普通的View視圖;
2.[selfloadData:self.singleNews]; 格式化處理字符串,轉(zhuǎn)換成HTML格式,如設(shè)置html的背景顏色字體顏色字體大小等,對(duì)于HTML也沒用很深研究,大概能看懂一點(diǎn),
- (void)loadData:(SingleNews *)n { [self refreshFavorite:n]; //通知去修改新聞評(píng)論數(shù) 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:@"%@ 發(fā)布于 %@",n.authorid,n.author,n.pubDate]; NSString *software = @""; if ([n.softwarename isEqualToString:@""] == NO) { software = [NSString stringWithFormat:@"更多關(guān)于: %@ 的詳細(xì)信息",n.softwarelink, n.softwarename]; } NSString *html = [NSString stringWithFormat:@"%@%@%@%@%@%@%@",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]方法中對(duì)HTML特點(diǎn)格式化中
兩個(gè)宏定義 HTML_Style HTML_Bottom//html頭部 #define HTML_Style @"" #define HTML_Bottom @""
[ToolgenerateRelativeNewsString:n.relativies] 處理資訊后面相關(guān)文章的布局的HTML
+ (NSString *)generateRelativeNewsString:(NSArray *)array { if (array == nil || [array count] == 0) { return @""; } NSString *middle = @""; for (RelativeNews *r in array) { middle = [NSString stringWithFormat:@"%@%@",middle, r.url, r.title]; } return [NSString stringWithFormat:@"
相關(guān)文章%@", middle]; }
[self.webView loadHTMLString:result baseURL:nil];才是將html格式化成NSString對(duì)象后加載道WebView上,還必須處理webView的一個(gè)委托方法。
如果委托方法返回YES表示允許UIWebView請(qǐng)求,但是webView用來(lái)布局顯示自定義內(nèi)容,應(yīng)該返回為NO;假如我們點(diǎn)擊某個(gè)文字超鏈接或url時(shí)就會(huì)發(fā)送發(fā)送給委托方法,基于這個(gè)url做出響應(yīng);
#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()語(yǔ)句有個(gè)判斷,如果請(qǐng)求的URL網(wǎng)址是空白,則webView就會(huì)加載這個(gè)頁(yè)面,否則不加載這個(gè)url request.URL.absoluteString表示獲取url完整鏈接
本篇博客并沒講解多少WebView如何去布局,主要還在于HTML標(biāo)簽的設(shè)計(jì),還是請(qǐng)求數(shù)據(jù),解析xml,解析出來(lái)的數(shù)據(jù)格式化添加到HTML的標(biāo)簽節(jié)點(diǎn)之中,再有WebView去加載顯示;
下面的一個(gè)示例測(cè)試,獲取的都是靜態(tài)文本數(shù)據(jù),主要還是看HTML格式,效果圖: