開(kāi)源中國(guó)iOS客戶端學(xué)習(xí)——(十三)使用UIWebView控件布局視圖

  在上一篇博客   開(kāi)源中國(guó)iOS客戶端學(xué)習(xí)——(十二)用戶登陸  中講到用戶登陸界面，loginView.xib布局中我們看到有一個(gè)UIWebView控件，但是它并沒(méi)有加載一個(gè)網(wǎng)頁(yè)，而是顯示一些文本信息，其中有一些網(wǎng)址的鏈接，點(diǎn)擊這個(gè)鏈接的時(shí)候條找轉(zhuǎn)到該網(wǎng)站，或者點(diǎn)擊某個(gè)文字標(biāo)簽同樣的效果。

再來(lái)看看另外一個(gè)ViewController,在News/tab下有一個(gè)NewDetail類，查看這個(gè)ViewController類的xib時(shí)又看到WebView控件，同樣他也不是用來(lái)加載一個(gè)網(wǎng)頁(yè)，而是作為視圖布局使用，在開(kāi)源中國(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)簽沒(méi)問(wèn)題，但是布局一些復(fù)雜的視圖就可能比較難搞了，就像在一段文本中對(duì)某兩字加上超鏈接，點(diǎn)擊兩個(gè)字跳轉(zhuǎn)道一個(gè)網(wǎng)頁(yè)，如果是單單兩個(gè)字也不是難題，但是對(duì)于使用多條信息使用同一個(gè)xib界面布局怎么辦？我們并不知道哪些字需要使用富文本加上超鏈接？這時(shí)候webView視圖成了最好解決方案，經(jīng)常我們打開(kāi)一個(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è)方法：

2. [selfloadData:self.singleNews];  格式化處理字符串，轉(zhuǎn)換成HTML格式，如設(shè)置html的背景顏色字體顏色字體大小等，對(duì)于HTML也沒(méi)用很深研究，大概能看懂一點(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:@"<a >%@</a> 發(fā)布于 %@",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'>更多關(guān)于: <a href='%@'>%@</a> 的詳細(xì)信息</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]方法中對(duì)HTML特點(diǎn)格式化中

//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'/>"

+ (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/>相關(guān)文章<div style='font-size:14px'><p/>%@</div>", 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完整鏈接

本篇博客并沒(méi)講解多少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格式，效果圖: