ios Swift 以编程方式对标签和图像的 tableView 动态单元格约束
ios Swift tableView dynamic cells constraints for labels and image programatically
我有标签和图像。我想要图像上方的标签。图像没有前导和尾随边距限制。
我已经尝试了以下约束,但似乎无法正确处理。并且单元格的行高在横向模式下不会相应调整。
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
根据顶部和底部的顺序视图设置底部和顶部锚点。在这里,您将 videolabel1 和 videodate 的底部锚点都设置为底部锚点,这是错误的:-
设置视频标签尾部和顶部锚点并移除底部锚点:-
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的bottom anchor,设置bottom anchor常量如下:-
videotitle.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12).isActive = true
如果您想以水平或垂直方式排列视图,请尝试使用 UIStackView
。 UIStackView
可以为您解决大部分限制。
您可以尝试添加一个垂直方向的父 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";
结果将类似于:
我有标签和图像。我想要图像上方的标签。图像没有前导和尾随边距限制。
我已经尝试了以下约束,但似乎无法正确处理。并且单元格的行高在横向模式下不会相应调整。
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
根据顶部和底部的顺序视图设置底部和顶部锚点。在这里,您将 videolabel1 和 videodate 的底部锚点都设置为底部锚点,这是错误的:-
设置视频标签尾部和顶部锚点并移除底部锚点:-
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的bottom anchor,设置bottom anchor常量如下:-
videotitle.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -12).isActive = true
如果您想以水平或垂直方式排列视图,请尝试使用 UIStackView
。 UIStackView
可以为您解决大部分限制。
您可以尝试添加一个垂直方向的父 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";
结果将类似于: