如何在表视图中的UITableViewCells中使用“自动布局”,让每个单元格的内容和子视图确定行高度(自身/自动),同时保持平滑的滚动性能?


当前回答

我必须使用动态视图(通过代码设置视图和约束),当我想设置preferredMaxLayoutWidth标签的宽度为0时。所以我有错误的细胞高度。

然后我添加了

[cell layoutSubviews];

执行之前

[cell setNeedsUpdateConstraints];
[cell updateConstraintsIfNeeded];

之后,标签的宽度符合预期,动态高度计算正确。

其他回答

只需在视图控制器中添加这两个功能,即可解决问题。这里,列表是一个字符串数组,其中包含每行的字符串。

 func tableView(_ tableView: UITableView, 
   estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        tableView.rowHeight = self.calculateHeight(inString: list[indexPath.row])

    return (tableView.rowHeight) 
}

func calculateHeight(inString:String) -> CGFloat
{
    let messageString = input.text
    let attributes : [NSAttributedStringKey : Any] = [NSAttributedStringKey(rawValue: NSAttributedStringKey.font.rawValue) : UIFont.systemFont(ofSize: 15.0)]

    let attributedString : NSAttributedString = NSAttributedString(string: messageString!, attributes: attributes)

    let rect : CGRect = attributedString.boundingRect(with: CGSize(width: 222.0, height: CGFloat.greatestFiniteMagnitude), options: .usesLineFragmentOrigin, context: nil)

    let requredSize:CGRect = rect
    return requredSize.height
}

在我的例子中,我必须创建一个自定义单元格,其中包含来自服务器的图像,可以是任何宽度和高度。以及两个具有动态大小(宽度和高度)的UILabels

我在回答自动布局和编程实现了同样的效果:

基本上在@smileyBorg以上的回答有所帮助,但systemLayoutSizeFittingSize从未对我奏效,在我的方法中:

1.不使用自动行高计算属性。2.不使用估计高度3.不需要不必要的更新约束。4.不使用自动首选最大布局宽度。5.不使用systemLayoutSizeFittingSize(应该使用但不适用于我,我不知道它在内部做什么),而是使用我的方法-(float)getViewHeight,我知道它在在内部做些什么。

当我使用几种不同的方式显示单元格时,UITableView单元格中的高度是否可能不同?

如果单元格高度根据内容是动态的,则应精确计算出它,然后在渲染单元格之前返回高度值。一种简单的方法是在表视图单元格代码中定义计数方法,以便控制器在表单元格高度委托方法处调用。如果高度取决于表格或屏幕的宽度,请不要忘记计算实际单元格框架宽度(默认值为320)。也就是说,在表单元格高度委托方法中,首先使用cell.frame来校正单元格宽度,然后调用单元格中定义的计数高度方法来获得合适的值并返回它。

PS。可以在另一个方法中定义用于生成单元格对象的代码,以便调用不同的表视图单元格委托方法。

tableView.estimatedRowHeight = 343.0
tableView.rowHeight = UITableViewAutomaticDimension

另一个“解决方案”:跳过所有这些挫折,改用UIScrollView来获得与UITableView看起来和感觉相同的结果。

对我来说,这是一个痛苦的“解决方案”,因为我花了20多个令人沮丧的小时试图构建类似smileyborg建议的东西,但在几个月和三个版本的应用商店发布中失败了。

我的看法是,如果你真的需要iOS 7支持(对我们来说,这是必不可少的),那么这项技术太脆弱了,你会竭尽全力。UITableView通常是完全过度的,除非您使用一些高级行编辑功能和/或确实需要支持1000+“行”(在我们的应用程序中,它实际上永远不会超过20行)。

额外的好处是,与UITableView附带的所有委托垃圾相比,代码变得异常简单。它只是viewOnLoad中的一个代码循环,看起来很优雅,易于管理。

以下是一些关于如何做到这一点的提示:

使用Storyboard或nib文件,创建ViewController和关联的根视图。将UIScrollView拖到根视图上。向顶层视图添加顶部、底部、左侧和右侧约束,以便UIScrollView填充整个根视图。在UIScrollView中添加一个UIView,并将其称为“容器”。向UIScrollView(其父视图)添加顶部、底部、左侧和右侧约束。关键技巧:还要添加一个“等宽”约束来链接UIScrollView和UIView。注意:您将收到一个错误“滚动视图的可滚动内容高度不明确”,并且您的容器UIView的高度应该为0像素。当应用程序运行时,这两个错误似乎都不重要。为每个“单元”创建笔尖文件和控制器。使用UIView而不是UITableViewCell。在您的根ViewController中,您实际上将所有“行”添加到容器UIView中,并以编程方式添加约束,将它们的左边缘和右边缘链接到容器视图,将其顶部边缘链接到(第一个项目的)容器视图顶部或上一个单元格。然后将最终单元格链接到容器底部。

对我们来说,每一行都在一个笔尖文件中。所以代码看起来像这样:

class YourRootViewController {

    @IBOutlet var container: UIView! //container mentioned in step 4

    override func viewDidLoad() {
        
        super.viewDidLoad()

        var lastView: UIView?
        for data in yourDataSource {

            var cell = YourCellController(nibName: "YourCellNibName", bundle: nil)
            UITools.addViewToTop(container, child: cell.view, sibling: lastView)
            lastView = cell.view
            //Insert code here to populate your cell
        }

        if(lastView != nil) {
            container.addConstraint(NSLayoutConstraint(
                item: lastView!,
                attribute: NSLayoutAttribute.Bottom,
                relatedBy: NSLayoutRelation.Equal,
                toItem: container,
                attribute: NSLayoutAttribute.Bottom,
                multiplier: 1,
                constant: 0))
        }

        ///Add a refresh control, if you want - it seems to work fine in our app:
        var refreshControl = UIRefreshControl()
        container.addSubview(refreshControl!)
    }
}

下面是UITools.addViewToTop的代码:

class UITools {
    ///Add child to container, full width of the container and directly under sibling (or container if sibling nil):
    class func addViewToTop(container: UIView, child: UIView, sibling: UIView? = nil)
    {
        child.setTranslatesAutoresizingMaskIntoConstraints(false)
        container.addSubview(child)
        
        //Set left and right constraints so fills full horz width:
        
        container.addConstraint(NSLayoutConstraint(
            item: child,
            attribute: NSLayoutAttribute.Leading,
            relatedBy: NSLayoutRelation.Equal,
            toItem: container,
            attribute: NSLayoutAttribute.Left,
            multiplier: 1,
            constant: 0))
        
        container.addConstraint(NSLayoutConstraint(
            item: child,
            attribute: NSLayoutAttribute.Trailing,
            relatedBy: NSLayoutRelation.Equal,
            toItem: container,
            attribute: NSLayoutAttribute.Right,
            multiplier: 1,
            constant: 0))
        
        //Set vertical position from last item (or for first, from the superview):
        container.addConstraint(NSLayoutConstraint(
            item: child,
            attribute: NSLayoutAttribute.Top,
            relatedBy: NSLayoutRelation.Equal,
            toItem: sibling == nil ? container : sibling,
            attribute: sibling == nil ? NSLayoutAttribute.Top : NSLayoutAttribute.Bottom,
            multiplier: 1,
            constant: 0))
    }
}

到目前为止,我用这种方法发现的唯一“错误”是UITableView具有一个很好的特性,即在滚动时在视图顶部“浮动”节标题。除非您添加更多的编程,否则上面的解决方案无法做到这一点,但对于我们的特定情况,这一功能并不是100%必需的,当它消失时,没有人注意到。

如果您希望在单元格之间使用分隔符,只需在自定义“单元格”底部添加一个1像素高的UIView,它看起来像分隔符。

确保启用“反弹”和“垂直反弹”,刷新控件才能工作,这样看起来更像是一个表视图。

TableView在您的内容下显示一些空行和分隔符,如果它没有像这个解决方案那样填满整个屏幕。但就我个人而言,我更希望那些空行不在那里——因为单元格高度可变,所以我总是觉得空行在那里很“麻烦”。

希望其他一些程序员在浪费20多个小时试图在自己的应用程序中使用表视图解决问题之前阅读我的帖子