Swift - 在 ScrollView 中自动约束项目
Swift - auto constrain items in ScrollView
我在将我的物品限制在 UIScrollView
中时遇到问题,更具体地说 trailing - anchors
表现得很奇怪:
如您所见,trailing-anchors
与 leading-anchors
不同..
这些是我的约束:
scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 130).isActive = true
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
emailTextField.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
emailTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
emailTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
emailTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
anzeigeNameTextField.topAnchor.constraint(equalTo: emailTextField.topAnchor, constant: 80).isActive = true
anzeigeNameTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
anzeigeNameTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
anzeigeNameTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
wishlistHandleTextField.topAnchor.constraint(equalTo: anzeigeNameTextField.topAnchor, constant: 80).isActive = true
wishlistHandleTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
wishlistHandleTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
wishlistHandleTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
passwordTextField.topAnchor.constraint(equalTo: wishlistHandleTextField.topAnchor, constant: 80).isActive = true
passwordTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
passwordTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
passwordTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
eyeButtonOne.centerYAnchor.constraint(equalTo: passwordTextField.centerYAnchor, constant: 10).isActive = true
eyeButtonOne.trailingAnchor.constraint(equalTo: passwordTextField.trailingAnchor).isActive = true
passwordWiederholenTextField.topAnchor.constraint(equalTo: passwordTextField.topAnchor, constant: 80).isActive = true
passwordWiederholenTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
passwordWiederholenTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
passwordWiederholenTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
eyeButtonTwo.centerYAnchor.constraint(equalTo: passwordWiederholenTextField.centerYAnchor, constant: 10).isActive = true
eyeButtonTwo.trailingAnchor.constraint(equalTo: passwordWiederholenTextField.trailingAnchor).isActive = true
documentsLabel.topAnchor.constraint(equalTo: passwordWiederholenTextField.topAnchor, constant: 80).isActive = true
documentsLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
documentsLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
documentsLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
signUpButton.topAnchor.constraint(equalTo: documentsLabel.topAnchor, constant: 80).isActive = true
signUpButton.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
signUpButton.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
signUpButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
我做错了什么?我是否必须在 UIScrollView
内进行不同的约束?如果是,如何以及为什么?
为您创建示例代码。希望有用
并阅读此 link 以更好地理解下面的代码:scrollView with auto layout
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.view.backgroundColor = UIColor.red.withAlphaComponent(0.5)
// create scrollView
let scrollView = UIScrollView.init()
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.backgroundColor = UIColor.blue.withAlphaComponent(0.5)
self.view.addSubview(scrollView)
scrollView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
// create tempView inside scrollView for use autolayout with scrollView
let tempView = UIView.init()
tempView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(tempView)
tempView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
tempView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
tempView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
tempView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
// is important, just for use autolayout inside scrollView with scroll if content large screen
tempView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
let heightConstraint = tempView.heightAnchor.constraint(equalTo: self.view.heightAnchor)
heightConstraint.priority = .init(250)
heightConstraint.isActive = true
// create sample UI inside tempView
let emailTextField = UITextField.init()
emailTextField.translatesAutoresizingMaskIntoConstraints = false
emailTextField.backgroundColor = .white
tempView.addSubview(emailTextField)
emailTextField.topAnchor.constraint(equalTo: tempView.topAnchor, constant: 200).isActive = true
emailTextField.leadingAnchor.constraint(equalTo: tempView.leadingAnchor, constant: 50).isActive = true
emailTextField.trailingAnchor.constraint(equalTo: tempView.trailingAnchor, constant: -50).isActive = true
emailTextField.heightAnchor.constraint(equalToConstant: 100).isActive = true
}
screenShot
uiview需要是scrollview的子视图,之后你可以将你的元素嵌入到uiview中
我在将我的物品限制在 UIScrollView
中时遇到问题,更具体地说 trailing - anchors
表现得很奇怪:
如您所见,trailing-anchors
与 leading-anchors
不同..
这些是我的约束:
scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 130).isActive = true
scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 30).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -30).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
emailTextField.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
emailTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
emailTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
emailTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
anzeigeNameTextField.topAnchor.constraint(equalTo: emailTextField.topAnchor, constant: 80).isActive = true
anzeigeNameTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
anzeigeNameTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
anzeigeNameTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
wishlistHandleTextField.topAnchor.constraint(equalTo: anzeigeNameTextField.topAnchor, constant: 80).isActive = true
wishlistHandleTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
wishlistHandleTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
wishlistHandleTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
passwordTextField.topAnchor.constraint(equalTo: wishlistHandleTextField.topAnchor, constant: 80).isActive = true
passwordTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
passwordTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
passwordTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
eyeButtonOne.centerYAnchor.constraint(equalTo: passwordTextField.centerYAnchor, constant: 10).isActive = true
eyeButtonOne.trailingAnchor.constraint(equalTo: passwordTextField.trailingAnchor).isActive = true
passwordWiederholenTextField.topAnchor.constraint(equalTo: passwordTextField.topAnchor, constant: 80).isActive = true
passwordWiederholenTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
passwordWiederholenTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
passwordWiederholenTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
eyeButtonTwo.centerYAnchor.constraint(equalTo: passwordWiederholenTextField.centerYAnchor, constant: 10).isActive = true
eyeButtonTwo.trailingAnchor.constraint(equalTo: passwordWiederholenTextField.trailingAnchor).isActive = true
documentsLabel.topAnchor.constraint(equalTo: passwordWiederholenTextField.topAnchor, constant: 80).isActive = true
documentsLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
documentsLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
documentsLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
signUpButton.topAnchor.constraint(equalTo: documentsLabel.topAnchor, constant: 80).isActive = true
signUpButton.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
signUpButton.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
signUpButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
我做错了什么?我是否必须在 UIScrollView
内进行不同的约束?如果是,如何以及为什么?
为您创建示例代码。希望有用
并阅读此 link 以更好地理解下面的代码:scrollView with auto layout
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.view.backgroundColor = UIColor.red.withAlphaComponent(0.5)
// create scrollView
let scrollView = UIScrollView.init()
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.backgroundColor = UIColor.blue.withAlphaComponent(0.5)
self.view.addSubview(scrollView)
scrollView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
// create tempView inside scrollView for use autolayout with scrollView
let tempView = UIView.init()
tempView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(tempView)
tempView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
tempView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
tempView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
tempView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
// is important, just for use autolayout inside scrollView with scroll if content large screen
tempView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive = true
let heightConstraint = tempView.heightAnchor.constraint(equalTo: self.view.heightAnchor)
heightConstraint.priority = .init(250)
heightConstraint.isActive = true
// create sample UI inside tempView
let emailTextField = UITextField.init()
emailTextField.translatesAutoresizingMaskIntoConstraints = false
emailTextField.backgroundColor = .white
tempView.addSubview(emailTextField)
emailTextField.topAnchor.constraint(equalTo: tempView.topAnchor, constant: 200).isActive = true
emailTextField.leadingAnchor.constraint(equalTo: tempView.leadingAnchor, constant: 50).isActive = true
emailTextField.trailingAnchor.constraint(equalTo: tempView.trailingAnchor, constant: -50).isActive = true
emailTextField.heightAnchor.constraint(equalToConstant: 100).isActive = true
}
screenShot
uiview需要是scrollview的子视图,之后你可以将你的元素嵌入到uiview中