I have two UIView with fix size (30, 30), I want the views horizontal center in superview. here is the layout description.
H:[view1(30)]-20-[view2(30)]
V:|-20-[view1(30)]
V:|-20-[view2(30)]
and add a constraint at horizontal
view1.leftMargin = view2.rightMargin
But these constraints not working as my expect.
the runtime warning say that unable to simultaneously not satisfy constraints. why?
I find a solution to center the views, which add two placeholder view in left side ,and right side, but I want to known why my first solution not working , how to known my constraints satisfy ? What did I miss?
view1.left=view2.right and [view1(30)]-20-[view2(30)] is confict.
[view1(30)]-20-[view2(30)] means
view1.right+20=view2.left
view1.height=30,view2.height=30
so apple cannot make constrainsts.
I have tried to solve your problem and come to know that, with VFL, the only possible way for centering view in super view is through spacer views.
As you have defined your view1 and view2 also define two spacer views.
Then just paste this:
V:|-20-[view1(30)]
V:|-20-[view2(30)]
H:|[spacer1][view1(30)]-20-[view2(30)][spacer1(==spacer2)]|
And don't need view1.left = view2.right. Please remove it.
Output attached:
Related
I was trying to add a UISTackview in a scrollview. I believe the UIScrollview setup is right as the following screen has scrolled. Please note that it does not have any stackview, I have added a button with big top constraint so that I can see whether the scrollview works or not.
Next, I added the stackview and just added the top, left, right constraint but not bottom constraint like the following image. However, since there is no bottom constraint, the scrollview does not work.
When I added the bottom constraint, it shows the error like the following image because none of the textfields has height constraints.
If I change the distribution to "Fill Equally". The textfields are taking too much blank spaces depending on the screen size.
How can I use the stackview inside the scrollview. I want to use it as I want some of the views hidden based on conditions and claim the space. Any suggestion would be helpful. Thanks
Your second image is correct - but you need one more constraint.
Add a constraint from the Bottom of the Stack View to the Bottom of View (its superview), but set it to >= 0
A couple of tips...
rename your UI elements... it gets very confusing to refer to elements by default generic names (you have more than one View, for example).
give your objects contrasting background colors during development... makes it much, much easier to see the frames.
I'm new to Auto Layouts and the concept of constraints. I'm currently trying to create a single view app with two buttons:
The buttons must meet the criteria shown in the image above. I can do everything except the two constraints where the buttons have to be a 30 above and 30 below, as it resizes the entire button to the point that one overlaps the other.
Is there any way to achieve this? I'm not doing the constraints programmatically, but rather on the storyboard. Many thanks.
Try put both of them in a view, add constraint between them 60px height, then make the view center of the superview, leading and trailing 20px, optional 50 from top and 150 from bottom, you should get the desired result.
The main issue here is to ensure that after setting alignment constraints both from the center, to select the following option of either the "bottom" or the "top" depending on how you want it:
This ensures that there is no "overlapping" caused.
I am having some major issues with my constraints, all I did was select add missing constraints and it looks fine in my storyboard and on an iPad like so,
But when I run it on iPhone, it looks like this:
What do I need to add to fix this issue...this is what I got so far:
Don't relay only on Add missing constraints , you have to make your edits after applying them
I see some constraints with leading
949,344 and 283+
and this may exceed width of some iphone screens
Simply remove any leading and trailing , and centerX the items with width constraints
also using UIStackView is good for the lower textfields
The easiest way to solve your problem with the constrains in my opinion for this type of layout is to embed your views in to Stack View. With Stack View you can easy center this views in to Screen by adding some costrains to the Stack View. With Stack Views if you need some adjustment you can do it only with few mouse clicks.
Select all your views
Click embed in the Stack View
Delete constrians that you don't need
Adjust alignment, distribution and spacing
Add trailing, leading and heigh constrian
Now it should looks good.
I have view with three button with equal size. Each button take 1/3 part portion of view.
Like this image:
If I remove/hide one button then two button width should increase equally and take 1/2 portion of view. if I remove two button then one button size should be equal size of view.
My question is, how it's possible using the Autolayout.
Best option is using stackView. StackView gives lots of flexibility in adding or removing items. If you wish to use only auto layouts, you can achieve it by connect it's width constraints as IBOutlet and change the values programatically.
Best way to do that is to use UISTACKVIEW.Place a stackview and add 3 buttons.You can give proper layout constraints to the stack view as you need
click on stack view-- select attribute inspector
change distribution--fill equally
spacing--0
Then after that if you hide any button,other buttons will be automatically adjusted in width
Other Possible sol to this problem is Adding or removing constraints during runtime is a heavyweight operation that can affect performance. However, there is a simpler alternative.
For the view you wish to hide, set up a width constraint. Constrain the other views with a leading horizontal gap to that view.
To hide, update the .constant of the width constraint to 0.f. The other views will automatically move left to assume position. and for equal width pervoid multiplier to width..
You have a few options:
UIStackView which was made exactly for this.
UICollectionView similar to UIStackView in a certain way, but not really meant for this. However, it does the job nicely and it's easy to implement. Sometimes easier than UIStackView.
NSLayoutConstraint by using multiple constraints with different priority so that you can activate/deactivate them as needed and get the desired result. This approach is a bit more complex by it gives you the highest degree of control and flexibility over the views in your hierarchy.
The best way to achieve what you are looking for is, like others have already mentioned, to use a UIStackView.
When the isHidden property of a UIView inside a stack view is set to true, that stack view will hide the view and take care of the layout, so you will only need to set the correct constraints for your stack view.
i want something who seems simple at first glance, but i can't figure out how to make it nicely from IB.
I want something simple, let's say i have two view into one parent (a view container that hold the two children). What i want is that they are each connected to vertical space at 0 px (one to his top the other to the bottom of the other). So that when one of them change his size the other occupy the remainder size, and so there're will still be connected at 0 pixel each other.
I've put two screenshoots of what i want.
I've tried lot and lot, and nothing is working like i'm expecting.
What is strange that even if i put the priority at the vertical space, the other constraints take priority, and i just get a warning from XCode that my verticalSpace constraint is wrong.
Could someone help me ? I didn't find a specific tutorial on this kind of view managements.
Thanks
* EDIT *
Ok i figured out:
I finally read the entire tutorial of Ray as suggested, and it helped me a lot (to my defense, i have read before the IOS official documentation about constraints, and it has confuse me more than helped me). To me, what was hard to understand is that now you can't change UIView by frame but now by constraint. When I understood this, it was really easy to make the changes.
By the way i tried the #Handsomeguy's response, and it worked like a charm.
I think you'll need at least one height constraint (with IBOutlet to your view controller) on one of your views... when you change its constant value, the other view should automatically change. You can try on storyboard first, and then write down the logic. But without an height constraint on one of them I don't think it will ever work.
I was able to do it by setting constraints in interface builder:
vertical spacing: top layout guide -> yellow
vertical spacing: yellow -> red
vertical spacing: red -> bottom layout guide
height: yellow
Set an outlet to the height constraint, then to change the height of the yellow view just use _height.constant = NEW_HEIGHT
You can probably omit the height constraint if the top view reports it's intrinsic content height appropriately.
Use autolayout. You need the following constraints:
both views pinned to left and right edge of containerView
redView top pinned to containerView top
yellowView top pinned to redView bottom
yellowView bottom pinned to containerView bottom
height constraint on **either* redView **or** yellowView!
This is very easy using this category:
https://github.com/jrturton/UIView-Autolayout
UPDATE
I just noticed you said you wanted to do it in IB. You can use the same principle here, but I find it is much more convenient (and also easier to read later) if you use the category mentioned. There will be very few lines of code, and the code will clearly show the intent.
** UPDATE 2**
An explicit height constraint may not be necessary if the intrinsic size on one view is changed. This depends on what kind of views the yellow and green views are.
Without auto layout it would be as easy as putting an anchor-bottom on the yellow view, and putting an anchor-top on the red one. Now, when you change the parent view, the views would resize 50/50.