swift - 使用自动布局将对象均匀分开
问题描述
我下面的代码试图基于下面的照片。PicLocate 应该占据视图高度的 60%。Pic[0] 和 Pic 1应该占据 10% 的高度并且应该具有均匀的宽度。所有的对象应该在视图之间间隔 10 - 15 个间隙。主要是应该和照片一样
import UIKit
class ViewController: UIViewController {
var picLocate = UIImageView()
var jessicaAlba:Float = 50
var topConstraint: NSLayoutConstraint!
var heightConstraint: NSLayoutConstraint!
var leadingConstraint: NSLayoutConstraint!
var trailingConstraint: NSLayoutConstraint!
let pic = (0..<3).map { _ in UIButton() }
override func viewDidLoad() {
super.viewDidLoad()
[picLocate,pic[0],pic[1]].forEach {
$0.translatesAutoresizingMaskIntoConstraints = false
view.addSubview($0)
$0.backgroundColor = .systemOrange
}
pic[0].topAnchor.constraint(equalTo: picLocate.bottomAnchor, constant: 10).isActive = true
pic[0].leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
pic[0].trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -300).isActive = true
pic[0].bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -300).isActive = true
pic[1].topAnchor.constraint(equalTo: picLocate.bottomAnchor, constant: 10).isActive = true
pic[1].leadingAnchor.constraint(equalTo: pic[0].trailingAnchor, constant: 10).isActive = true
pic[1].trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
pic[1].bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -300).isActive = true
pic[0].setTitle("Add Box", for: .normal)
pic[1].setTitle("Save Photo", for: .normal)
topConstraint = picLocate.topAnchor.constraint(equalTo: view.topAnchor, constant: CGFloat(jessicaAlba))
topConstraint.isActive = true
heightConstraint = picLocate.heightAnchor.constraint(equalTo: view.heightAnchor , multiplier: 0.6, constant: CGFloat(-jessicaAlba))
heightConstraint.isActive = true
leadingConstraint = picLocate.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: CGFloat(jessicaAlba))
leadingConstraint.isActive = true
trailingConstraint = picLocate.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: CGFloat(-jessicaAlba))
trailingConstraint.isActive = true
}
}
解决方案
在编写约束时对它们进行注释会非常有帮助。很多时候,这会让你意识到你想做什么......
要获得所需的布局,您需要:
- 将高度设置
picLocate
为视图高度的 60%(使用当前代码,您还从 60% 中减去 50 分) - 将左侧图片(按钮)的前导设置为
picLocate
- 将右侧图片(按钮)的尾随设置为
picLocate
- 将右图的前导设置为左图的尾随 + 10-pts 用于间距
- 然后设置右图宽度等于左图宽度
结果:
并且,在横向,它会自动调整到所需的百分比:
这是您的代码,其中包含我描述的更改。看看,并查看评论:
class ViewController: UIViewController {
var picLocate = UIImageView()
var jessicaAlba:CGFloat = 50
var topConstraint: NSLayoutConstraint!
var heightConstraint: NSLayoutConstraint!
var leadingConstraint: NSLayoutConstraint!
var trailingConstraint: NSLayoutConstraint!
let pic = (0..<3).map { _ in UIButton() }
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
[picLocate,pic[0],pic[1]].forEach {
$0.translatesAutoresizingMaskIntoConstraints = false
view.addSubview($0)
$0.backgroundColor = .systemOrange
}
// 50-pts (jessicaAlba) from top of view
topConstraint = picLocate.topAnchor.constraint(equalTo: view.topAnchor, constant: jessicaAlba)
// 60% of view height minus 50-pts == ((0.6 * view height) - 50)
heightConstraint = picLocate.heightAnchor.constraint(equalTo: view.heightAnchor , multiplier: 0.6, constant: -jessicaAlba)
// if you actually want 60% of view height, set constant to 0.0
//heightConstraint = picLocate.heightAnchor.constraint(equalTo: view.heightAnchor , multiplier: 0.6, constant: 0.0)
// 50-pts leading and trailing
leadingConstraint = picLocate.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: jessicaAlba)
trailingConstraint = picLocate.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -jessicaAlba)
NSLayoutConstraint.activate([
topConstraint,
heightConstraint,
leadingConstraint,
trailingConstraint,
// "left pic" top is 10-pts below "picLocate" bottom
pic[0].topAnchor.constraint(equalTo: picLocate.bottomAnchor, constant: 10.0),
// "left pic" leading equal to "picLocate" leading
pic[0].leadingAnchor.constraint(equalTo: picLocate.leadingAnchor, constant: 0.0),
// "left pic" height equal to 10% of view height
pic[0].heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.10),
// "right pic" top equal to "left pic" top
pic[1].topAnchor.constraint(equalTo: pic[0].topAnchor),
// "right pic" height equal to "left pic" height
pic[1].heightAnchor.constraint(equalTo: pic[0].heightAnchor),
// "right pic" trailing equal to "picLocate" trailing
pic[1].trailingAnchor.constraint(equalTo: picLocate.trailingAnchor, constant: 0.0),
// "right pic" leading equal to "left pic" trailing plust 10-pts
pic[1].leadingAnchor.constraint(equalTo: pic[0].trailingAnchor, constant: 10.0),
// "right pic" width equal to "left pic" width
pic[1].widthAnchor.constraint(equalTo: pic[0].widthAnchor),
])
pic[0].setTitle("Add Box", for: .normal)
pic[1].setTitle("Save Photo", for: .normal)
}
}
推荐阅读
- ios - 默认选项卡未将第一个选项卡显示为选中状态
- javascript - 如何通过ios中的自定义组件来回控制react native webview组件?
- windows - 当 Windows 从睡眠模式唤醒显示器时如何接收通知?
- c - 无法打印,是数据没有插入还是循环有问题?
- java - 此 java 程序中存在多线程冲突。怎么解释?
- r - 每天选择一天中的一小时进行分析
- c# - 在服务器中完成连接字符串的加密?
- server - 如果我在我的服务器中删除 Vesta Panel 会发生什么?
- python - 如何在__init__中获取python类实例变量?
- arrays - VBA Excel,形状数组。如何修复错误“指定集合的索引超出范围”?