I have stackview with four elements that need to be centered horizontally:
let stackView = UIStackView()
stackView.axis = UILayoutConstraintAxis.vertical
stackView.distribution = UIStackViewDistribution.equalSpacing
stackView.alignment = UIStackViewAlignment.center
stackView.spacing = 5.0
stackView.addArrangedSubview(browseButton)
stackView.addArrangedSubview(orLabel)
stackView.addArrangedSubview(createButton)
stackView.addArrangedSubview(imageView)
let imageViewCenterXConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: stackView, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
stackView.addConstraint(imageViewCenterXConstraint)
stackView.translatesAutoresizingMaskIntoConstraints = false
let stackViewCenterXConstraint = NSLayoutConstraint(item: stackView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: wantMorePage!, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
let stackViewCenterYConstraint = NSLayoutConstraint(item: stackView, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: wantMorePage!, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0)
wantMorePage?.backgroundColor = UIColor.gray
wantMorePage!.addSubview(stackView)
wantMorePage!.addConstraint(stackViewCenterXConstraint)
wantMorePage!.addConstraint(stackViewCenterYConstraint)
self.scrollView.addSubview(wantMorePage!)
I added constraints and set alignment to center, but elements are still not centered (screenshot). What should I do to center them?
Replace:
wantMorePage!.addConstraint(stackViewCenterXConstraint)
wantMorePage!.addConstraint(stackViewCenterYConstraint)
With:
stackViewCenterXConstraint.isActive = true
stackViewCenterYConstraint.isActive = true
https://developer.apple.com/documentation/uikit/uiview/1622523-addconstraint
Also you need to add the subView before you can add constraints to it
Move this above isActive calls:
self.scrollView.addSubview(wantMorePage!)
Like so:
wantMorePage!.addSubview(stackView)
self.scrollView.addSubview(wantMorePage!)
let imageViewCenterXConstraint = NSLayoutConstraint(item: imageView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: stackView, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
imageViewCenterXConstraint.isActive = true
let stackViewCenterXConstraint = NSLayoutConstraint(item: stackView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: wantMorePage!, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
let stackViewCenterYConstraint = NSLayoutConstraint(item: stackView, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: wantMorePage!, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0)
stackViewCenterXConstraint.isActive = true
stackViewCenterYConstraint.isActive = true
Found what the issue was - the width of the view was incorrect, in my code wantMorePage was bigger than needed, I made it the same size as its superview and it fixed the issue.
Related
I've an UITableView with some cells, in the first cell I would like to add multiple UILabel. That's the code I am using inside a function in UITableViewCell sub class (called in cellForRowAt):
...
let constantTop = 16
for (index,optional) in optionals.enumerated(){
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "\(optional.name)"
label.tag = 10010132
label.font = CocoFonts.semibold(size: 15)
label.textColor = CocoColors.FedericoMalagoni.textVeryDarkBlue
self.contentView.addSubview(label)
let constant:CGFloat = CGFloat(constantTop * (index + 1))
print(constant)
let horizontalConstraint = NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal, toItem: self.contentView, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 16)
let verticalConstraint = NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal, toItem: self.contentView, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: 16)
let height = NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let top = NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: self.lblInfo, attribute: NSLayoutAttribute.bottomMargin, multiplier: 1, constant: constant)
let bottom = NSLayoutConstraint(item: label, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.contentView, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: constant)
NSLayoutConstraint.activate([horizontalConstraint, verticalConstraint, top, bottom, height])
}
self.contentView.setNeedsUpdateConstraints()
self.contentView.setNeedsLayout()
self.contentView.layoutIfNeeded()
...
Now,
The labels are over the edge of the cell like this:
The gray separator divide the cell.
Essentially the height of the cell is not updated.
It would be more clear if you could share full implementation of cellForRowAt.
I faced similar issue where cell contents were overlapping. I was adding custom view to the cell as subview.
This happens because Table view re uses its cells. So one solution is to remove old label from the cell before you add new.
for content in cell.contentView.subviews {
content.removeFromSuperview()
}
Situation
So I'm trying to make a UIScrollView that is basically a menu navigation bar that a user can navigate by swiping between menu items, where there are pages vertically laid out, and sub-pages horizontally laid out. Mockup:
The way I'm doing this is by creating a UIScrollView whose frame is the size of one UILabel, and I have isPagingEnabled set to true. I then tried adding a UIStackView, with each row indicating a page, and the contents of each row being a sub-page. I set the scrollView.contentSize to be the size of the UIStackView. The problem is that all my label's frames are zeros all through and the UIScrollView doesn't work.
:/
I really wanted to avoid getting help as I felt like I could do this by myself but I've spent two days on this and I've lost all hope.
Code
Here is the code where I add the labels. It's called upon the scrollview's superview's init (because the UIScrollView is in a custom UIView I call crossNavigation View).
private func addScrollViewLabels() {
//Get Max Number of Items in a Single Row
var maxRowCount = -1
for item in items {
if (item.contents.count > maxRowCount) {maxRowCount = item.contents.count}
}
self.rowsStackView.axis = .vertical
self.rowsStackView.distribution = .fillEqually
self.rowsStackView.alignment = .fill
self.rowsStackView.translatesAutoresizingMaskIntoConstraints = false
self.scrollView.addSubview(rowsStackView)
for i in 0 ..< items.count {
let row = items[i].contents
let rowView = UIView()
self.rowsStackView.addArrangedSubview(rowView)
var rowLabels : [UILabel] = []
//First Label
rowLabels.append(UILabel())
rowView.addSubview(rowLabels[0])
NSLayoutConstraint(item: rowLabels[0], attribute: .leading, relatedBy: .equal, toItem: rowView, attribute: .leading, multiplier: 1.0, constant: 0.0).isActive = true
NSLayoutConstraint(item: rowLabels[0], attribute: .top, relatedBy: .equal, toItem: rowView, attribute: .top, multiplier: 1.0, constant: 0.0).isActive = true
NSLayoutConstraint(item: rowLabels[0], attribute: .bottom, relatedBy: .equal, toItem: rowView, attribute: .bottom, multiplier: 1.0, constant: 0.0).isActive = true
NSLayoutConstraint(item: rowLabels[0], attribute: .width, relatedBy: .equal, toItem: containerView, attribute: .width, multiplier: 0.55, constant: 0.0).isActive = true
//Middle Labels
for j in 1 ..< row.count {
rowLabels.append(UILabel())
rowView.addSubview(rowLabels[j])
//Stick it to it's left
NSLayoutConstraint(item: rowLabels[j], attribute: .leading, relatedBy: .equal, toItem: rowLabels[j-1], attribute: .trailing, multiplier: 1.0, constant: 0.0).isActive = true
//Stick top to rowView
NSLayoutConstraint(item: rowLabels[j], attribute: .top, relatedBy: .equal, toItem: rowView, attribute: .top, multiplier: 1.0, constant: 0.0).isActive = true
//Row Height is equal to rowView's Height
NSLayoutConstraint(item: rowLabels[j], attribute: .height, relatedBy: .equal, toItem: rowView, attribute: .height, multiplier: 1.0, constant: 0.0).isActive = true
//rowLabels[j].width = containerView.width * 0.55 (so other labels can peek around it)
NSLayoutConstraint(item: rowLabels[j], attribute: .width, relatedBy: .equal, toItem: containerView, attribute: .width, multiplier: 0.55, constant: 0.0).isActive = true
}
//lastLabel.trailing = rowView.trailing
NSLayoutConstraint(item: rowLabels[row.count-1], attribute: .trailing, relatedBy: .equal, toItem: rowView, attribute: .trailing, multiplier: 1.0, constant: 0.0).isActive = true
}
//Constraints for stack view:
//rowsStackView.height = scrollView.height * items.count
NSLayoutConstraint(item: rowsStackView, attribute: .height, relatedBy: .equal, toItem: scrollView, attribute: .height, multiplier: CGFloat(self.items.count), constant: 0.0).isActive = true
//rowsStackView.height = scrollView.height * items.count
NSLayoutConstraint(item: rowsStackView, attribute: .leading, relatedBy: .equal, toItem: containerView, attribute: .leading, multiplier: 1.0, constant: 0.0).isActive = true
NSLayoutConstraint(item: rowsStackView, attribute: .top, relatedBy: .equal, toItem: scrollView, attribute: .top, multiplier: 1.0, constant: 0.0).isActive = true
NSLayoutConstraint(item: rowsStackView, attribute: .width, relatedBy: .equal, toItem: containerView, attribute: .width, multiplier: 1.0, constant: 0.0).isActive = true
self.scrollView.contentSize = rowsStackView.frame.size
}
Take a look at this demo project I made based off your mock up.
It sets up the framework for everything you want to do.
Examine the view hierarchy and you'll understand where to configure the layout to make it exactly how you want.
The last step is to tweak the paging so you get the snap behavior you desire. There are many ways to do this but it is a bit involved.
Good Luck!
I am trying to autolayout 3 UI elements in the order which I present in the image. A UITextfield, UIDatePicker and a UIButton in a UIView.
I am avoiding to use storyboard as I want to get a better understanding of programmatic constraints and eventually use animations for them.
So far I have got this with some constraints I have tried:
and here is the code for the one I am working on:
override func viewDidLoad() {
super.viewDidLoad()
picker.translatesAutoresizingMaskIntoConstraints = false
picker.backgroundColor = UIColor.red
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.blue
button.setTitle("Button", for: .normal)
self.view.addSubview(picker)
self.view.addSubview(button)
let PickercenterX = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
let PickercenterBottom = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.button, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -30)
let Pickerheight = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 150)
let Pickerwidth = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.width, relatedBy: .equal, toItem: self.view, attribute: NSLayoutAttribute.width, multiplier: 1, constant: -5)
// Centers it on the x axis. Pushes it it right if co constant has a value > 0
let centerX = NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
let centerBottom = NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -15)
let height = NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 50)
let width = NSLayoutConstraint(item: self.button, attribute: NSLayoutAttribute.width, relatedBy: .equal, toItem: self.view, attribute: NSLayoutAttribute.width, multiplier: 1, constant: -15)
self.view.addConstraints([centerX, centerBottom, height, width, PickercenterX, PickercenterBottom, Pickerheight, Pickerwidth])
}
I am trying to work the button and date picker first before moving onto the textfield. How can I achieve this programmatically ?
Here lies the problem:-
You were setting the picker bottom to be equal to the button bottom with constant -30, although I know what were you trying to do, you were trying to give vertical space between picker and button. So it should be linked like, picker's bottom equal to button's top with constant -30.
Moreover you are missing out on activating the constraints by not adding isActive in the end.
Another way to activate all constraints at once is by using NSLayoutConstraint.activate() method
let PickercenterBottom = NSLayoutConstraint(item: self.picker, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.button, attribute: NSLayoutAttribute.top, multiplier: 1, constant: -30).isActive = true
I'm trying to programmatically create a UIView with a UILabel as a subview using autolayout.
Constraints
I used the following constraints on view:
CenterX of view to fastAttacksContainerView (superview).
Top constraint of constant 8 to superview.
Then created a label which is a subview of view and added constraints of constant 8 for Top, Bottom, Left, and Right to view.
Problem
The view only resizes to the frame of the label and does not account for the 4 constraints of constant 8 on all 4 sides. Which causes the label to be displayed partially outside the view.
let view = UIView()
view.backgroundColor = pokemon.secondaryColor
let label = UILabel()
fastAttacksContainerView.addSubview(view)
view.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
label.text = fa
let gest = UITapGestureRecognizer(target: self, action: #selector(self.selectFastAttack))
view.addGestureRecognizer(gest)
fastAttackButtons.append(view)
fastAttackLables.append(label)
let top = NSLayoutConstraint(item: view, attribute: .Top, relatedBy: .Equal, toItem: fastAttacksContainerView, attribute: .Top, multiplier: 1, constant: 8)
let centerX = NSLayoutConstraint(item: view, attribute: .CenterX, relatedBy: .Equal, toItem: fastAttacksContainerView, attribute: .CenterX, multiplier: 1, constant: 0)
let labLeft = NSLayoutConstraint(item: label, attribute: .Left, relatedBy: .Equal, toItem: view, attribute: .Left, multiplier: 1, constant: 8)
let labTop = NSLayoutConstraint(item: label, attribute: .Top, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1, constant: 8)
let labRigth = NSLayoutConstraint(item: label, attribute: .Right, relatedBy: .Equal, toItem: view, attribute: .Right, multiplier: 1, constant: 8)
let labBottom = NSLayoutConstraint(item: label, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Bottom, multiplier: 1, constant: 8)
view.addConstraints([labLeft, labTop, labRigth, labBottom])
fastAttacksContainerView.addConstraints([top, centerX])
Output
view has ambiguous height.
You should add constraint for height of view or distance from it to bottom of fastAttacksContainerView.
I managed to fix this problem by making a similar setup on storyboard and copying the constraints in.
Things that I changed:
Used Leading and Trailing instead of Left and Right layout attributes.
For the labLeft and labRight constraints, I interchanged item and toItem. (This seems like a bug to me. Can anyone verify, please?)
Code change:
let labLeft = NSLayoutConstraint(item: label, attribute: .Leading, relatedBy: .Equal, toItem: view, attribute: .Leading, multiplier: 1, constant: 8)
let labTop = NSLayoutConstraint(item: label, attribute: .Top, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1, constant: 8)
let labRigth = NSLayoutConstraint(item: view, attribute: .Trailing, relatedBy: .Equal, toItem: label, attribute: .Trailing, multiplier: 1, constant: 8)
let labBottom = NSLayoutConstraint(item: view, attribute: .Bottom, relatedBy: .Equal, toItem: label, attribute: .Bottom, multiplier: 1, constant: 8)
My aim is to set a UIView at the end (right bottom) of a UIScrollView. I saw solution using UIContentSize but I don't want to use this property because it is not adapted : The UIView width isn't equal to the UIScrollview contentSize.
The UIView is a subview of the UIScrollView and I only need to scroll horizontally. I think I must use constraints in order to stick my UIView at the end of the UIscrollview (that means the UIView Right side is the same that the UIScrollView right side, both have the same height)
What I did is :
let horizontalConstraint = NSLayoutConstraint(item: self.myView , attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: self.myScrollView , attribute: NSLayoutAttribute.Right, multiplier: 1, constant: 0)
self.myScrollView.addConstraint(horizontalConstraint)
let verticalConstraint = NSLayoutConstraint(item: self.myView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.myScrollView, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)
self.myScrollView.addConstraint(verticalConstraint)
I'm a bit confused and stuck about how to set this constraints, I'm probably wrong because my view doesn't display anymore. Do I need to define all the constraint or only the one for the right and one for the top ? Any advice ? Thanks
EDIT :
The solution I want could be represented like this :
UIScrollView takes it's content size from it's subviews, so it will only be as large as what it contains. We can't set it's size independently. Everything should be in a subview.
Decide on the size of myScrollView you want:
let myViewWidth = myView.frame.width
let myViewHeight = myView.frame.height
let screenWidth = myScrollView.frame.width
let scrollContentWidth = myViewWidth + screenWidth
Create a subview, let's call it widthView
let widthView = UIView(frame: CGFloat(x: 0, y: 0, width: scrollContentWidth, height: myViewHeight))
myScrollView.addSubview(widthView)
let leadingEdgeConstraint = NSLayoutConstraint(item: widthView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: myScrollView, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 0)
myScrollView.addConstraint(leadingEdgeConstraint)
let trailingEdgeConstraint = NSLayoutConstraint(item: widthView, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: myScrollView, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: 0)
myScrollView.addConstraint(trailingEdgeConstraint)
let widthContainerConstraint = NSLayoutConstraint(item: widthView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: scrollContentWidth)
myScrollView.addConstraint(widthContainerConstraint)
Now add your myView to that view:
widthView.addSubview(myView)
myView.translatesAutoresizingMaskIntoConstraints = false
let horizontalConstraint = NSLayoutConstraint(item: myView , attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: widthView , attribute: NSLayoutAttribute.Right, multiplier: 1, constant: 0)
widthView.addConstraint(horizontalConstraint)
let heightConstraint = NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: myViewHeight)
widthView.addConstraint(heightConstraint)
let widthConstraint = NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: myViewWidth)
widthView.addConstraint(widthConstraint)
Thanks to informations provided by #Tim I finally managed this without using another Subview :
Solution :
// Create a view
myView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: self.myScrollView.frame.height))
myView.backgroundColor = UIColor.redColor()
self.myScrollView.addSubview(myView)
// constraints
myView.translatesAutoresizingMaskIntoConstraints = false
let trailingSpaceConstraint = NSLayoutConstraint(item: self.myScrollView, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: myView, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: 0)
myScrollView.addConstraint(trailingSpaceConstraint)
let screenWidth = self.view.frame.width
let leadingSpaceConstraint = NSLayoutConstraint(item: self.myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: self.myScrollView, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: screenWidth - 15)
myScrollView.addConstraint(leadingSpaceConstraint)
let widthConstraint = NSLayoutConstraint(item: self.myView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 100)
myScrollView.addConstraint(widthConstraint)
let bottomConstraint = NSLayoutConstraint(item: self.myScrollView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: self.myView, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0)
myScrollView.addConstraint(bottomConstraint)
let topConstraint = NSLayoutConstraint(item: self.myView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.myScrollView, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)
myScrollView.addConstraint(topConstraint)
let heightConstraint = NSLayoutConstraint(item: self.myView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: self.myScrollView, attribute: NSLayoutAttribute.Height, multiplier: 1, constant: 0)
myScrollView.addConstraint(heightConstraint)