開源中國iOS用戶端學習——(十三)使用UIWebView控制項布局視圖

   在上一篇部落格   開源中國iOS用戶端學習——(十二)使用者登陸 
中講到使用者登陸介面，loginView.xib布局中我們看到有一個UIWebView控制項，但是它並沒有載入一個網頁，而是顯示一些文本資訊，其中有一些網址的連結，點擊這個連結的時候條找轉到該網站，或者點擊某個文字標籤同樣的效果。

再來看看另外一個ViewController,在News/tab下有一個NewDetail類，查看這個ViewController類的xib時又看到WebView控制項，同樣他也不是用來載入一個網頁，而是作為視圖布局使用，在開源中國iOS用戶端源碼中還是不止這兩個類中使用webView控制項作為布局引擎，在工程檔案tab目錄下的SinglePost、SoftwareDeatil
、BlogDetail這些類都是這樣使用；NewDetail這個類作用用於載入顯示一條資訊資訊的詳細內容；

然後來看看WebView布局介面顯示內容，在選中首頁綜合裡資訊某一條的時候，想查看給諮詢詳情，然後查看一些介面特效:

  

或許我們會想問什麼要使用WebView布局呢，普通的view也一樣可以顯示，顯示文字有ULabel  UITextView  顯示圖片有UIImageView都可以滿足，接著向下看。。。

有一些特殊字型顏色，點擊他們的時候有的跳轉道另一個視圖，有的跳轉道某一個網站，能夠響應使用者的互動；當點擊TNW 和點擊相關文章的某一文章標題時抓取樣本如下

 

或許有人已經知道這些都是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.image = [UIImage imageNamed:@"detail"];    //WebView的背景顏色去除    [Tool clearWebViewBackground:self.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中主要兩個方法：

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];}

[self loadData:self.singleNews]方法中對HTML特點格式化中

兩個宏定義
 HTML_Style   HTML_Bottom

//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;    }}

[Tool analysis:[request.URL absoluteString] andNavController:self.parentViewController.navigationController];響應webView中URL,如果這個url不止站內連結就會調用Safair載入這個網址，如果是站內的資訊則跳轉對於資訊視圖；詳情可查看analysis:l
andNavController:實現方法；

if()語句有個判斷，如果請求的URL網址是空白，則webView就會載入這個頁面，否則不載入這個url   request.URL.absoluteString表示擷取url完整連結

本篇部落格並沒講解多少WebView如何去布局，主要還在於HTML標籤的設計，還是請求資料,解析xml,解析出來的資料格式化添加到HTML的標籤節點之中，再有WebView去載入顯示；

下面的一個樣本測試，擷取的都是靜態文本資料,主要還是看HTML格式，:

  

樣本源碼:http://duxinfeng.blog.51cto.com/ext/down_att.php?aid=39211&code=8162

 

 

 

原創部落格歡迎轉載分享，請註明出處http://blog.csdn.net/duxinfeng2010