How do I create a layout constraint in storyboard that makes the height of my view equal to its origin.x?
I'm using the latest xcode and ios.
Also using swift, but the answer can be in Objective-C.
You can do it with a helper view:
Put an helper view on left, with these constraints:
left = superview left
height: doesn't matter (10 or something so you can debug it)
top: also doesn't matter
Set your main view with left from superview/top/width whatever you want.
Set constraints between these two views:
left of mainView = right of your helper view (horizontal spacing)
height of your main view = width of your helper view
something like this: (the blue is the helper...)
You can't relate a height to a spacing constraint (in IB anyway, I haven't tried it in code). One way that will work in IB is to make the height relative to self.view's width and the origin.x relative to the self.view's trailing (for a view that's the full width of the screen, like a controller's self.view, the value of width and of trailing are the same). So, in this example I made the height 0.2 times the superview's width, and the leading edge of the view be at 0.2 times the superview trailing.
You make the height constraint by selecting the view and the superview, and choosing equal widths. You can then edit that to change it to height for your view, and change the multiplier to what you want.
You make the origin.x constraint by dragging from your view to the left side of the superview, and then editing that to change it to trailing (from leading) for the superview.
Related
I need to center align a view (Inner View) vertically and horizontally in superview (Main View).
Here's the view controller:
I have set the centerX and centerY constraints properly. But Xcode shows error for missing constraints as given here:
This is the current layout. I want to center align Inner View vertically and horizontally in the screen. Or is there any other way to achieve this
You are relying a little too much on center constraints.
Setting centerX and centerY on a subview does not determine the width and height of its superview, which is why you are getting layout errors.
Select your Sign Up View and add Leading and Trailing constraints of Zero - that will give Inner View a width, and then remove the Sign Up View.centerX = centerX constraint.
That should satisfy the X Position requirements.
Next, with your Sign Up View selected, add a Bottom constraint of Zero, and remove the Sign Up View.centerY = centerY constraint...
That should satisfy the Y Position requirements.
The important thing to remember is that you need a complete "chain" of constraints for each axis.
Here's a screen-cap of my constraints. Note that I constrained the Top of Sign Up View to the Top of avocado-signup + 56 (your actual image size is probably different):
I m trying to create attached layout, I have added a superview and four subviews each view is aligned to one of the sides, to achieve the + sign in the middle .
Constraints I have added are: aspect ration to each subview and leading trailing margins, along with this also have added a width constraints to left bottom view.
But obviously this isn't working on smaller screen and everything gets messed up, not sure what exact constraints should i add so that I get the desired result on variable screen sizes.
create a superview with required aspect ration.
Add four subviews and make all equal width and equal height.
Pin each superview like "top, left" "top, right" "bottom, left" ""bottom, right""
Give one sub view with ratio according to superview width like if u want 10 px padding horizontally then give 320:155
And Height of one view according to their width.
Find the sample code made for this.
https://github.com/iTamilan/AutoLayoutPlus
You should use proportional height and width for the views, for eg:
For the Top Left view align Top Left view's top to top of the superview and similarly do this for leading. And now make width proportional to half the width of the super view minus half of the separation between the two views.
In short: Top left view's leading = superview's leading
Top left view's top = superview's top
Top left view's width = superview's width/2 - separation/2
Top left view's height = superview's height/2 - separation/2
Similarly do this for the rest of the views and you will be good to go, and your views will be fine on every device
I wanna create a simple iOS application using autolayout that displays three UIViews. One on the top, one on the left and
the other on the right. The top view should be 50 pixels high and fills the horizontal space completely. The left column should fill 40% of the horizontal space and should fill 100% of the
vertical space. The right column should be 60% of the horizontal space and 100% of the vertical space. Finally in the left UIView wanna add a single button.
Yes, You can.
Add first view at the top, add four constraint, top 0 left 0 right 0 and height 50.
Add second view at bottom of first view, make it top 0 left 0 heigth 100.
Here is the trick, choose first and secound view, then make them equal width.
Choose secound view's width constraint, and change the multiplier to 0.4.
The two existing answers didn't work for me. My answer was built using Xcode version 10.1 (10B61).
The core question is "How Can I Set a View’s Width to be a Percentage in a Storyboard". Answer: the view's width needs to be associated with the superview.
Explanation:
In the Main.storyboard (already containing a View Controller and a View), add a View. I’m going to call it YellowView). And change its containing view name to SuperView.
In the YellowView's Attributes Inspector change the Background to Yellow.
Click on New Constraints and Top = 0, Leading (left) = 0, height = 50
Control Drag from the YellowView to the Superview and let go, in the resulting dialog select "Equal Widths"
Note: YellowView's width becomes the width of the SuperView.
In the Storyboard, Double-click the width constraint we just added and change the Multiplier to 0.25 (Note: Typing .25 will not work - the leading zero is necessary)
Your constraints should be like,
first view - top,leading(left),trailing(right) and fix height
left view - top, left(leading), bottom and equal width with superview with multiplier 0.4 (or width constraint with 0.4 multiplier)
right view - top,right(trailing),bottom and equal width with superview with multiplier 0.6 (or width constraint with 0.6 multiplier)
hope this will help :)
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.
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.