Autolayout - 当一个视图具有动态高度时，在 UITableViewCell 中垂直居中两个视图

Posted 2023-03-11

【中文标题】Autolayout - 当一个视图具有动态高度时，在 UITableViewCell 中垂直居中两个视图

【英文标题】：Autolayout - Vertically center two views in a UITableViewCell when one view has dynamic height

【发布时间】：2015-04-09 05:26:47

【问题描述】：

这就是我想要实现的目标。在 UITableView 单元内，我有一个填充有动态内容的 UIlabel 和一个具有设定高度的单独 UIView。在某些情况下，当有很多文本时，UIlabel 决定了 UITableView Cell 的高度。在其他情况下，当 UILabel 中只有一行文本时，UIView 会设置单元格的高度。 （这是我目前拥有的。）

    self.myLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.myView.setTranslatesAutoresizingMaskIntoConstraints(false)


    let viewsDictionary = [
        "myLabel":myLabel,
        "myView":myView,
    ]


    let myLabel_H:Array = NSLayoutConstraint.constraintsWithVisualFormat("H:|-15-[myLabel]-60-|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDictionary)
    let myLabel_V:Array = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[myLabel]-|", options:NSLayoutFormatOptions(0), metrics: nil, views: viewsDictionary)

    self.contentView.addConstraints(myLabel_H)
    self.contentView.addConstraints(myLabel_V)


    let myView_H:Array = NSLayoutConstraint.constraintsWithVisualFormat("H:[myView(50)]-|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDictionary)
    let myView_V:Array = NSLayoutConstraint.constraintsWithVisualFormat("V:|-(>=10)-[myView(100)]-(>=10)-|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDictionary)

    self.contentView.addConstraints(myView_H)
    self.contentView.addConstraints(myView_V)

相反，我得到了这个：（而且我抛出错误：=10）-| （名称：'|':UITableViewCellContentView:0x7fc21bc6d050 ）>）

【问题讨论】：

点击此链接....***.com/questions/18527227/…

是的......有什么问题？你的代码给你什么结果？

【参考方案1】：

您需要使用非可视化自动布局格式。

在 ObjC 中它看起来像这样：

[self.viewOuterView addConstraint:[NSlayoutConstraint constraintWithItem:self.innerView attribute:NSLayoutAttributeCenterY relateBy:NSLayoutRelationEqual toItem:self.outerView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];

【讨论】：

伟大的会试试这个。这是与 VFL 结合使用还是说没有 VFL 方法可以做到这一点？

这与我所拥有的相结合。除了我仍然抛出一个错误：2015-04-09 09:43:06.403 表[87834:4701607] 无法同时满足约束。将尝试通过打破约束来恢复 <0x7f8ee8e3ad30 v:>

【参考方案2】：

您可以使用可视布局方法（.AlignAllCenterY）的选项参数中的对齐值对齐两个子视图，因此您无需为图像视图添加单独的约束以使其在 y 方向居中.另外，最好让水平约束从左边缘到标签再到图像视图到右边缘，而不是将标签固定到父视图的两个边缘。

class RDTableViewCell: UITableViewCell 

    var myLabel = UILabel()
    var myView = UIImageView()

    required init(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
    

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) 
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        myLabel.numberOfLines = 0
        myLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
        myView.setTranslatesAutoresizingMaskIntoConstraints(false)

        contentView.addSubview(myLabel)
        contentView.addSubview(myView)

        let viewsDictionary = ["myLabel":myLabel, "myView":myView]

        let horizontalCons = NSLayoutConstraint.constraintsWithVisualFormat("H:|-15-[myLabel]-[myView(50)]-|", options: .AlignAllCenterY, metrics: nil, views: viewsDictionary)
        let myLabel_V = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[myLabel]-|", options:NSLayoutFormatOptions(0), metrics: nil, views: viewsDictionary)
        let myView_V = NSLayoutConstraint.constraintsWithVisualFormat("V:|-(>=10)-[myView(100)]-(>=10)-|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDictionary)

        contentView.addConstraints(horizontalCons)
        contentView.addConstraints(myLabel_V)
        contentView.addConstraints(myView_V)
    

【讨论】：

精通。您是否收到任何警告？关于打破约束？我仍然收到需要打​​破约束的消息。特别是我认为是“V:|-(>=10)-[myView(100)]-(>=10)-|”

标签的拥抱优先级是否需要降低？

@DeliciousMe 不，我没有收到任何警告。您是否将图像视图的 contentMode 属性设置为默认值 UIViewContentModeScaleToFill 以外的其他值？您是否像我一样在代码中添加子视图（没有 xib 或情节提要）？另外，您是否设置了estimatedRowHeight 并将行高设置为UITableViewAutomaticDimension？

是的。我没有触及 contentMode 属性，我在没有 xib 或情节提要的代码中添加了所有子视图。而且我还将estimatedRowHeight 和rowHeight 设置为UITableViewAutomaticDimension。唯一的区别是我将这一切都包装在一个布局函数中，我从 override init 方法调用该函数。请注意，一切看起来都正确，只是抛出错误。

@DeliciousMe 很难说问题出在哪里，如果你说你基本上和我发布的一样，但你的会抛出错误而我的不会。