I created 2 Button in my superView , Now I want change the #IBOutlet weak var bottomLayOut: NSLayoutConstraint! depend on the user role .
the example is: if the user is a agent role but not a teacher role I want update the NSLayoutConstraint 's second item from Teacher Entry .bottom to AgentEntry button's bottom .
is that posible?
Update :
solve this by turn translatesAutoresizingMaskIntoConstraints to true:
e.g : teacherBtn.translatesAutoresizingMaskIntoConstraints = true
than, we can use both constraints and code to change teacherBtn's frame
Two ways I can think of to do this off the top of my head:
Set up the constraints programmatically. Create a property containing the current constraints on the buttons, and then you can do something along the lines of (disclaimer: written in Chrome, may contain typos, edit as appropriate):
` if let constraints = self.buttonConstraints {
NSLayoutConstraint.deactivate(constraints)
}
let views: [String : UIView] = ["Agent" : self.agentButton, "Teacher" : self.teacherButton]
let newConstraints: [NSLayoutConstraint] = {
switch role {
case .teacherAndAgent:
self.teacherButton.isHidden = false
self.agentButton.isHidden = false
return NSLayoutConstraint.constraints(withVisualFormat: "V:[agent]-[teacher]-|", metrics: nil, views: views)
case .teacherOnly:
// you get the idea
case .agentOnly:
// ditto
}
}()
NSLayoutConstraint.activate(newConstraints)
self.buttonConstraints = newConstraints`
What might be simpler, though, is to use a UIStackView to hold your buttons. On current macOS at least, NSStackView automatically adjusts the layout based on which of its views are hidden; if UIStackView on iOS behaves the same way, it may do a lot of the work for you without having to manually fuss with layout constraints.
Related
scroll view - layout programmatically - swift 3
Dear friends: I hope someone could revise this project and help me before my brain been burned. Thanks in advance.
The task: Horizontal Scroll - Layout an array of 4 images, square of 240 x 240 and 20 of spacing. The constraints for the scroll view set directly in the storyboard, but the images subviews had been added programmatically using Visual Format Language. Content size for scroll suppose done by this constraints.
What I have done: Set the array of images, create de ImageView programmatically and add the array using a for in loop. Create the constraints using the visual format. A way to do this can be found in this article: http://www.apeth.com/iOSBook/ch20.html.
Here the link to the project in GitHub
https://github.com/ricardovaldes/soloScrollEjercicio
Constraints for the ScrollView added directly in the storyboard.
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var myScroll: UIScrollView!
var carsArray = [UIImage]()
var constraints = [NSLayoutConstraint]()
override func viewDidLoad() {
super.viewDidLoad()
carsArray = [#imageLiteral(resourceName: "fasto1"), #imageLiteral(resourceName: "fasto2"), #imageLiteral(resourceName: "fasto3"), #imageLiteral(resourceName: "fasto4")]
var const = [NSLayoutConstraint]()
var views: [String: UIView]
var previous: UIImageView? = nil
for index in 0..<carsArray.count{
let newImageView = UIImageView()
newImageView.image = carsArray[index]
newImageView.translatesAutoresizingMaskIntoConstraints = false
myScroll.addSubview(newImageView)
self.myScroll.setNeedsLayout()
views = ["newImageView": newImageView, "myScroll": myScroll]
if previous == nil{
const.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:|[newImageView(240)]", metrics: nil, views: views))
}
else{
const.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:[previous]-20-[newImageView(240)]", metrics: nil, views: ["newImageView": newImageView, "previous": previous!]))
}
previous = newImageView
const.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "H:[previous]|", metrics: nil, views: ["previous": newImageView]))
const.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: "V:|[newImageView(240)]|", metrics: nil, views: views))
}
NSLayoutConstraint.activate(const)
}
}
Even though I have tried a lot of combinations I have the same error:
2018-04-29 21:24:34.347466-0500 soloScrollEjercicio[12002:1665919] [LayoutConstraints] Unable to simultaneously satisfy constraints.
each loop round, you add a right side pin constraint to scroll view for every new
added imageView, but there is 20 points between each other.
|-previous-20-newOne-| ** second round loop **
-20-newOne'-| ** third round loop **
this breaks imageView width(240) constraint
one way deal with it:
only add right side pin constraint to the last imageView.
scroll view constraint in your main storyboard also has a break.
+-------------------+
| | |
|-scroll view (240)-|
the bottom one with vertical spacing to super view should not be there. it would
break the scroll view height(240), so delete it will be fine.
maybe you should try:
set it's constraint priority to 999, or some other value not equal to
1000
uncheck installed box
delete it
and now, your scroll view should be OK.
p.s. I found your reference book is based on iOS 6? in the year 2018, starts from iOS 10 or iOS 11 may be a better choice.
happy hacking :)
I have a problem that I can't create a view that can collapse it's contents that may be dynamic height , i know it's easy to collapse it with height constant = 0 , but i can't figure out how to make it expand again as the content of that view is dynamic and sub-itmes may be added later
I want that behavior
Your answer has massively overcomplicated a very simple solution.
You should first create your zeroHeightConstraint as a property.
let zeroHeightConstraint: NSLayoutConstraint = dynamicView.heightAnchor.constraint(equalToConstant: 0)
You could do this as an outlet from the storyboard too if you wanted.
Now add your button action...
#IBAction func toggleCollapisbleView() {
if animationRunning { return }
let shouldCollapse = dynamicView.frame.height != 0
animateView(isCollapse: shouldCollapse,
buttonText: shouldCollapse ? "Expand" : "Collapse")
}
private func animateView(isCollapse: Bool, buttonText: String) {
zeroHeightConstraint.isActive = isCollapse
animationRunning = true
UIView.animate(withDuration duration: 1, animations: {
self.view.layoutIfNeeded()
}, completion: { _ in
self.animationRunning = false
self.button.setTitle(buttonText, for: .normal)
})
}
Always avoid using view.tag in your code. It should always be seen as "code smell". There is almost always a much more elegant way of doing what you are trying to do.
Regarding the bottom constraint. You should really be using a UIStackView to layout the contents of the inside of the view here. By doing that you no longer need to iterate the subviews of your contentView you can access the UIStackView directly. And do the same thing there. In fact... a much better way would be to create the bottomConstraint against the view using a priority less than 1000. e.g. 999.
By doing that you don't have to remove or add that constraint at all. When the zeroHeightConstraint is not active it will be there and work. When the zeroHeightConstraint is active it will override the bottom constraint automatically.
I have a lot of views that are created in the storyboard, but I want them to be able to update their constraints dynamically without having to use an IBOutlet each time.
I started by making a custom class for the superview of the view I want to update, and change its subview's bottom constraint like this:
myView.constraints.filter{ $0.firstAnchor is NSLayoutAttribute.bottom }.constant -= 200
'NSLayoutAttribute.bottom' doesn't seem to be the correct way to check the type of the Anchor.
How do I check the type of the constraints I want to change?
Am I correct in updating the constraints in the superview of the view I want to change, not the view itself?
NSLayoutConstraint from iOS7 have a property called identifier, from code or from IB you can set this property.
After that to get the constraint you are looking for is just a matter of searching it in a particular view.
Consider this UIView extension:
func constraint(withIdentifier:String) -> NSLayoutConstraint? {
return constraints.filter{ $0.identifier == withIdentifier }.first
}
As per dahlia_boy's suggestion, I used UIView.animate to achieve this functionality, however it doesn't seem to be permanent:
translatesAutoresizingMaskIntoConstraints = true
UIView.animate(withDuration: 1, animations: {
self.frame.size.height -= 200
})
I'm coding a social network, which can permit to like and comment pictures.
However, I have a problem with that part ...
If I have one (or more) like and one (or more) comment, it's ok:
If I have one (or more) comment but no like, the user interface is not very good ...
I would like to move the button "2 comments" on the left when there is no like. I thought to do that by giving 0 width to the "1 like" button. However, the width it's not all the time the same. If I have 1 like or 12543 likes, the width will be different.
I have no idea about how I could correct this problem.
Do you have any idea please ?
you can create a custom component that will have a view, and two uilabels as a subviews if the view. the first uilabel will contain the number and the second the title ("comments").
the constraints of the uilables should be as follow:
first table leading == view.leading, first label trailing == second label leading, second label.trailing == view.trailing. view.height == "some constant". In this case the width of the view will be according to the labels width.
Now you should add those custom views to your view. In your case it will be two or one custom components, one for the likes and one for the comments.
add those custom view to tmprorary array and do the following code:
var prevLayoutedView : UIView = self
for (index, customView) in custumViewsArr.enumerated()
{
customView.leadingAnchor.constraint(equalTo: prevLayoutedView.leadingAnchor)
if index == custumViewsArr.enumerated.count
{
customView.trailingAnchor.constraint(equalTo: prevLayoutedView.trailing)
}
}
you will need to adjust some constants and compression resistance and hugging priority but this should assist you to solve it
UPDATE:
you can use less generic solution and not using a custom component but just using uilable. and then use the same for loop
first easy solution is to keep single label for both if not clickable
otherwise with two labels,
my constraints for two label is,
1. Constraints for like label:
2. Constraints for comment label
#IBOutlet var cnLeadingToView: NSLayoutConstraint!
#IBOutlet var cnLeadingToLikelbl: NSLayoutConstraint!
assign this outlet in storyboard for leading constraints of comment label then do this
if cntLikes == 0 { // temp variable
//hide the like lable
self.lblLikes.isHidden = true
self.cnLeadingToLikelbl.isActive = false // deactivate the leading constraint with like label
self.cnLeadingToView.isActive = true // activate the leading constraint with view
self.cnLeadingToView.constant = 15 // give leading space constant
}else {
self.lblLikes.isHidden = false
self.cnLeadingToLikelbl.isActive = true
self.cnLeadingToView.isActive = false
}
As #dahiya_boy said, I had to change the like label relationship from equalTo to lessthanequalto.
I put 375 by default and 0 if the is no like. It was that simple.
Thank you very much everybody !
I'd like to create an "adding a new credit card viewController".
We don't want to aggravate users with all of the required fields presented at once.
This action contains several steps.
On each step the view-controller reveals a new subview (which contains one or more textfields) and collapses an old one (the current text field after it's text is validated).
I've created the ViewController on the storyboard. and placed all of its subviews one above the other.
I've created all of the constraints on the storyBoard, each subviews' clips to the above subview etc'.
i.e:
NSMutableArray *constraints = [[NSLayoutConstraint
constraintsWithVisualFormat:
#"V:|[titleView]-[subtitleView]-[amountView]-[cardNumView]-[cardsImagesView]-[mmYYCvvView]-[billingInfoView]-[buttomView]|"
options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom
metrics:nil
views:variableBindings] mutableCopy];
Each of these subviews contain a height constraint.
In each step one of the height constraints are set to zero and another one is changed from zero to the required height.
i.e:
self.hgtCrtMMYYCvv.constant = showFields? 50 : 0;
self.hgtCrtBillingInfo.constant = showFields? 140 : 0;
self.mmYYCvvView.hidden = !showFields;
self.billingInfoView.hidden = !showFields;
I got two issues:
Without calling layoutIfNeeded the initial layout was valid but did not change after changing the height constraints.
Calling layoutIfNeeded did not clip the bottom view to the last visible one - placed it at the bottom of the view as if all the subviews appear at once, but since some are hidden a gap was created.
changing the height constraint of the subviews was applied on the screen but still the gap stayed.
Please advise.
Calling "layoutIfNeeded" did not clip the bottom view to the last visible one - placed it at the bottom of the view as if all the subviews appear at once
Look at your constraints. You have pinned the bottom of the bottom view to the bottom of its superview! So its bottom must appear at the bottom of the superview, since that is what you instructed it to do.
Indeed, I am surprised that your constraints work at all. You have basically overdetermined them. If you give every field a height and pin its top and bottom, for every field, then it will be impossible to satisfy your constraints unless you are very lucky. The height of the superview is fixed, so your constraints would have to add up perfectly to that height.
I'm going to suggest a complete alternative approach, which I think you will find easier. Instead of messing with individual constants, plan what the correct (not overdetermined) constraints would be for each possible situation, and store those constraints in properties. Now when you want to hide/reveal a field, you just remove all the constraints and swap in another set.
This will also solve the layoutIfNeeded problem.
It happens that I have an actual example showing how to do this. (It is written in Swift, but I'm sure you can compensate mentally.) In my example code, we have three rectangles; I then remove one rectangle and close the gap between the remaining two. The preparation of two sets of constraints is tedious but elementary:
let c1 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[v(100)]", options: nil, metrics: nil, views: ["v":v1]) as [NSLayoutConstraint]
let c2 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[v(100)]", options: nil, metrics: nil, views: ["v":v2]) as [NSLayoutConstraint]
let c3 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[v(100)]", options: nil, metrics: nil, views: ["v":v3]) as [NSLayoutConstraint]
let c4 = NSLayoutConstraint.constraintsWithVisualFormat("V:|-(100)-[v(20)]", options: nil, metrics: nil, views: ["v":v1]) as [NSLayoutConstraint]
let c5with = NSLayoutConstraint.constraintsWithVisualFormat("V:[v1]-(20)-[v2(20)]-(20)-[v3(20)]", options: nil, metrics: nil, views: ["v1":v1, "v2":v2, "v3":v3]) as [NSLayoutConstraint]
let c5without = NSLayoutConstraint.constraintsWithVisualFormat("V:[v1]-(20)-[v3(20)]", options: nil, metrics: nil, views: ["v1":v1, "v3":v3]) as [NSLayoutConstraint]
self.constraintsWith.extend(c1)
self.constraintsWith.extend(c2)
self.constraintsWith.extend(c3)
self.constraintsWith.extend(c4)
self.constraintsWith.extend(c5with)
self.constraintsWithout.extend(c1)
self.constraintsWithout.extend(c3)
self.constraintsWithout.extend(c4)
self.constraintsWithout.extend(c5without)
NSLayoutConstraint.activateConstraints(self.constraintsWith)
But the payoff comes when it is time to swap the middle view in or out of the interface: it's trivial. Just remove or insert it, and then remove all constraints and now insert the complete new set of constraints appropriate to the situation, which we have already prepared:
#IBAction func doSwap(sender: AnyObject) {
if self.v2.superview != nil {
self.v2.removeFromSuperview()
NSLayoutConstraint.deactivateConstraints(self.constraintsWith)
NSLayoutConstraint.activateConstraints(self.constraintsWithout)
} else {
self.view.addSubview(v2)
NSLayoutConstraint.deactivateConstraints(self.constraintsWithout)
NSLayoutConstraint.activateConstraints(self.constraintsWith)
}
}
The preparation of the multiple sets of constraints is tedious but can be done by rule, i.e. the constraints can be "machine-generated" in a loop (writing this is left as an exercise for you). Swapping constraints in and out is again according to a simple rule, since only one set will be right for the particular set of fields you wish to show/hide. So once this is set up it will be much simpler and more maintainable than what you are doing now.