ios - 如何正确地在具有内在内容大小的视图之间进行约束?
问题描述
我在一个“行”中有两个UILabel
(垂直方向) 。我需要得到这个结果:
UIView
UIButton
查看初始化代码:
private lazy var contentView: UIView = {
let view = UIView(frame: .zero)
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
private lazy var priceView: UIView = {
let view = UIView(frame: .zero)
view.translatesAutoresizingMaskIntoConstraints = false
view.setContentHuggingPriority(.required, for: .horizontal)
return view
}()
private lazy var priceLabel: UILabel = {
let label = UILabel(frame: .zero)
label.numberOfLines = 1
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private lazy var oldPriceLabel: UILabel = {
let label = UILabel(frame: .zero)
label.numberOfLines = 1
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
private lazy var callButton: UIButton = {
let button = UIButton(frame: .zero)
button.translatesAutoresizingMaskIntoConstraints = false
button.layer.cornerRadius = 22.0
button.setTitleColor(.white, for: .normal)
button.setTitle("Call", for: .normal)
button.setContentHuggingPriority(.defaultLow, for: .horizontal)
button.setContentCompressionResistancePriority(.required, for: .horizontal)
return button
}()
使用 SnapKit 我做约束:
self.contentView.snp.makeConstraints { make in
make.top.bottom.equalToSuperview()
make.left.equalToSuperview().offset(16.0)
make.right.equalToSuperview().offset(-16.0)
}
self.priceView.snp.makeConstraints { make in
make.centerY.left.equalToSuperview()
make.right.equalTo(self.callButton.snp.left)
}
self.priceLabel.snp.makeConstraints { make in
make.left.equalToSuperview()
make.top.equalToSuperview()
make.right.lessThanOrEqualToSuperview()
}
self.oldPriceLabel.snp.makeConstraints { make in
make.left.bottom.equalToSuperview()
make.top.equalTo(self.priceLabel.snp.bottom).offset(8.0)
make.right.lessThanOrEqualToSuperview()
})
self.callButton.snp.makeConstraints { make in
make.left.equalTo(self.priceView.snp.right)
make.centerY.equalToSuperview()
make.height.equalTo(44.0)
make.right.equalToSuperview()
}
我想priceView
缩小到 UILabels 的大小并callButton
拉伸所有可用空间。拥抱和压缩不起作用,我不明白为什么。
解决方案
首先,您不必translateAutoresizingMaskIntoConstraints
在每个视图中都设置为 false,因为您使用SnapKit设置它们的约束。
接下来,处理你想要的最好的方法是利用UIStackView
.
这很容易:
self.view.addSubview(self.stackView_Main)
self.stackView_Main.snp.makeConstraints { (make) in
make.height.equalTo(44.0)
make.leading.trailing.equalToSuperview().inset(16.0)
make.top.equalToSuperview().inset(100.0)
}
self.callButton.snp.makeConstraints { (make) in
make.top.bottom.equalToSuperview()
}
你会完美地得到这个,没有警告:
完整示例代码:
import SnapKit
import UIKit
class ViewController: UIViewController {
private lazy var stackView_Main: UIStackView = {
let stackView = UIStackView(arrangedSubviews: [self.stackView_Price, self.callButton])
stackView.axis = .horizontal
stackView.spacing = 5.0
stackView.alignment = .leading
stackView.distribution = .fill
return stackView
}()
private lazy var stackView_Price: UIStackView = {
let stackView = UIStackView(arrangedSubviews: [self.priceLabel, self.oldPriceLabel])
stackView.axis = .vertical
stackView.spacing = 5.0
return stackView
}()
private lazy var priceLabel: UILabel = {
let label = UILabel(frame: .zero)
label.numberOfLines = 1
label.text = "500 000 000"
return label
}()
private lazy var oldPriceLabel: UILabel = {
let label = UILabel(frame: .zero)
label.numberOfLines = 1
label.text = "999 999 999 999"
return label
}()
private lazy var callButton: UIButton = {
let button = UIButton(frame: .zero)
button.layer.cornerRadius = 22.0
button.backgroundColor = .black
button.setTitleColor(.white, for: .normal)
button.setTitle("Call", for: .normal)
button.setContentHuggingPriority(.defaultLow, for: .horizontal)
button.setContentCompressionResistancePriority(.required, for: .horizontal)
return button
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(self.stackView_Main)
self.stackView_Main.snp.makeConstraints { (make) in
make.height.equalTo(44.0)
make.leading.trailing.equalToSuperview().inset(16.0)
make.top.equalToSuperview().inset(100.0)
}
self.callButton.snp.makeConstraints { (make) in
make.top.bottom.equalToSuperview()
}
}
}
让我知道这是否有帮助;)
推荐阅读
- mysql - mysql - 授予时丢失连接
- excel - 使用 VBA 代码中的 tdmsAddIn.Connect 插件将 TDMS 文件导出到 excel 时出现运行时错误
- r - 计算“严重”分区数据集中的组差异
- javascript - 如何使用 ES2016 在不同条件下过滤数组?
- javascript - 预期的模拟函数被调用了一次,但它被调用了零次
- ms-access - 更新文本框中公式的结果
- r - 努力在 R 中创建数据透视表
- javascript - 尝试使用 jsPDF 将图像添加到 pdf
- java - 我今天有机会在 webview 中打开 Flash 游戏吗?
- mongodb - MongoDB 使我的模式结构不那么相关