Basically I have one view with some height x
and 4 other views with same height y all these 5 views are vertically one after another with 10 px space
all these views have again some child views which depends on them.
For this scenario stackview is ideal but it support starts from iOS 9 unfortunately I have to support from iOS 6
so basically I fixed all the views with leading,trailing,top,bottom and height constraint...
it works good in iPhone 7s ... but in iphone 4s the view gets overlapped on each other
in iphone se the views are very much congested..
I was always thinking the height will change according to the screen size for iPHone 4s but that didn't happen
How can I work this out ?
There are two ways to solve the problem you are facing.
First:
Instead of giving a fixed height to any of your UIView you can use a proportional height constraint. Select your UIView and control + drag from your UIView to the main superview. Select equal height constraint. Now, double click the height constraint and set the multiplier to 0.15 or any value you seem nice. This will ensure the view thus created is always 0.15 times the entire view's height. Now you can create your other views either proportional to this view following the same steps or to the superview.
Second:
(I prefer this approach as for items as sometimes you need to create forms the above approach might still push elements off the screen).
This will use a UIScrollView. To your main view add a UIScrollView and add a leading, trailing, top and bottom constraint to your superview. Add a UIView to this UIScrollView and give it a leading, trailing, top and bottom as well. Additionally give it a equal height and width constraints to the superview of the UIScrollView with a low priority of like say 250. Now add all your elements inside this UIView however you seem fit. With fixed height, proportional height whatever and happily run it. But ensure you add a bottom of >= a minimum value for your bottom most view.
The screen will automatically become scrollable if the content will go off screen otherwise it won't be scrollable at all.
fixed all the views with leading,trailing,top,bottom and equal height constraint instead of only height(not give fixed height to any view)
Related
I am creating a UIScrollView from xib, in which 3 view are there 2 UIViews and in middle an UIImageView. when I am setting constraints Xcode asked to set Y position constrains. But the problem is Y position constraint is blocking Scrollview to scroll down and automatically adjusting the views which looks ugly in landscape mode.
when I am delete that constraint it ask to fix height of subview. I searched a lot but I am new in autolayout so not understanding many of solutions. any help would be great.
You have to set all the height constraints in the content view.
But you also want the height of the Content to be proportional to the screen size.
To do this assign the height constraint of the imageview [equal|proportional|a-computation-of] to the view containing the UISCrollView.
It seems weird to skip levels of herarchy when assigning constraints between two views whose are not direct ancestor/sibling of each other but within a scrollview (at least) it is perfectly acceptable.
You are basically telling the scrollview that it's content has a known size and at same time setting this content to adapt dinamically to the screen size (if the constraints of the root uiview are set correctly)
UIView1
|---UIScrollView
|---UIView2
|---UIImageView [heightConstr.constant=UIView1.height-UIView2.height-UIView3.height-margins]
|---UIView3
This is the basic idea, to be done programmatically, then you can explore other solutions.
Unfortunately the constraint system in ios pretty much sucks when it's up to more complex equations involving more views for a single constraint.
UIScrollViewcan be tricky when adding constraints. You should always add a subView that will behave as the content view for your UIScrollView and all your subsequent views will go inside this content view.
UIView1
|---UIScrollView
|---UIContentView
|---UIView2
|---UIImageView
Set your UIScrollViewconstraints as you would normally but set your content view to have leading, trailing, top and bottom to the UIScrollView but also add two more constraints which will be equal width and equal height to the viewController.view but will have a low priority (So that whichever direction your content will increase in, that constraint will break and automatically increase the content size of the scroll view by taking in the inferred height of the content view). Now go on and add constraints on all your subview as you normally would. Which i'm assuming would be:
Your topmost view will have top and leading and trailing to its superView and also a fixed height.
Your bottom view will have leading, trailing and bottom to its superView and also a fixed height.
Your UIImageViewwill have a leading, trailing and top to top most view and bottom to the bottom view.
Edit:
Here is the screenshot just in case (To show the view hierarchy with the content view's constraints in the inspector)
When I first learned Autolayout, things where not too bad as you only had 1 width to cope with. I am struggling to get a Scrollview to grow depending on device (width) and its content equally. The scrollview has paging on so a StackView is not possible I believe.
The current issue is the first view grows to the right width (I believe its down to the centerX), however the overall content size of the scrollview is not large enough (iPhone 6) and the secondView is only 320 wide.
I could do this in code but I am sure you don't need to.
I have tried quite a few options like saying greater than on the width
As i understood your question, you want autoresize for views inside scrollview. So, instead of creating width constraint, you should add 'equal width constraint' to your target view:
second step
if scrollview tells you, that it has ambiguous scrollable content, add bottom constraint for it.
Basically, if you need autolayout inside scroll view, you should provide contentView and setup it with trailing, leading, top, bottom contstaint to scroll view:
This trick allow you to add another object inside scrollview and use autolayout easily.
Hope this helps
I am desperatly trying to get to grips with Autolayout and need advice on how best to approach handling the following scenario. I am working with an existing design that I need to lay out appropriately so it will function on any iPhone screen size.
For each screen, I have identified a section of the app that should partially expand/collapse to compensate for the difference in screen height. I have illustrated this in the image below. Primarily, is this the best way to approach the problem?
Assuming this is the best way to approach the problem, how should constraints be added to fix the positioning and heights of views 1,2 & 4, while allowing view 2 and it's content to flex in accordance with the device view height?
I have experimented profusely with constraits and have been unable to achieve the illustrated outcome.
Here is how I would have done it.
All views:
Align the leading and trailing space to the superview
View 1:
Align the top to the superview or top layout guide
Add a fixed height
View 4:
Align the bottom to the superview or bottom layout guide
Add a fixed height
View 3:
Align the bottom to view 4 (using vertical spacing)
Add a fixed height
View 2:
Align the top to view 1
Align the bottom to view 3
If you want the result in your pictures, here is how to do it. You can choose to use wAny|hAny size class.
From top to bottom, set vertical spacing between each adjacent views to be 0.
Set height constraint for view1 and view3 and view4 to be a static value.
Then the height of view2 should vary on different screen sizes.
Looking from your picture, your view1 occupies almost half of the screen space. So my suggestion is to make its height to be proportional, you can set view1 and its superview to be equal width, then modify this equal width constraint's ratio to be 0.5. You can do the same for other views in your picture.
In addition to other answers, with the visual format, it should look like smth like this
V:|[view1(HIGHTV1)][view2][HIGHT3(HIGHTV3)][view4(HIGHTV4)]|
Repalce HIGHTVX with the static sizes
Suppose that I have the following view controller and this is how I want to see it on all iPhone:
If I run it on iPhone 6 it has the following look:
Here you can notice that UITableView not fit the whole screen and UIImageView doesn't placed at the bottom of the screen.
How can I achieve the required behavior via constraints in XCode 6? I thought that I need the following constraints:
Leading space and top space to container margin for UITableView
Bottom space and trailing space to container margin for UIImageView
Vertical Spacing between UITableView and UIImageView
But it doesn't work as expected even after auto-resolve constraints issues:
Thanks in advance.
Ok, a few things here:
Each view needs enough constraints to define it's x and y position, and it's width and height unambiguously. To start with, go back to Interface builder and delete all of your constraints and lay out the view as you would like it to look. You want to have control over every constraint added, don't let IB automatically resolve the issues, as in all likely hood it won't do what you want.
Do you have an image that is the size you want it to be on screen, once you've factored in #2x, #3x etc? If so, then your job will be easier, as the width and height of the image view can be defined by the width and height of the image (ie the image view's intrinsic content size).
In order to use Autolayout effectively, you need to think about your view holistically, and think about how you want your views to behave when the screen size changes, be clear in your head about the behaviour.
To achieve the layout you want, I would do the following:
Constrain the tableview's leading, top and trailing edges to the superview, with a constant value of 0. This means it can get wider and thinner with the device, it will stretch horizontally, but always stick to the top. This has defined the tableview's x and y position, as well as it's width (height still to go, but keep reading...)
Constrain the image view to match the horizontal centre of it's superview (x position defined) and constrain it's bottom edge to the superviews bottom edge (y position defined). If've you've got the right sized asset, then that will take care of the width and height too. If not, you could go ahead give it explicit width and height constraints.
Now we can constrain the tableview's bottom edge to the top of the image view, with a constant of 0 (ie touching). Note we haven't give the table view an explicit height constraint, so as the device screen grows vertically, the table view will stretch vertically.
Autolayout is hard at first. I'd recommended lots of reading to get over the initial hump, really get to know what a constraint is doing, it's limitations, and the way in which the system parses constraints to translate them into frames. This book is really good, and really helped me learn:
http://www.amazon.co.uk/Auto-Layout-Demystified-Mobile-Programming/dp/0321967194
Best of luck
First make sure you have selected the correct size class. The 'Compact Width | Regular Height' size class must be selected in the Interface Builder. Now add the Trailing space,Leading Space, Top space and Bottom space constraints to the table view. For the image view set the view mode to Aspect fit and add the constraints : Align Center Y ,Top space,Bottom space, Leading space, Trailing space and Aspect Ratio .
I have a viewController, which is configured for the iPhone5 screen size. In red rectangle is the view.
To make this view show properly in iPhone4 - I used auto layout. But when I specify constrains such as: leading edge, trailing edge, bottom space and top space (in top space I even made constraint's priority to LOW ) - the view still goes partially down the screen as if my constraints don't work.
BUT if instead of top space constraint I specify view's heigh and delete top space constraint - everything works perfectly.
Does anyone can explain it please? Thank you.
Thats because when you set up the top space constraint it will move the view by the constant you provided. iPhone 4 and iPhone 5 screen height is different but the constant remains the same so obviously it will behave differently. One way to troubleshoot your interfaces is to switching between iPhone4 and iPhone 5 on storyboard device on storyboard (first button from left to right on the bottom right corner of interface builder).
Auto-layout is all about experience in my opinion. I struggled alot with it until i learned. If you want your view to be attached to the bottom of the screen you should set the BOTTOM SPACE to 0 and specify the view's height like you did or adjust constraints for it's subviews so that the height is set dinamically according to the views inside.