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

要实现的效果

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

动机

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

MGTemplateEngine 模版引擎

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

首先，看看模版的代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link href="./detail.css" rel="stylesheet">
  8. </head>
  9. <body>
  10. <div id='container' name="container">
  11. <div class="title">{{ title }}</div>
  12. <div class="date">{{ date }}</div>
  13. <div class="content">{{ content }}</div>
  14. </div>
  15. </body>
  16. </html>

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

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

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

  1. // 我将UIWebView添加到了self.detailView
  2. self.listTableView.tableHeaderView = self.detailView;
  1. #pragma mark -
  2. #pragma mark -# UIWebViewDelegate
  3. - (void)webViewDidFinishLoad:(UIWebView *)webView {
  4. // 获取整个HMTL的高度，这很好理解，很简单的JS
  5. NSString *heightString = [self.htmlWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"container\").offsetHeight;"];
  6. // 重设view内容大小
  7. CGRect nFrame = self.detailView.frame;
  8. nFrame.size.height = [heightString doubleValue] + 35.0;
  9. self.detailView.frame = nFrame;
  10. // 重设webview内容大小
  11. CGRect nWebViewFrame = self.htmlWebView.frame;
  12. nWebViewFrame.size.height = [heightString doubleValue] + 15;
  13. self.htmlWebView.frame = nWebViewFrame;
  14. // 让UIWebView加载完后，才设置UITableView,最后才加载评论
  15. [self tableViewSetting];
  16. [self getCommentList];
  17. }

以上的都是 MGTemplateEngine 很基本的使用，将来也会大派用场的。对于内容页的显示，没有比HTML来的更方便直接，通过切换模版和简单的参数设置，多个不同类型的栏目也可以使用同一个详细页，很大程度上减轻工作理和易于维护。

要更深入的了解，可以去 MGTemplateEngine 官方网站

MGTemplateEngine 模版引擎简单使用（转）的更多相关文章

  1. MGTemplateEngine 模版发动机简单使用

    https://github.com/nxtbgthng/MGTemplateEngine MGTemplateEngine 模版引擎 MGTemplateEngine比較象 PHP 中的 Smart ...

  2. 简单JavaScript模版引擎优化

    在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...

  3. 简单的 js 模版引擎

    简单的 js 模版引擎 var tplEngine = function(tpl, data) { var reg = /<%([^%>]+)?%>/g, regOut = /(^( ...

  4. 构建自己的PHP框架--构建模版引擎(1)

    前段时间太忙,导致好久都没有更新博客了,今天抽出点时间来写一篇. 其实这个系列的博客很久没有更新了,之前想好好规划一下,再继续写,然后就放下了,今天再捡起来继续更新. 今天我们来说一下,如何构建自己的 ...

  5. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  6. PHP模版引擎 – Twig

    在网站开发过程中模版引擎是必不可少的,PHP中用的最多的当属Smarty了.目前公司系统也是用的Smarty,如果要新增一个页面只需把网站的头.尾和左侧公共部分通过Smarty的include方式引入 ...

  7. Nodejs学习笔记（五）--- Express安装入门与模版引擎ejs

    目录 前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use ...

  8. T4教程1 T4模版引擎之基础入门

    T4模版引擎之基础入门   额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看 ...

  9. T4教程2 T4模版引擎之生成数据库实体类

    T4模版引擎之生成数据库实体类   在通过T4模版引擎之基础入门 对T4有了初步印象后,我们开始实战篇.T4模板引擎可以当做一个代码生成器,代码生成器的职责当然是用来生成代码(这不是废话吗).而这其中 ...

随机推荐

  1. EF6.0 自定义Code First约定

    自定义Code First约定有三种方式,分别是:Lightweight Conventions(轻量级约定).Configuration Conventions(配置型约定).Model-based ...

  2. Esper

    https://www.igvita.com/2011/05/27/streamsql-event-processing-with-esper/ http://torycatkin.iteye.com ...

  3. 4.1. 如何在Windows环境下开发Python

    4.1. 如何在Windows环境下开发Python 4.1. 如何在Windows环境下开发Python 4.1.1. Python的最原始的开发方式是什么样的 4.1.1.1. 找个文本编辑器,新 ...

  4. （十）boost库之多线程

    (十)boost库之多线程 1.创建线程 使用boost库可以方便的创建一个线程,并提供最多支持9个参数的线程函数,相对于void*来说,方便了很多,创建线程主要提供了一下3种方式: 线程库头文件:# ...

  5. adobe reader安装完成之前被中断,错误代码150210解决方法

    adobe reader安装完成之前被中断,错误代码150210解决方法出现这种情况是因为之前安装过adobe reader但是没有卸载删除干净进而导致重新安装时无法安装.为什么卸载不了大多数是因为3 ...

  6. Valentino发布2013秋冬高级定制系列_菁华时尚生活,时尚生活电子杂志,Fine Born China

    Valentino发布2013秋冬高级定制系列_菁华时尚生活,时尚生活电子杂志,Fine Born China alentino发布2013秋冬高级定制系列 编辑: Mavis 图源于网络 图源于网络 ...

  7. magento新闻邮件发送一直处于“正在发送”状态问题解决

    今天在弄magento新闻邮件发送时候发现,单个邮件发送全然没有问题,可是新闻邮件订阅死活都不成功.国内国外的帖子都翻了一遍没实用,最后还是得靠自己了.于是開始慢慢找问题 首先想到是不是crontab ...

  8. js仿百度文库文档上传页面的分类选择器_第二版

    仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同一时候使用多个分类选择器. 此版本号把HTML,CSS,以及图片都封装到"category.js"中.解决因文件路 ...

  9. 代码生成引擎之T4模版

    在学校三年.公司里呆了快一年了,作用ASP.NET开发的我,居然从来没听过T4模版,公司里也没有人使用,它就是这样不为世人所熟知,却又默默的奉献着!这...........tm还是我吗?什么时候会说这 ...

  10. Jpa规范中persistence.xml 配置文件解析

    使用spring data + hibernate 进行逻辑层操作时候需要配置 persistence.xml的内容   <?xml version="1.0"?> & ...