开源中国iOS客户端学习——(十三)使用UIWebView控件布局视图

转载 2013年12月02日 17:54:58

   在上一篇博客   开源中国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方法

  1. <span style="font-family:Comic Sans MS;font-size:18px;">- (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.     self.tabBarItem.title = @"资讯详情";  
  5.     self.tabBarItem.image = [UIImage imageNamed:@"detail"];  
  6.     //WebView的背景颜色去除  
  7.     [Tool clearWebViewBackground:self.webView];  
  8.       
  9.     self.singleNews = [[SingleNews alloc] init];  
  10.     self.navigationController.title = @"资讯详情";  
  11.     self.webView.delegate = self;  
  12.     [self.webView loadHTMLString:@"" baseURL:nil];  
  13.       
  14.     if ([Config Instance].isNetworkRunning)   
  15.     {  
  16.         MBProgressHUD *hud = [[MBProgressHUD alloc] initWithView:self.view];  
  17.         [Tool showHUD:@"正在加载" andView:self.view andHUD:hud];  
  18.           
  19.         NSString *url = [NSString stringWithFormat:@"%@?id=%d",api_news_detail, newsID];  
  20.         [[AFOSCClient sharedClient] getPath:url parameters:nil success:^(AFHTTPRequestOperation *operation, id responseObject) {  
  21.              
  22.             [Tool getOSCNotice2:operation.responseString];  
  23.             [hud hide:YES];  
  24.               
  25.             self.singleNews = [Tool readStrNewsDetail:operation.responseString];  
  26.             if (self.singleNews == nil) {  
  27.                 [Tool ToastNotification:@"加载失败" andView:self.view andLoading:NO andIsBottom:NO];  
  28.                 return;  
  29.             }  
  30.             [self loadData:self.singleNews];  
  31.               
  32.             //如果有网络 则缓存它  
  33.             if ([Config Instance].isNetworkRunning)   
  34.             {  
  35.                 [Tool saveCache:1 andID:self.singleNews._id andString:operation.responseString];  
  36.             }  
  37.               
  38.         } failure:^(AFHTTPRequestOperation *operation, NSError *error) {  
  39.               
  40.             [hud hide:YES];  
  41.             if ([Config Instance].isNetworkRunning) {  
  42.                 [Tool ToastNotification:@"错误 网络无连接" andView:self.view andLoading:NO andIsBottom:NO];  
  43.             }  
  44.               
  45.         }];  
  46.     }  
  47.     else  
  48.     {  
  49.         NSString *value = [Tool getCache:1 andID:newsID];  
  50.         if (value) {  
  51.             self.singleNews = [Tool readStrNewsDetail:value];  
  52.             [self loadData:self.singleNews];  
  53.         }  
  54.         else {  
  55.             [Tool ToastNotification:@"错误 网络无连接" andView:self.view andLoading:NO andIsBottom:NO];  
  56.         }  
  57.     }  
  58. }  
  59. </span>  

ViewDidLoad中主要两个方法:

1.[ToolclearWebViewBackground:self.webView];去掉WebView背景色,显示数据的时候就不会觉得他是一个WebView而是一个普通的View视图;

2.[selfloadData:self.singleNews];  格式化处理字符串,转换成HTML格式,如设置html的背景颜色字体颜色字体大小等,对于HTML也没用很深研究,大概能看懂一点,

  1. <span style="font-family:Comic Sans MS;font-size:18px;">- (void)loadData:(SingleNews *)n  
  2. {  
  3.     [self refreshFavorite:n];  
  4.     //通知去修改新闻评论数  
  5.     Notification_CommentCount *notification = [[Notification_CommentCount alloc] initWithParameters:self andCommentCount:n.commentCount];  
  6.     [[NSNotificationCenter defaultCenter] postNotificationName:Notification_DetailCommentCount object:notification];  
  7.     //新闻  主要用于微博分享  
  8.     [Config Instance].shareObject = [[ShareObject alloc] initWithParameters:n.title andUrl:n.url];  
  9.     //控件更新  
  10.     NSString *author_str = [NSString stringWithFormat:@"<a href='http://my.oschina.net/u/%d'>%@</a> 发布于 %@",n.authorid,n.author,n.pubDate];  
  11.       
  12.     NSString *software = @"";  
  13.     if ([n.softwarename isEqualToString:@""] == NO) {  
  14.         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];  
  15.     }  
  16.     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];  
  17.       
  18.     NSString *result = [Tool getHTMLString:html];  
  19.     [self.webView loadHTMLString:result baseURL:nil];  
  20. }  
  21. </span>  


[self loadData:self.singleNews]方法中对HTML特点格式化中

两个宏定义  HTML_Style   HTML_Bottom

  1. <span style="font-family:Comic Sans MS;font-size:18px;">//html头部  
  2. #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>"  
  3. #define HTML_Bottom @"<div style='margin-bottom:60px'/>"</span>  

[ToolgenerateRelativeNewsString:n.relativies]    处理资讯后面相关文章的布局的HTML

  1. <span style="font-family:Comic Sans MS;font-size:18px;">+ (NSString *)generateRelativeNewsString:(NSArray *)array  
  2. {  
  3.     if (array == nil || [array count] == 0) {  
  4.         return @"";  
  5.     }  
  6.     NSString *middle = @"";  
  7.     for (RelativeNews *r in array) {  
  8.         middle = [NSString stringWithFormat:@"%@<a href=%@ style='text-decoration:none'>%@</a><p/>",middle, r.url, r.title];  
  9.     }  
  10.     return [NSString stringWithFormat:@"<hr/>相关文章<div style='font-size:14px'><p/>%@</div>", middle];  
  11. }  
  12. </span>  


[self.webView loadHTMLString:result baseURL:nil];才是将html格式化成NSString对象后加载道WebView上,还必须处理webView的一个委托方法。

如果委托方法返回YES表示允许UIWebView请求,但是webView用来布局显示自定义内容,应该返回为NO;假如我们点击某个文字超链接或url时就会发送发送给委托方法,基于这个url做出响应;


  1. <span style="font-family:Comic Sans MS;font-size:18px;">#pragma 浏览器链接处理  
  2. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType  
  3. {  
  4.     [Tool analysis:[request.URL absoluteString] andNavController:self.parentViewController.navigationController];  
  5.     if ([request.URL.absoluteString isEqualToString:@"about:blank"])   
  6.     {  
  7.         return YES;  
  8.     }  
  9.     else  
  10.     {  
  11.         return NO;  
  12.     }  
  13. }</span>  

[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

相关文章推荐

开源中国iOS客户端学习——(十三)使用UIWebView控件布局视图

在上一篇博客   开源中国iOS客户端学习——(十二)用户登陆  中讲到用户登陆界面,loginView.xib布局中我们看到有一个UIWebView控件,但是它并没有加载一个网页,而是显示一些文...

开源中国iOS客户端学习——(四)GCDiscreetNotificationView提示视图

GCDiscreetNotificationView 类库作用是: 在不阻止用户与设备应用程序交互情况下,作为一个通知视图来显示一个当前的状态。 GCDiscreetNotificationVi...

开源中国iOS客户端学习——(十四)使用EGOImageLoading异步加载图片

EGOImageLoading 是一个用的比较多的异步加载图片的第三方类库,简化开发过程,我们直接传入图片的url,这个类库就会自动帮我们异步加载和缓存工作;当从网上获取图片时,如果网速慢图片短时间内...

开源中国iOS客户端学习——(十二)用户登陆

上一篇博客  开源中国iOS客户端学习——(十一)AES加密 中提到将用户名和密码保存到了本地沙盒之中,在从本地读取用户名和密码,这是一个怎样的过程? -(void)saveUserNameAndP...

开源中国iOS客户端学习——(八)网络通信AFNetworking类库

转载自:http://blog.csdn.net/duxinfeng2010/article/details/8620901   开源中国iOS客户端学习——(八)网络通信AF...

[置顶] 开源中国iOS客户端学习——(十一)AES加密

数据加密在解密在软件开发过程中举足轻重的作用,可能有的公司在加密的时候有自己公司内部一套设计的算法,而在这方面不想浪费太大精力就可以去考虑使用第三方提供的加密算法,如AES加密算法,本篇内容介绍开源中...

开源中国iOS客户端学习——(十一)AES加密

2013-05-22 11:14 13473人阅读 评论(10) 收藏 举报 开源中国iOS客户端学习AES加密 http://blog.csdn.net/duxinfeng2010/ar...

开源中国iOS客户端学习——(五)网络通信ASI类库(1)

如今的应用大部分基予网络,在开源中国iOS客户端源码中关于网络通信方面用了三个类库,ASI和AFNetworking,还有一个苹果官方给出的Reachability用于检测当前网络状况,本文介绍当前用...

开源中国iOS客户端学习——(九)代码片段之时间标记

开源中国客户端中无论是综合里面文章,还是问答里问题还是动弹离得说说,每一条后面都会注释有时间,比如“10分钟之前”  “2小时前” “5天前” 或者直接是时间显示“2013-2-9”等,这些时间在很多...

开源中国iOS客户端学习——(三)再看协议与委托

iOS里委托与协议是很重要的一块,如果理解不好很难区分协议与委托到底有什么不一样,这些东西在开发中是经常遇见的; 协议是类留给外部的一个接口函数的集合(一位高手用C++基类来解释是,把接口做为参数,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:开源中国iOS客户端学习——(十三)使用UIWebView控件布局视图
举报原因:
原因补充:

(最多只允许输入30个字)