MGTemplateEngine 模版引擎简单使用

最新推荐文章于 2022-07-10 10:56:13 发布

人丑就该多读书

最新推荐文章于 2022-07-10 10:56:13 发布

阅读量2.1k

点赞数

分类专栏： IOS开发文章标签： IOS webview MGTemplateEngine

IOS开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最早知道这玩意还是从唐巧的博客和网易新闻客户端的开源策略，当时压根就不知道是干嘛的，现在终于知道了，学习下。

转：http://blog.csdn.net/crazy_srufboy/article/details/21748995

首先上图中间的标题至内容都是使用UIWebView显示，评论是UITableView可以往下拖加载更多评论，也可以增加评论同删除评论。

动机

评细页中使用 UIWebView 会使显示内容更加的灵活和简单，当然你也许可以网上找UITextView的扩展同样也行，但我感觉HTML更符合我的需求。在多年的PHP开发中我们知道，其实详细页都是大同小异，主要是显示的内容风格不同。但在iOS平台上，做这些拼拼接接的活很累也不易于维护，还要不断计算各种类型页面对象的位置，实在吃力不讨好。使用UIWebView将是一个不错的选择。

MGTemplateEngine 模版引擎

MGTemplateEngine比较象 PHP 中的 Smarty 模版引擎，是一个轻量级的引擎，简单好用。只要设置很多不同的HMTL模版，就能轻松的实现一个View多种内容格式的显示，对于不熟悉HTML或者减轻工作量而言，把这些工作让设计分担一下还是很好的，也比较容易实现设计想要的效果。

首先，看看模版的代码

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html lang="en">  
   <head>  
     <meta charset="utf-8">  
     <title></title>  
     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
     <link href="./detail.css" rel="stylesheet">  
   </head>  
   <body>  
   <div id='container' name="container">  
     <div class="title">{{ title }}</div>  
     <div class="date">{{ date }}</div>  
     <div class="content">{{ content }}</div>  
   </div>  
   </body>  
 </html>  

Objective-C代码 - 下面的创建代码MGTemplateEngine都是从官方的例子中参考下来的，已经有很详细的说明

[objc]view plaincopy 
   
 // Set up template engine with your chosen matcher.  
 MGTemplateEngine *engine = [MGTemplateEngine templateEngine];  
 //[engine setDelegate:self];  
 [engine setMatcher:[ICUTemplateMatcher matcherWithTemplateEngine:engine]];  
   
 // 这里就是设置，或者里边塞变量的地方。其实也可以设置一个数组，这样模板的灵活也会更强。这里我就不演示了官方有例子  
 [engine setObject:self.detailData[@"title"] forKey:@"title"];  
 [engine setObject:self.detailData[@"content"] forKey:@"content"];  
   
 // MGTemplateEngine/Detail/detail.html  
 // MGTemplateEngine/Detail/detail.css  
 NSString *templatePath = [[NSBundle mainBundle] pathForResource:@"detail" ofType:@"html"];  
   
 // Process the template and display the results.  
 NSString *html = [engine processTemplateInFileAtPath:templatePath withVariables:nil];  
   
   
 // 获得HTML  
 self.htmlWebView = [[UIWebView alloc] initWithFrame:CGRectMake(8, 5, 304, 320)];  
 self.htmlWebView.delegate = self;  
 self.htmlWebView.userInteractionEnabled = NO;  
   
 // 你就能加载到HTML里面的.css文件  
 NSString *baseURL = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Detail"];  
 [self.htmlWebView loadHTMLString:html baseURL:[NSURL fileURLWithPath:baseURL]];  
 [self.detailView addSubview:self.htmlWebView];  

因为我的UIWebView是在插入到UITableView，所以在 UIWebView加载完后，就得重新计算高度。因为我想让用户感觉不到这其实是一个HTML。

[objc]view plaincopy 
   
 // 我将UIWebView添加到了self.detailView  
 self.listTableView.tableHeaderView = self.detailView;  

[objc]view plaincopy 
   
 #pragma mark -  
 #pragma mark -# UIWebViewDelegate  
   
 - (void)webViewDidFinishLoad:(UIWebView *)webView {  
   
     // 获取整个HMTL的高度，这很好理解，很简单的JS  
     NSString *heightString = [self.htmlWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"container\").offsetHeight;"];  
       
     // 重设view内容大小  
     CGRect nFrame = self.detailView.frame;  
     nFrame.size.height = [heightString doubleValue] + 35.0;  
     self.detailView.frame = nFrame;  
   
     // 重设webview内容大小  
     CGRect nWebViewFrame = self.htmlWebView.frame;  
     nWebViewFrame.size.height = [heightString doubleValue] + 15;  
     self.htmlWebView.frame = nWebViewFrame;  
   
     // 让UIWebView加载完后，才设置UITableView,最后才加载评论  
     [self tableViewSetting];  
     [self getCommentList];  
 }  