UIWebView_html/css_WEB-ITnoseをセルに埋め込む

前書き

少し前、グループの友人から、UIWebView を UITableViewCell に配置する方法についてよく質問されました。高さの計算方法は?適応的にするにはどうすればよいでしょうか?これはかなり扱いが難しそうです。

これは、UIWebView がプロキシ経由で読み込まれる場合、高さはまだ計算されておらず、セルの heightForRowAtIndexPath がすでに呼び出されているためです。

これに基づいて、著者はその高さを計算し、それに応じて調整する方法を学習しようとしました。

注: 作者はヒントを与えているだけであり、WebView が初めて読み込まれたときに取得されるコンテンツの高さのみを処理します。WebView 内のコンテンツをクリックすると、ページが拡大または縮小されます。更新して高さを計算する処理はありません。この部分は少し難しいので、詳しく説明するのはあなたに任せます~このブログ投稿があなたに新しいアイデアを与えることを願っています

レンダリング

難易度分析

• パフォーマンスの問題: それぞれの高さが異なる場合セルの行が異なる場合は、従来のアプローチを使用してください。パフォーマンスが非常に重視され、処理が非常に困難です。
• 適応高さの問題: 毎回リロードする前に UIWebView コンテンツを正常にロードして高さを計算すると、無限ループが発生します。 WebView の読み込み -> 現在の行の更新 -> WebView の再読み込み -> 無限ループ もちろん、WebView を 1 回読み込んだ後に取得した高さと、現在の更新読み込みの高さを比較することもできます。が等しい場合、無限に更新する必要はありませんが、これの最大の問題は、普通に見ているときに突然更新されて変更されることです~

以下のいずれかの方法で HTML を読み込むと、これは一般的な方法ですが、このメソッドをセルで使用する場合、制御がより困難で複雑になります。

 - (void)loadRequest:(NSURLRequest *)request;- (void)loadHTMLString:(NSString *)stringbaseURL:(NSURL *)baseURL;- (void)loadData:(NSData *)dataMIMEType:(NSString *)MIMETypetextEncodingName:(NSString *)textEncodingNamebaseURL:(NSURL *)baseURL; 

stringByEvaluatingJavaScriptFromString メソッドは、コンテンツが読み込まれた後にのみ実行できます。

デザイン思考

作者は計算に自動レイアウトを使用しませんでした。この側面を皆さんに使用してもらいましょう。筆者は、従来の計算方法で基本的な関数を学習しただけです。

このデモの設計上のアイデアは、高さを計算し、js を介して HTML を置き換えることです。

重要なポイントは次のとおりです:

• HTML の高さを取得する: セルのプロキシ メソッド heightForRowAtIndexPath で、UIWebView の高さを決定できるように HTML の高さを計算する必要があります。
• 元のHTMLを置き換える: セル構成データの表示において、WebViewが提供するAPIを介してHTMLを読み込むのではなく、元のHTMLを直接置き換えることで、表示データを同期的に取得できるようになります

また、高さを計算する際に、HTMLコンテンツの高さを計算するにはどうすればよいですか?したがって、HTML の高さを計算するために特別に使用される UIWebView も使用する必要があります。

UIWebViewのHTMLの高さを計算します

すごい

サイズが設定されているのがわかりますか? Web ビューの幅を指定する必要があります。指定しないと、以下で計算される高さが不正確になります。ただし、高さは指定せず、単に 0 に設定します (一度指定すると、コンテンツは自動的にこの高さに適応し、高さを計算する必要がなくなるからです)。

HTML の高さを計算する

まず、HTML の高さを計算する属性 webView を ViewController に追加しました。したがって、属性として常に必要です。コードは次のとおりです。

 - (UIWebView *)webView {  if (_webView == nil) {    _webView = [[UIWebView alloc]init];    CGSize size = CGSizeMake(self.view.frame.size.width - 20, 0);    _webView.frame = CGRectMake(0, 0, size.width, size.height);  }    return _webView;} 

• まず、document.body.innerHTML JS を通じて HTML の高さを計算するために使用される UIWebView の HTML を置き換えます。
• document.getElementsByTagName('div')[0].scrollHeight を取得します。スクロール可能な範囲 div の高さは固定ではありません。Body.scrollHeight を直接取得することはできません。著者のデモでは、div がトップラベルなので、それを通じて高さを取得できます。
• 計算結果に 40 を加えるのはなぜですか?直接計算しても用意するほどではなく、マージンやパディングがあるので、ほぼ自分で見ることができます。

Cell の設定

 - (CGFloat)tableView:(UITableView *)tableViewheightForRowAtIndexPath:(NSIndexPath *)indexPath {  HYBTestModel *model = [self.datasourceobjectAtIndex:indexPath.row];  CGFloat w = [UIScreen mainScreen].bounds.size.width;  CGFloat h = [model.titlesizeWithFont:[UIFontsystemFontOfSize:16]                      constrainedToSize:CGSizeMake(w, CGFLOAT_MAX)                          lineBreakMode:NSLineBreakByWordWrapping].height;  h += 10 + 20;    if (model.webHeight <= 0) {    // 注意不能使用双引号    NSString *js = [NSStringstringWithFormat:@"document.body.innerHTML = '%@'", model.html];    [self.webViewstringByEvaluatingJavaScriptFromString:js];        NSLog(@"%@", [self.webViewstringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"]);        NSString *heightJs = @"document.getElementsByTagName('div')[0].scrollHeight";    CGFloat webHeight = [[self.webViewstringByEvaluatingJavaScriptFromString:heightJs]floatValue];    NSLog(@"%f", webHeight);     self.webView.scrollView.contentSize = CGSizeMake(w - 20, webHeight);    model.webHeight = webHeight + 40;  }    return h + model.webHeight + 40;} 

データを表示するようにセルを設定するときは、UIWebView の HTML を直接置き換えるだけです。プロキシ コールバックを通じて高さを通知する必要がないため、WebView のフレームを直接設定できます。

ここで HTML の高さを計算する必要はありません。高さを計算するとき、計算の繰り返しを避けるために、model.webHeight 属性がモデルに直接追加され、計算された高さを記録します。

ソースコード

参照用に作者の GITHUB からソースコードをダウンロードできます: UIWebView に埋め込まれた UITableViewCell

最後に

フォローしてください

著作権表示: この記事は [Brother Biao's Technology Blog] のオリジナル製品です。転載する場合は出典を明記してください。