swift - UIStackView 具有自定义大小的元素和中心的项目 - Swift - 以编程方式
问题描述
我想在底部设置一个带有 3 个视图的 UIStackView,以便中心视图位于中心,其他视图也相应调整,我还希望能够为所有 3 个视图设置宽度和高度锚点。这是期望的结果:
这就是我得到的:
这是我正在使用的代码:
bottomStackView = UIStackView(arrangedSubviews: [pickerView, downloadContentButton, shareButton])
bottomStackView.alignment = .center
bottomStackView.distribution = .fill
bottomStackView.axis = .horizontal
bottomStackView.spacing = 5
bottomStackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bottomStackView)
bottomStackView.anchor(top: nil, leading: view.leadingAnchor, bottom: view.safeAreaLayoutGuide.bottomAnchor, trailing: view.trailingAnchor)
bottomStackView.heightAnchor.constraint(equalToConstant: 150).isActive = true
bottomStackView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
pickerView.heightAnchor.constraint(equalToConstant: 120).isActive = true
shareButton.heightAnchor.constraint(equalToConstant: 150).isActive = true
shareButton.widthAnchor.constraint(equalTo: pickerView.widthAnchor).isActive = true
downloadContentButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
downloadContentButton.widthAnchor.constraint(equalToConstant: 30).isActive = true
shareButton.widthAnchor.constraint(equalToConstant: 80).isActive = true
shareButton.heightAnchor.constraint(equalToConstant: 80).isActive = true
解决方案
我想你是在追求这种东西:
或者,如果我们变得更宽:
如果是这样的话,那么一个关键的错误就是当你说:
bottomStackView.distribution = .fill
你实际上想要.equalDistribution
. 为了演示,我完全用代码创建了示例,因此您可以看到所有设置:
let sv = UIStackView()
sv.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(sv)
sv.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20).isActive = true
sv.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20).isActive = true
sv.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -20).isActive = true
sv.heightAnchor.constraint(equalToConstant: 160).isActive = true
sv.distribution = .equalSpacing
sv.alignment = .center
let v1 = UIView()
v1.translatesAutoresizingMaskIntoConstraints = false
v1.widthAnchor.constraint(equalToConstant: 120).isActive = true
v1.heightAnchor.constraint(equalToConstant: 150).isActive = true
v1.backgroundColor = .red
sv.addArrangedSubview(v1)
let v2 = UIView()
v2.translatesAutoresizingMaskIntoConstraints = false
v2.widthAnchor.constraint(equalToConstant: 80).isActive = true
v2.heightAnchor.constraint(equalToConstant: 80).isActive = true
v2.backgroundColor = .yellow
sv.addArrangedSubview(v2)
let v3 = UIView()
v3.translatesAutoresizingMaskIntoConstraints = false
v3.widthAnchor.constraint(equalToConstant: 120).isActive = true
v3.heightAnchor.constraint(equalToConstant: 150).isActive = true
v3.backgroundColor = .blue
sv.addArrangedSubview(v3)
推荐阅读
- c# - 如何在gridview coulm中制作一个itemtemplate或带有标签编号的东西,从1到5?
- java - “未找到默认活动”
- python - 在 Keras 中为每个具有不同隐藏大小和多个 LSTM 层的小批量设置隐藏状态
- java - 如何将导入包中的对象发送到另一个 Activty
- ionic4 - Facebook 登录集成密钥哈希错误?
- spring-boot - 为什么 mstor 在 inbox.close() 上抛出 NotSerializableException
- ruby-on-rails - 在模块中扩展自我
- jquery - Jquery 步骤基本示例 - 字段未出现
- twitter-bootstrap - 引导排水沟
- asp.net-core - 使用 PuppeteerSharp 的 AspNet Core Razor 视图