I'm trying to add constraint in Storyboard to an UIImageView to it's superview, equal widths or heights but it's disabled.
I tried selecting both the view and the superview, then the add constraints button at the bottom right (mentioned constraints appear disabled), I tried dragging from view to the superview (mentioned constraints aren't listed).
I tried removing all the constrants related to my view. Didn't make a difference.
I'm using a xib, of a custom view. The parent view is also the root view. XCode 6.2 beta. Using size class Any/Any.
Any idea? Thanks.
For making UIView height/Width equals to super View.
Here's what you need to do.
You can set leading,top,tailing and bottom constraint by right clicking to View and select superview.
After setting Top and bottom constraints as i've set in previous image. You need to update constraints to '0' as it might have top and leading space not equal to '0'. You can select those constraints and changes constant to '0'.
You can also set constraints from pin to View as i've set for leading and tailing you can also set top and bottom option in similar way.
EDIT:
If you want to set width and height equally then you need to select both the view and set it's equal height and equal width. As I've set them in below image.
Result:
Below two images shows how you can changes width/ height using multiplier as you need to set constant to 0.9. as from storyboard or xib you cannot set constant in float. So you need to set multiplier.
First Image I've set multiplier in ratio.
Second Image I've set multiplier to 0.9
If you still face any queries please let me know. Hope this will help you solve your problem.
Don't give the inner view (UIImageview) any width or height
Add top margin (with superview) with 0
Add bottom margin (with superview) with 0
Add left margin (with superview) with -16
Add right margin (with superview) with -16
Well, I ended adding a parent view in between. This parent is constained to the top view - left, right, top, bottom: 0, and then I can set my inner view to equals width and hight to the parent (the reason I want to do that is to make proportional size - set constant to e.g. 0.9).
No idea why it's not possible to do this directly with the root view.
Related
So I'm just trying to wrap my head around Auto Layout; I understand how to use constraints, just not how to apply them appropriately. In the picture below I had set no constraints and simply want this simple design to resize correctly on all size classes (Horizontally and Vertically).
http://tinypic.com/r/2ymxbop/9
What constraints would I need to put in to have these squares resize appropriately on all screens (horizontal/vertical) and can you do this in the ( W:Any H:Any ) size class or do you have to set constraints for each individual size class?
Thanks!
One size class is all you need in this case.
Set a constraint for each of the 4 gaps between the rects (i.e. the space between the top 2, between the top-left and bottom-left, ...).
Set a constraint for each rect to its 2 closest outer edges.
Now you've set four constraints for each rect - and that's all you need!
For that case: follow the steps
1.Add four uiview to screen, two top and two bottom.
2.In your case the view not touching to bottom layout guide,so you have to give fixed height.
Start the add constraints to views.
All views are correct width and height.
3.So take first view from left top,give leading space ,top space and adjecent spacing to right top view. And select the pin button from the canvas below right side option availabe, select height ,give how much height you need.
4.Now select right top view ,give constraint to top layout guide and trailing space.and also same height what you selected before for view one.
5.Now view three ,left bottom view , give leading ,spacing to top view and right spacing to fourth view and select same height .
6.Now fourth view, give spacing to top view ,trailing to container and select height.
Almost completed.
7.Select all views at once ,give equal withs(option available in pin).
lastly some warning will shows ,do update frames.
How to set topMargin in percentage of superview in autolayout in storyboard?
how does it works relative to second object when multiplier & constant changes of top margin constraint?
Probably would be better to set Vertically in Container and adjust multiplayer on this constraint. If this isn't good enough for your purposes, you can add empty view on the place where dynamic top margin should be and set its height constraint equal to container and adjust multiplier as well.
if u take a one button and connected to top layout margin. there u selected constant 20 and default multiplier 1.
button.top = 1 * top layout guide .bottom +20 this shows when u select that top constraint . if u change that multiplier to any value, it wont effect because top layout guide is 0 , so multiply that value with any value that gives 0.So here it add only constant value.
This was really a question from a long time ago and didn't want to bother you guys, but I had the same situation and I used a weird but workable way to achieve. I hope to leave my records so that people who encounter the same problem later can solve it smoothly.
Create an auxiliary view in your IB as subview
Add constraints to this auxiliary view : top/left/right margin to superview and set constants to zero.
Both select auxiliary view and your superview in IB, then add new constraint makes auxiliary view's height equals to your superview
Change auxiliary view's height constraint's multiplier to the percentage you want, in this example I set 0.28 multiplier to superview's height. Now you have a view with height sets to your desired percentage.
Go to find your target subview, add top margin constraint to this auxiliary view, and set constant to zero.
Finally, if you have some more elegant implementation please discuss below. :)
I have parent view at top of screen let say TOPVIEW in storyboard which contains some fixed height subview
and scrollview following TOPVIEW
Looks Like
UIVIEW
- TOPVIEW (128) FIXED
- SCROLLVIEW
When keyboard appears i want to set top view to 0 that's why i have taken IBOUTLET for same and set to 0 and top view clips bounds to YES
But constraint breaks of subviews of topview (Vertical space between views etc)
My question is how to solve constraints break due to parent view height in subview ,
i know one that we can set priority low for breaking constraint but is there any other way ?
Thanks in advance
Put the top view and the scroll view in a vertical UIStackView. When you want to hide the top view, set topView.hidden = true. The stack view will automatically move the top of the scroll view up so it fills the space where the top view was.
That is happening because you have set fixed height constraint to the TOPVIEW and you are changing that constraint constant value dynamically, so auto layout would have to break the constraint.
If you have set ideal constraints to the TOPView and ScrollView then you would just need to make two or three changes in your constraints as below,
Step 1:
Change the height constraint (128) relation from Equal to Less than or Equal as show in the image below,
Step 2:
If you have set the scrollView constraint correctly as explained in the link here, then you just have to make one change that is change the BottomSpace Constraint Relation from Equal to Greater than or Equal of the component which is at the bottom of scrollView (inside scrollView).
Step 3:
Create an outlet of Height constraint of TopView and toggle its constant value from 128 to 0 and vice versa.
That's it, it should work now as expected.
Hope it helps you.
Update
Alternatively you can also go for other way as explained below,
Step 1:
Change the bottomSpace constraint priority of component inside TOPView at the bottom of TOPView to 999.
Step 2:
Select the Clips Subviews property from attribute inspector as show in the image below,
To prove this, i have done small demonstration app and you can see the result below,
Orange View has TopSpace to SuperView, Leading and TrailingSpace to SuperView and Height constraint.
Blue View has TopSpace, Leading, TrailingSpace and BottomSpace to SuperView i.e OrangeView, BottomSpace constraint has priority of 999. And it has Height constraint.
This will do the trick.
I am new to iOS. I am learning my self. No resource are to clear my problem.
I have two view with 270 X 338. that I have to keep in Horizontally in Viewcontroller. But, when I add some constraints it's not fitting for below 5s. I checked in simulator also in preview option.
When i use autoresizing, also it's not fitting for below 5s screen. Please help me with some idea. I need to do only in storyboard.
Thanks
I tried this tutorial Here but it din't help
This is my preview screen
Edited:
Constraints for Back View;
These steps will help you align two views.
Add top, leading, and height for first and second views.
Add trailing constraint from First view to Second view as 8.
Add Equal Width for First view and SuperView and set its multiplier to 0.49* and constant as 0.
Add Equal width for two views again by selecting two views.
Finally update constraints the view will align for all sizes.
0.49 will leave 8 points as trailing constraint.
Constraints for First View
Constraints for Second View
Edit :
For third step you can do by selecting first view and hold Control button and and move mouse to super view.
The selected view in the below image is the Superview
View 1
View 2
you can do it by adding contraints like this also
Use leading, top and relative height and width constraint that will solve your problem... set relative height and width in view with autolayout from below steps
Set equal height and width with superview.
Go to properties of constraint where you find a property multiplier in which set exact multiplier value which you want or which satisfy your constraint.
This will make height and width of view relative to superview that changes according to superview.
The screen I'm trying to create is very simple. I have two UIViews stacked atop one another. The top UIView, topView, has height of 40px, and the UIView below, botView, takes up the rest of the screen. However, sometimes topView should not appear and I want botView to take up the entirety of the screen.
What I've tried is setting width, leading/trailing space on both views. Then topView gets distance to top layout guide, botView gets distance to bottom layout guide, and then an additional constraint for vertical spacing between topView and botView. But this results in xcode yelling at me that I haven't set a height or y constraint on one of the views. Of course, I can't set a height constraint because I do not want either of them to be fixed height.
I'm sure there must be an elegant constraint solution here that I just can't seem to figure out. Thoughts?
If topView should always be 40px height, then add a constraint for the height of topView.
As for botView, you can keep the current constraint that says its top has to be correlated with the bottom of topView. But add another constraint for bottom view with a priority lower than required that says it should be 0px away from the top of its superview. This way, when you remove topView from the containing view, botView's constraint related to topView will be deleted, and therefore will satisfy the lower priority constraint.
And if you want to push back topView in, recreate the botView to topView distant constraint with required priority.
There are a couple of ways to do this. One option
In IB lay out your views. Then pin top view 0 px from the top, bottom, left, and right. Specify a height constraint of 40 px as well. To easily do this click on your view, then in the lower right hand corner click on the button that looks like | + |. Click on the dotted red lines to specify the constraints. See image:
Do the same for the other view. Don't specify a height for this view because it's height is dependent on the 40 px view for its height. Next find the height constraint for the 40 px view. You can can use the assistant editor to control drag an outlet to you view controller just like you would with a UIButton or any other IB element. When you want to hide your 40 px view set the variables constant property to 0. When you want to show it again set it back to 40.
self.topViewHeightConstraint.constant = 0;
The other option you could go with is to pin the top view 0 px to the top, left and right. Don't provide a bottom constraint but specify the height as 40 px. For the bottom view add add a left, right, and bottom constraint of 0 px. For the top constraint add a constraint of 40 px from the top superview. Again add an outlet for the most recent top constraint and when you want the view to be larger set that constraint to be 0.
An alternative: In IB, add a distance to top layout guide constraint for BOTVIEW (it will be 40...) Then click-drag this constant to the VC to create a NSLayoutConstraint property.see also here
Now, upon the condition that hides topView, you set self.myConstraint.constant = 0; This will force botView to resize to meet the condition of being 0 from the top.
You may have to clear your current constraints to get rid of errors, but this should give the desired behavior.
As for "topView" like Tom Ahh suggests, go ahead and give it a height constraint of 40 and pin it to the top as you're already doing.