如何创建一个动态改变其高度以适应其内容的表格视图单元格? [英] How can I create a table view cell that changes its height dynamically to fit its content?
问题描述
我正在显示用户在表格视图中编写的一些 Markdown.我显示这些 Markdown 文本的方式是将 Markdown 转换为 HTML，然后在 UIWebview 上显示 HTML.因为，好吧，我可以使用一些很酷的 CSS.
I'm displaying some markdown that the user wrote in a table view. The way I display these markdown texts is to convert the markdown to HTML and then display the HTML on a UIWebview. Because, well, I can use some cool CSS.
经过一番研究，我发现我可以将 estimatedRowHeight 设置为一些东西并将 rowHeight 设置为 UITableViewAutomaticDimension.我还发现了如何设置 UIWebView 的框架以使其适合其内容 此处:
After some research, I found that I can set estimatedRowHeight to some stuff and set rowHeight to UITableViewAutomaticDimension. I also found out how to set a UIWebView's frame so that it fits its content here:
所以我写了这段代码:
var results: [Entry] = []
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return results.count
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("resultCell")
let webView = cell?.contentView.viewWithTag(1) as! UIWebView
let entry = results[indexPath.row]
webView.loadHTMLString(entry.htmlDescription, baseURL: nil)
webView.delegate = self
return cell!
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
tableView.reloadData()
}
override func viewDidLoad() {
tableView.estimatedRowHeight = 400
tableView.rowHeight = UITableViewAutomaticDimension
}
func webViewDidFinishLoad(webView: UIWebView) {
let height = CGFloat(webView.stringByEvaluatingJavaScriptFromString("document.height")!.toFloat()!)
var frame = webView.frame
frame.size.height = height
webView.frame = frame
webView.scrollView.contentSize = frame.size
webView.scrollView.frame = frame
print(frame)
}
results 数组就是我要显示的内容.如您所见，我想在每个 Web 视图中显示结果的 htmlDescription.
The results array is just the stuff I'm displaying. As you can see, I want to display the result's htmlDescription in each web view.
在 webViewDidFinishLoad 委托方法中，我只是做了前面提到的帖子所做的:评估一些 JS 并更新 web 视图的框架.
And in the webViewDidFinishLoad delegate method, I just did what the aforementioned post did: evaluating some JS and updating the web view's frame.
然而，行为与我的预期相去甚远.
However, the behaviour is far from what I expected.
- 首先，表格视图单元格的高度是默认高度.
- 当我尝试滚动网络视图时，我不能.他们只是反弹.
- 控制台说:
仅警告一次:检测到约束模棱两可地建议 tableview 单元格的内容视图高度为零的情况.我们正在考虑无意识的倒塌，而是使用标准高度.
Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead.
我不知道什么暗示表格视图单元格的高度应该是 0.
I don't know what is suggesting that the table view cell's height should be 0.
- 控制台还会打印 Web 视图的新框架.我只有 3 个网络视图，但有 6 个框架:
(0.0, 0.0, 320.0, 315.0)
(0.0, 0.0, 320.0, 315.0)
(0.0, 0.0, 320.0, 363.0)
(0.0, 0.0, 320.0, 363.0)
(0.0, 0.0, 320.0, 216.0)
(0.0, 0.0, 320.0, 216.0)
(0.0, 0.0, 320.0, 315.0)
(0.0, 0.0, 320.0, 315.0)
(0.0, 0.0, 320.0, 363.0)
(0.0, 0.0, 320.0, 363.0)
(0.0, 0.0, 320.0, 216.0)
(0.0, 0.0, 320.0, 216.0)
而且高度似乎非常正确，而不是默认的表格视图单元格高度.
And the height seems to be pretty correct, not the default table view cell height.
我知道我可以解决这个问题:
I know that I can fix this if I could either:
- 在加载 HTML 之前知道 Web 视图的内容大小，或者；
- 当所有网页视图加载完毕后重新加载表格视图.(因为我可能会有很多网页浏览，所以我应该尽可能少地调用
reloadData，否则它会很慢.)
- know the content size of the web view before the HTML is loaded, or;
- reload the table view when all web views finish loading. (Since I will possibly have lots of web views, I should call
reloadDataas less as possible or it will e very slow.)
我该怎么做?
这不是 如何制作UITableViewCell 调整高度以适合其内容? 因为该问题的表格视图是静态的.一旦加载，它的内容就不会改变.但是我的有一个可以加载 HTML 的网络视图.
This is not a duplicate of How to make UITableViewCell adjust height to fit its content? because that question's table view is kind of static. Its content won't change once it is loaded. But mine has a web view which will load HTML.
推荐答案
只需在 cellForRowAtIndex 中计算高度并设置 table.rowHeight.看看这个链接可以帮到你
Just calculate height in cellForRowAtIndex and set table.rowHeight. Look at this link can help you
插入tableView 设置为 Autoresize 导致滚动问题
这篇关于如何创建一个动态改变其高度以适应其内容的表格视图单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
