ios Swift tableView 以编程方式用于标签和图像的动态单元格约束

Posted

技术标签:

【中文标题】ios Swift tableView 以编程方式用于标签和图像的动态单元格约束【英文标题】:ios Swift tableView dynamic cells constraints for labels and image programatically 【发布时间】:2020-04-07 04:39:38 【问题描述】:

我有标签和图片。我想要图像上方的标签。并且图像没有前导和尾随边距限制。

我已经尝试了以下限制,但似乎无法做到正确。并且单元格的行高在横向模式下不会相应调整。

    addSubview(videolabel1)
    videolabel1.translatesAutoresizingMaskIntoConstraints = false
    videolabel1.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
    videolabel1.trailingAnchor.constraint(equalTo: trailingAnchor
        , constant: 20).isActive  = true

    videolabel1.topAnchor.constraint(equalTo: topAnchor, constant: 20).isActive = true
    videolabel1.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 20).isActive = true


    addSubview(image)
    image.translatesAutoresizingMaskIntoConstraints = false
    image.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
    image.trailingAnchor.constraint(equalTo: trailingAnchor).isActive  = true
    image.heightAnchor.constraint(equalToConstant: 150).isActive = true
    image.widthAnchor.constraint(equalTo: videoimage.heightAnchor
        , multiplier: 16/9).isActive = true

    image.topAnchor.constraint(equalTo: videodate.bottomAnchor, constant: 12).isActive = true
    image.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 12).isActive = true

【问题讨论】:

添加你得到的结果截图。很容易发现错误 您可以通过使用嵌套的堆栈视图并添加排列的子视图来实现它。另外,请添加您当前输出的屏幕截图。 【参考方案1】:

当您想以水平或垂直方式排列视图时,请尝试使用UIStackViewUIStackView 可以为您处理大多数约束。 您可以尝试添加一个垂直方向的父UIStackView,其中包含另一个水平方向的UIStackView(这个UIStackView 将包含两个UILabel's),然后是UIImageView,以及另一个UILabel

parentStackView = UIStackView()
parentStackView.axis = .vertical
parentStackView.distribution = .equalSpacing
parentStackView.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(parentStackView)
parentStackView.topAnchor.constraint(equalTo: self.contentView.topAnchor).isActive = true
parentStackView.widthAnchor.constraint(equalTo: self.contentView.widthAnchor, multiplier: 1).isActive = true
parentStackView.heightAnchor.constraint(equalTo: self.contentView.heightAnchor, multiplier: 1).isActive = true

parentStackView.isLayoutMarginsRelativeArrangement = true
parentStackView.addArrangedSubview(stackView)
stackView.axis = .horizontal
stackView.distribution = .equalSpacing
stackView.spacing = 10
stackView.addArrangedSubview(label)
label.text = "First Label";
stackView.addArrangedSubview(label2)
label2.text = "Second Label";
parentStackView.addArrangedSubview(imageView);
imageView.image = UIImage(named: "imageview");
NSLayoutConstraint.activate([imageView.heightAnchor.constraint(equalToConstant:UIScreen.main.bounds.width / 2) ]);
imageView.contentMode = .scaleAspectFill;
imageView.clipsToBounds = true;
parentStackView.addArrangedSubview(label3)
label3.text = "Vertical Label below Image";

结果将类似于:

【讨论】:

尝试删除 parentStackView 上的布局边距,这应该与其所有直接子项的宽度匹配,包括单元格的图像。 您能否详细说明一下 2:1 部分。同时,您可以尝试固定 imageView 的高度,并将 imageView 上的 contentMode 设置为 scaleAspectFill。 您可以将imageView的高度设置为(屏幕宽度)/2,也许?类似于 NSLayoutConstraint.activate([imageView.heightAnchor.constraint(equalToConstant:UIScreen.main.bounds.width / 2) ]) 以及 contentMode。 当然,没问题!如果您觉得有帮助,请不要忘记投票并接受答案。【参考方案2】:

根据顶部和底部的顺序视图设置底部和顶部锚点。在这里,您将 videolabel1 和 videodate 的底部锚点设置为错误的底部锚点:-

设置 videoLabel 尾随和顶部锚点并移除底部锚点:-

videolabel1.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20).isActive  = true
videolabel1.topAnchor.constraint(equalTo: topAnchor, constant: 20).isActive = true

如下设置 videoLabel 尾随锚点并移除底部锚点:-

videodate.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20).isActive  = true

另外,移除 imagview 的底部锚点并设置底部锚点常量,如下所示:-

videotitle.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12).isActive = true

【讨论】:

以上是关于ios Swift tableView 以编程方式用于标签和图像的动态单元格约束的主要内容,如果未能解决你的问题,请参考以下文章

如何以编程方式将不同单元格的不同图像添加到 tableView (Swift)

如何以编程方式将不同单元格的不同图像添加到 tableView (Swift 3)

在 Swift 中以编程方式突出显示 UITableViewCell

SnapKit:如何以编程方式为 TableView 单元中的项目设置布局约束

Swift:以编程方式重新排序表行

如何在 Swift 4 中以编程方式注册 UITableViewHeaderFooterView?