カスタムテーブルビューセルの高さを WKWebView のコンテンツの高さに応じて決めたい。

Question

カスタムテーブルビューセルの高さをこのセルに埋めた WKWebView のコンテンツの高さに応じて決めたい。

テーブルビューを設置した ViewController　は下記のような感じ

セル１
セル２
webCell

tableView　は四方に 0 0 0 0 の autolayout　による制約付き。

html 読み込み後に、
webCell.webViewHeightConstraint?.constant = height as! CGFloat
として高さを更新しているつもりなのになぜか webCell の高さがかわらない。
高さは初期値の 400 のまま

現状

//　エラーメッセージ
[LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(
"<NSLayoutConstraint:0x60000129f1b0 WKWebView:0x13c021800.height == 656 (active)>",
"<NSLayoutConstraint:0x600001284190 V:[WKWebView:0x13c021800]-(0)-| (active, names: '|':UITableViewCellContentView:0x13ad83730 )>",
"<NSLayoutConstraint:0x600001284a00 V:|-(0)-[WKWebView:0x13c021800] (active, names: '|':UITableViewCellContentView:0x13ad83730 )>",
"<NSLayoutConstraint:0x60000129ec10 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x13ad83730.height == 400.5 (active)>"
)

Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x60000129f1b0 WKWebView:0x13c021800.height == 656 (active)>

自動で高さが更新されないので webView:didFinish navigation:メソッド内でテーブルビューセルを reload　すると無限ループでこまってます。
セルの高さを webView の高さ 656 にしたいのに勝手に break されて 400 になってる。
400 は .xib で設定した初期値。これが更新したつもりが更新できてない。

// テーブルビューを設置した ViewController側
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {       
   var cell = tableView.dequeueReusableCell(withIdentifier: "myCell1", for: indexPath)
        
   switch indexPath.row {
       case 2:
           print("webCell")
           let webCell = tableView.dequeueReusableCell(withIdentifier: "webCell", for: indexPath) as! MYWebTableViewCell

           webCell.myWebView.navigationDelegate = self
           webCell.loadHTMLContent(htmlContent: htmlStr)
           return webCell
           
       default:
           print("case default: ")
           cell = tableView.dequeueReusableCell(withIdentifier: "myCell1", for: indexPath)
   }
                 
   return cell
}

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("document.documentElement.scrollHeight", completionHandler: { [self] (height, error) in
            let webCell = myTableView.cellForRow(at: IndexPath(row: 2, section: 0)) as! MYWebTableViewCell
            webCell.webViewHeightConstraint?.constant = height as! CGFloat
                
            print(webCell.webViewHeightConstraint?.constant)　// Optional(656.0)
            print("webView.frame : ", webView.frame)　// (0.0, 0.0, 320.0, 400.5)

            // myTableView.reloadRows(at: [IndexPath(row: 2, section: 0)], with: .none)
            // webCell.layoutIfNeeded()
            // self.superview?.layoutIfNeeded()
        })
    }

class MYWebTableViewCell: UITableViewCell{
    @IBOutlet weak var myWebView: WKWebView!
    @IBOutlet weak var webViewHeightConstraint: NSLayoutConstraint!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        print("webViewHeightConstraint : ", webViewHeightConstraint)

        myWebView.scrollView.isScrollEnabled = false
    }

Comments

[hoshi-takanori]

いくつか方法はあるようですが、そもそもテーブルビューのセルに WebView を使うのはどうかと…。
https://stackoverflow.com/questions/48463531/how-to-auto-size-uitableviewcell-with-underlying-wkwebkit-so-it-respects-the-co/48467128

Answer 1

自己解決しました。

・ performBatchUpdates(_:completion:)
Animates multiple insert, delete, reload, and move operations as a group.

https://developer.apple.com/documentation/uikit/uitableview/2887515-performbatchupdates

高さの更新処理を myTableView.reloadRows から myTableView.performBatchUpdates(nil, completion: nil) に変更
高さの更新のみなら、引数のクロージャは nil でいい。

webview 読み込み完了 → table を reload → webview 読み込み完了 → table を reload → webview 読み込み完了

この無限ループは起こしちゃだめなので、html を読み込み後リロードすることなく高さ更新できるperformBatchUpdates(_:completion:) を使う。

解決版では WKWebView をコンテナview にのせてからセルに追加してるが、このコンテナはなくてもよいはず。

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
 
        webView.evaluateJavaScript("document.documentElement.scrollHeight", completionHandler: { [self] (height, error) in
            print("height : ", height ?? 0)
            
            let webCell = myTableView.cellForRow(at: IndexPath(row: 2, section: 0)) as! MYWebCell2
            webCell.contenaHeightConstraint.constant = height as! CGFloat
            
             myTableView.performBatchUpdates(nil, completion: nil)
        }) // END evaluateJavaScript
    }