要实现的效果
首先上图中间的 标题至内容 都是使用UIWebView显示,评论是UITableView可以往下拖加载更多评论,也可以增加评论同删除评论。
动机
评细页中使用 UIWebView 会使显示内容更加的灵活和简单,当然你也许可以网上找UITextView的扩展同样也行,但我感觉HTML更符合我的需求。在多年的PHP开发中我们知道,其实详细页都是大同小异,主要是显示的内容风格不同。但在iOS平台上,做这些拼拼接接的活很累也不易于维护,还要不断计算各种类型页面对象的位置,实在吃力不讨好。使用UIWebView将是一个不错的选择。
MGTemplateEngine 模版引擎
MGTemplateEngine比较象 PHP 中的 Smarty 模版引擎,是一个轻量级的引擎,简单好用。只要设置很多不同的HMTL模版,就能轻松的实现一个View多种内容格式的显示,对于不熟悉HTML或者减轻工作量而言,把这些工作让设计分担一下还是很好的,也比较容易实现设计想要的效果。
首先,看看模版的代码
<!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>
// 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添加到了self.detailView self.listTableView.tableHeaderView = self.detailView;
#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]; }
以上的都是 MGTemplateEngine 很基本的使用,将来也会大派用场的。对于内容页的显示,没有比HTML来的更方便直接,通过切换模版和简单的参数设置,多个不同类型的栏目也可以使用同一个详细页,很大程度上减轻工作理和易于维护。
要更深入的了解,可以去 MGTemplateEngine 官方网站
MGTemplateEngine 模版引擎简单使用,布布扣,bubuko.com
原文:http://blog.csdn.net/crazy_srufboy/article/details/21748995