I am having problems to constrain my items inside my UIScrollView, to be more specific trailing - anchors are behaving weird:
As you can see trailing-anchors are not the same as leading-anchors..
These are my constrains:
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
What am I doing wrong? Do I have to constraint differently inside a UIScrollView? And if so, how and why?
create sample code for you. Hope it will be useful
and read this link for better sene below code: 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 needed to be subview of scrollview, after that you can embed you're elements into uiview
Related
I'm trying to animate the hiding of the arranged subviews of a UIStackView:
UIView.animate(withDuration: 3, delay: 0) {
self.stackView.subviews.forEach({ $0.isHidden = true })
self.stackView.updateConstraintsIfNeeded()
self.stackView.layoutIfNeeded()
self.view.layoutIfNeeded()
} completion: { (_) in
self.children.forEach({ $0.removeFromParent() })
completion()
}
The problem is the views while animating expand in their width across the screen (out of screen bounds).
This is how the views are setup:
scrollView = {
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
return scrollView
}()
stackView = {
let stackView = UIStackView()
stackView.axis = .vertical
stackView.distribution = .fill
stackView.translatesAutoresizingMaskIntoConstraints = false
return stackView
}()
contentView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
contentView.addSubview(stackView)
scrollView.addSubview(contentView)
view.addSubview(scrollView)
scrollView.showsVerticalScrollIndicator = false
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
contentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
contentView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 20).isActive = true
stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 20).isActive = true
stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -20).isActive = true
stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -50).isActive = true
Question: How can I animate it in such a way, that it does not change width during the animation?
I don't know if this is a weird issue of the UIStackView or it serves some purpose, but: putting an "invisible" UIView into your UIStackView will fix the issue. Tag it, so when hiding the other elements it remains visible:
let imposterView = UIView()
imposterView.tag = 999
stackView.addArrangedSubview(imposterView)
Of course handle your hiding logic accordingly:
stackView.subviews.forEach({
if $0.tag != 999 {
$0.isHidden = true
}
})
I have a centered UITextField inside a UICollectionView Cell, but the text moves weirdly to the right when editing. What is causing the problem?
let textLabel: UITextField = {
let label = UITextField()
label.textAlignment = .center
label.adjustsFontSizeToFitWidth = true
label.minimumFontSize = 12
return label
}()
addSubview(textLabel)
textLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 15).isActive = true
textLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
textLabel.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
textLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -15).isActive = true
Here is a screen capture of the problem:
Update: Turns out the UITextfield's height is too large, I reduced its height and everything works perfectly now. Thanks for your kind help!
textLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 15).isActive = true
textLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
textLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
textLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -15).isActive = true
I'm currently trying to achieve a Shimmer effect in Swift. To do that I create a gray UIView, and another on top of it with an effect.
The problem is that I'm writing the same code twice...
let profileShimmerView = UIView()
profileShimmerView.backgroundColor = whiteClear
profileShimmerView.layer.cornerRadius = 20
profileShimmerView.clipsToBounds = true
let profileView = UIView()
profileView.backgroundColor = grayClear
profileView.layer.cornerRadius = 20
profileView.clipsToBounds = true
self.addSubview(profileView)
self.addSubview(profileShimmerView)
profileShimmerView.translatesAutoresizingMaskIntoConstraints = false
profileShimmerView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 45).isActive = true
profileShimmerView.topAnchor.constraint(equalTo: self.topAnchor, constant: 15).isActive = true
profileShimmerView.widthAnchor.constraint(equalToConstant: 40).isActive = true
profileShimmerView.heightAnchor.constraint(equalToConstant: 40).isActive = true
profileView.translatesAutoresizingMaskIntoConstraints = false
profileView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 45).isActive = true
profileView.topAnchor.constraint(equalTo: self.topAnchor, constant: 15).isActive = true
profileView.widthAnchor.constraint(equalToConstant: 40).isActive = true
profileView.heightAnchor.constraint(equalToConstant: 40).isActive = true
Is there a more simple way to achieve that?
You can create a function
func shared(color : UIColor)->UIView {
let v = UIView()
v.backgroundColor = color
v.layer.cornerRadius = 20
v.clipsToBounds = true
self.addSubview(v)
v.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
v.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 45),
v.topAnchor.constraint(equalTo: self.topAnchor, constant: 15),
v.widthAnchor.constraint(equalToConstant: 40),
v.heightAnchor.constraint(equalToConstant: 40)
])
return v
}
How do you print out the value of an anchor's constant? For example:
let myButton = UIButton()
myButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 5).isActive = true
myButton.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
myButton.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
myButton.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
print(myButton.topAnchor.constant)//this would print 5
The constant is for the constraint that you have laid out for the anchor. Anchors don't have constants. Constraints do. So what you need to do is maintain a reference of the constraint and access the constant.
let myButtonTopAnchorConstraint = myButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 5)
myButtonTopAnchorConstraint.isActive = true
myButton.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
myButton.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
myButton.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
print(myButtonTopAnchorConstraint.constant) //Prints 5
A view will have only one topAnchor, but can have multiple constraints relative to that anchor.
I try to remove constraints. I want to different constraints on portrait and landscape. If I change the orientation to Portrait I call the function setupConstrainsInPortrait and conversely. I have two functions.
This function setup Portrait mode.
func setupConstrainsInPortrait() {
view.addSubview(myView)
myView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
myView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50).isActive = true
myView.heightAnchor.constraint(equalToConstant: 300).isActive = true
myView.widthAnchor.constraint(equalToConstant: view.frame.size.width).isActive = true
view.addSubview(switchKmM)
switchKmM.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
switchKmM.topAnchor.constraint(equalTo: myView.bottomAnchor, constant: 10).isActive = true
switchKmM.heightAnchor.constraint(equalToConstant: 50).isActive = true
switchKmM.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
view.addSubview(speedLbl)
speedLbl.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
speedLbl.topAnchor.constraint(equalTo: view.bottomAnchor, constant: -50).isActive = true
speedLbl.heightAnchor.constraint(equalToConstant: 50).isActive = true
speedLbl.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
}
This function setup landscape mode.
func setupConstrainsInLandScape() {
view.addSubview(myView)
myView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 10).isActive = true
myView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
myView.heightAnchor.constraint(equalToConstant: 300).isActive = true
myView.widthAnchor.constraint(equalToConstant: 150).isActive = true
view.addSubview(switchKmM)
switchKmM.leftAnchor.constraint(equalTo: myView.rightAnchor, constant: 30).isActive = true
switchKmM.topAnchor.constraint(equalTo: view.topAnchor, constant: 30).isActive = true
switchKmM.heightAnchor.constraint(equalToConstant: 50).isActive = true
switchKmM.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
}
I use these functions in viewWillTransition
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
if UIDevice.current.orientation.isLandscape {
print("landscape!")
view.backgroundColor = .green
setupConstrainsInLandScape()
self.viewWillLayoutSubviews()
}
else {
print("portrét")
view.backgroundColor = .white
setupConstrainsInPortrait()
self.viewWillLayoutSubviews()
}
super.viewWillTransition(to: size, with: coordinator)
}
The problem is, that constraints(from portrait function) in landscape mode aren't deleted
I hope that someone can help me... Thank you
You're not doing enough work. You need to retain references to all the constraints you activate, so that you can deactivate them later. For example, you are saying:
myView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
myView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50).isActive = true
myView.heightAnchor.constraint(equalToConstant: 300).isActive = true
myView.widthAnchor.constraint(equalToConstant: view.frame.size.width).isActive = true
Instead, you need to say something like
self.myConstraints1 = [
myView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
myView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50),
myView.heightAnchor.constraint(equalToConstant: 300),
myView.widthAnchor.constraint(equalToConstant: view.frame.size.width),
]
Now activate all those constraints. Proceed the same way throughout.
Thus, when the time comes to deactivate constraints because the orientation is changing, you have references to them and can do so.
You can remove your constraints using:
myView.constraints.removeAll()
Before setting the new ones.