I have constraints set in interfacebuilder that have some UIViews near the bottom of the screen. They have constraints set to have their bottom, leading and trailing edge attached to superview.
However when I view the xib within a 3.5 simulator the views are off screen(below) instead of maintaining that explicity set distance from the bottom of the 'superview'
This view is made in a xib, and then I load the xib into a view controller in code.
So my question is how do I get the bottom and top layouts to apply to these buttons inside this seperate xib I have? The buttons seem to be hard coded to layout depending on the design size of iphone 5.
Thanks
Your problem isn't the buttons, but the parent view which contains them. Make sure its constraints are set to adjust to the bottom of the screen.
Related
I am using autolayout in Xcode and am creating a fairly tall (1300px) ViewController with a uiscrollview to navigate up and down. I made the viewcontroller freeform so its dimensions are [375,1300]. I then incorporated the scrollview, added the content view as well as all the subviews & constrained everything, leaving no constraint errors. At runtime there are no errors, but everything is all smushed into the normal screen size when I intended for it to be very tall (~1300px) and scrollable. Any clue as to what I am doing wrong?
Below is a diagram showing the issue where:
The Outer Black Blox is the ViewController's view
The Inner Black Boxes are subviews
and The Blue Box is what is displayed on the screen
Yes, your correct #Ryan Cocuzzo. I think you need to set sub view priority from 1000 to 250. See below screen shots.
1) Select height constraint of the subview
2)Then go to show to size inspector
3) Now change the priority constraint from 1000 to 250.
4)Finally you get like this
Make sure the following are true:
The 4 content views are subviews of the UIScrollView, not your view controller.
The autolayout constraints on the 4 content views must reference the UIScrollView only, not the view controller's view.
The 4th box cannot have a bottom constraint.
It looks like the 4th box has a constraint to make it's bottom align with the bottom of the view controller's view. This would force the other views to smush up together. The 4th box also cannot have a bottom constraint so that the scrollview can resize itself to encompass it's subviews.
I want to achieve consistent views across different screens. My layout constraints works on small screens perfectly but it scrambles on large screens.
I have made a view(Red Border indicating that view)and pin it in to the main super view. Then I have made sub views and put it inside that view. I have pinned the the top bottom trailing and leading edge of the layout which contains button of the it's parent view (Red Border indicating that view). The view containing button is looking like this in small screen (iPhone 5)
while it's looking in big screens like this (iPhone 6 and above)
I want this layout to have the same relative height in all the screens like the other views. How can I achieve this?
I guess you can use UIView that contains a button inside and set bottom,lead,trailing,top constraints for the UIView. Then you can set height constraint of that UIView and set multiplier values to have relative height to its superView(=Red box). Finally, you can set constraints for your button inside the UIView whatever you want. If you know how to use StackView, I recommend you to use it because it is easy and simple solution. Here is very good tutorial about StackView.
If height is constant for subview except that button view the layout will be like what you mentioned in the first image .If you kept height as constant for that button view the problem will be solved
I tried to create a custom freefrom view with interface builder.
I have a UIView which is containing a UIImageView and UILabel.
I set the constraints to adjusting the Label according to the Image etc and a margin to the superview.
Now I want the superview to exactly fit the subviews. But when I press Editor -> Size To Fit Content, the superview is not resized completely and the constrains are in conflict. What there appears is a implicit constraint ("iPhone Portrait Screen Height"), which can not be altered/deleted. See Screenshot below:
While not ideal, depending on how your XIB is structured and how you are referencing the view, you could create a "scratch pad" view and place your custom view inside of that just to see how everything will layout. That is if you're setting the view to an outlet defined in the XIB's File Owner, you can just connect it to the view you've created inside the "scratch pad".
For example, I created a container view with a square and a switch inside. The top example complains of conflicting constraints and doesn't layout correctly, while the bottom example shows the same thing centered in a throw-away view. Again, not ideal, but it's working for me.
Edit: I just realized that some size class constraints may be lost once the "scratch pad" view is discarded so that is another wrinkle to consider. Still looking into this.
Just to make it simple forget the label for the time being. You have already added the width and height constraint of the image view, now instead of using sizetofit content, try adding leading, trailing, top and bottom constraints between the image view and it's parent view. With that your parent view should fit the image view.
The same technique (constraints to parent view) can be used to get it work with the image view and label together.
I noticed that when I physically dragged the superview's width and height to satisfy the constraints, the red constraint errors went away along with the "iPhone Portrait Screen Width" constraint. In other words, my constraints dictated that my subview be bottom aligned with its super view. If I dragged the superview's bottom edge up to align flush with the subview, the errors went away. Still seems buggy and unintuitive.
I'm setting constraints in IB like
But when i run the app on iPhone4 it shows
Why last three buttons not shown properly on iPhone4 screen?is there any mistake in my constraints ?
Edit:- This is my view hierarchy:-
UITabbarControlle -> UINavigationController -> UIViewController and tab bar controller is rootviewcontroller.
Edit:- FYI there is no effect of any constraints on the screen(basically autolayout not working for me).
You have designed the buttons on 4 inch and you don't have enough space on 3.5 for all of them.
One way to do this is to place scroll view over your view controller's view and add the buttons on the scroll view.You have to add constraint on the scroll view , to be fixed on each side (without width/height).
After that grab all the buttons and add constrains on each side and sizes , so they will be fixed
If you , on other hand, have enough space for all the buttons to fit in 3.5' without any top/bottom margins you can add the button in UIView (instead of scroll view). Place the buttons in the view and set fixed width/height on that view.Center the view and it will keep his size (with the buttons inside on both screen sizes)
There is an issue in your constraints, you have to update them.
You can do as is shown on the image bellow:
Once done, you will see, the Orange lines under your buttons turned to blue.
I wish that helps you!
Your view is probably within a UIScrollView which will extend your total contentheight. It is not related to the absolute height of your viewport.
However, what do you expect? Your 3 buttons would overlay to the next buttons, if your theoretical approach would work.
What you need to to do is to wire all buttons to each other and give the view a top and bottom constraint to the top and bottom layout. You probably need to adjust your view to be on full screen and not to extend to the bottom.
Hint: as long as something is 'yellow' you need to add further constraints.
I am attempting to layout a screen design using constraints (auto-layout) from interface builder and hope to avoid coding constraints, but I would accept an answer for either case I guess.
I have two subviews in a contained in a top level view. I want to fix vertical distance of the first subview to the top of the screen (I was able to accomplish that - common use case for a vertical space constraint). I want the second subview to float (vertically) in the center of the distance between the bottom of first subview and the bottom of the screen. The idea is that the design responds somewhat to iPhone 3.5" vs 4" dimensions.
I am having trouble defining a constraint or set of constraints that would accomplish this.
I have tried setting inequalities on the vertical spacing constraints between the second subview and the top of it's neighbor (the first subview) and the bottom of the superview, and playing with the priorities of those constraints.
An idea that was suggested in a few other related posts on SO is to use a container that is pinned to the bottom of the screen, as well as the pinned to the bottom edge of the first subview, and then center my second subview in the container. I was hoping to avoid complicating the view hierarchy if possible, but maybe that isn't easily avoided.
Any thoughts or suggestions?
UPDATE
This answer describes how to do this in Xcode 6.0 (and probably works in Xcode 5.0 and 5.1).
ORIGINAL
If you want to do this with auto layout, you have to add at least one spacer view. It doesn't have to be the superview of the vertically-centered view (or any other view), so it has a pretty minor effect on your view hierarchy.
I recommend not trying to set up constraints in Interface Builder in Xcode 4.6.3. It's just too painful. But if you really must, this is doable.
Create a spacer (a plain old UIView) from the bottom edge of the top-hugging view to the bottom edge of superview. Set it to hidden. Give it constraints to the top-hugging view and the left and bottom edges of the root view, and pin its width. My spacer width is 10:
Add your middle view (here, a button). Give it a “Horizontal Center in Container” constraint. Then select both the middle view and the spacer view and give them a “Vertical Centers” constraint:
Note that if you drop the middle view when IB is showing the correct guidelines, it will set these constraints for you.
You can test by enabling resizing for descendents (but not siblings & ancestors) and resizing the root view in IB. The middle view will remain centered between the top-hugging view and the bottom of the superview: