<h1>在這記錄的是我的學習過程,如有錯誤請不吝批評</h1>
UIWebView是我們用來顯示HTML
耸别,文件
類型首要選擇的開發(fā)控件健芭。在使用過程中難免有一些配置達不到我們的要求。所以需要我們結合一些其他的語言或者使用特殊的處理來展示我們要的效果秀姐。
我在使用UIWebView
展示HTML
的時候慈迈,需要在此基礎上還顯示我們對這條HTML
信息作出的評價列表。HTML和評論列表
的數(shù)據(jù)是分開給的省有。so吩翻,用了UITableView
這個控件,然后用UIWebView
當做UITableView
的tableViewHeaderView
锥咸,評論列表數(shù)據(jù)就用自定義的cell就好了狭瞎。
這種做法有以下幾個問題需要解決:
1.UIWebView
所顯示的HTML
的高度怎么獲取搏予?即如果不允許UIWebView
自適應高度熊锭,那么他的滾動高度要怎么獲取雪侥?
2.UIWebView
作為UITableView
的tableViewHeaderView
時碗殷,出現(xiàn)的滑動沖突怎么解決??
3.在HTML
數(shù)據(jù)并沒有做到自適應屏寬的前提下速缨,關閉UIWebView
的高度自適應锌妻,如何保證自己寫的自適應屏寬的css樣式
不受影響,能夠正常顯示旬牲?
首先仿粹,關于UIWebView的滾動高度的獲取
搁吓,可以采用以下方式:
CGFloat _webViewHeight = [[_webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"]floatValue];
其次,關于webView與tableView的滑動沖突問題
吭历,將webView的scrollEnable設置為no:
_webView.scrollView.scrollEnabled=NO;
最后堕仔,關于關閉了webView
的高度自適應之后,保證自己寫的自適應屏寬的css樣式
(關于自適應屏寬的css樣式請參考:iOS UIWebView加載HTML晌区,以及遇到問題的解決方案的最后)不受影響并正常顯示HTML
文件內容:
將獲取webView
的滾動高度以及重置webView
的高度的代碼均放在UIWebViewDelegate
中的
- (void)webViewDidFinishLoad:(UIWebView*)webView
這個方法中摩骨,也就是說,將更新webView
的frame
操作放到html
加載完成之后朗若,這樣就保證了css樣式表
已經讀取恼五,并將其中填寫的約束信息應用在了HTML
文件中。
代碼:
#import "ViewController.h"
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource, UIWebViewDelegate>
{
UIView *_view; // 裝載webView的容器
// 請求下來保存的數(shù)據(jù)
NSString *_name;
NSString *_update_time;
NSString *_content;
}
/// 加載詳情的view
@property(nonatomic,strong) UIWebView *webView;
/// 加載評論列表的View
@property (nonatomic, strong) UITableView *table;
@end
@implementation ViewController
#pragma mark - btn action
- (void) leftBarButtonClicked
{
[self.navigationController popViewControllerAnimated:YES];
}
#pragma mark - Net request
- (void)detailNetRequest {
_name=@"獲取下來的name字符串";
_update_time = @"獲取下來的time字符串";
_content = @"獲取下來的html content"; // 這里不包含<html,head,body>這些標簽
// 網絡請求哭懈,在成功block里面添加下面這句代碼
[weakSelf.webView loadHTMLString:[self getHtmlString] baseURL:nil];
}
#pragma mark - UITableViewDelegate, UITableViewDataSource
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuse"];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"reuse"];
}
cell.textLabel.text = [NSString stringWithFormat:@"評論數(shù)據(jù)%ld", indexPath.row];
return cell;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 5;
}
#pragma mark - other
/// 拼接完整的html字符串:新添加了title灾馒, time的CSS樣式
- (NSString *)getHtmlString
{
NSMutableString *html = [NSMutableString string];
[html appendString:@"<html>"];
[html appendString:@"<head>"];
[html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"xxx.css" withExtension:nil]];
[html appendString:@"</head>"];
[html appendString:@"<body style=\"background:#f6f6f6\">"];
[html appendString:[self getBodyString]];
[html appendString:@"</body>"];
[html appendString:@"</html>"];
return html;
}
/// 拼接body內容:包含了title, time银伟, content
- (NSString *)getBodyString
{
NSMutableString *body = [NSMutableString string];
[body appendFormat:@"<div class=\"title\">%@</div>",_name];
[body appendFormat:@"<div class=\"time\">%@</div>",_update_time];
if (self.model.content != nil) {
[body appendString:_content];
}
return body;
}
#pragma mark - life circle
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
[self loadCostomNavTitle:@"title"];
[self setLeftBarItemWithImgName:@"return" action:@selector(leftBarButtonClicked)];
// 加載視圖
self.table=[[UITableView alloc]initWithFrame:CGRectMake(0,CGRectGetMaxY(self.webView.frame),SCREEN_WIDTH,SCREENH_HEIGHT-navigationBar_height - 48)];
self.table.delegate=self;
self.table.dataSource=self;
self.table.separatorStyle=UITableViewCellSelectionStyleNone;
[self.view addSubview:self.table];
// 這個高度先給一個比較小的值,之后計算html的滾動高度之后會更新這個高度的绘搞。
_view= [[UIView alloc]initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,100)];
self.table.tableHeaderView=_view;
// 同理這個也是一樣
_webView= [[UIWebView alloc]initWithFrame:CGRectMake(0,0,SCREEN_WIDTH,100)];
// 這句是避免兩者的滑動產生沖突
_webView.scrollView.scrollEnabled=NO;
[_view addSubview:_webView];
_webView.delegate=self;
// 網絡請求
[self detailNetRequest];
}
#pragma mark - UIWebviewDelegate
- (void)webViewDidFinishLoad:(UIWebView*)webView {
// 用來獲取HTML的滾動高度
CGFloat _webViewHeight = [[_webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"]floatValue];
// 更新webView的高度
CGRect newFrame = _webView.frame;
newFrame.size.height = _webViewHeight;
_webView.frame = newFrame;
[_webView sizeToFit];
// 更新View的高度
CGRect Frame = _view.frame;
Frame.size.height = Frame.size.height+_webView.frame.size.height;
_view.frame = newFrame;
[self.table setTableHeaderView:_view];//這句話才是重點
self.webView.frame = CGRectMake(0,0,SCREEN_WIDTH, _webViewHeight);
self.webView.scrollView.contentSize = CGSizeMake(SCREEN_WIDTH, _webViewHeight+1);
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
<h6>感謝以下幾位提供的技術總結:
iOS中UIWebview中網頁寬度自適應的問題
UIWebView 適配屏幕
TableView上的HeaderView放WebView
</h6>