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.
Related
I'm trying to implement scrollview using latest xcode.
I have content that reaches 'out of bounds' and when I run the simulator, I'm unable to scroll down to see the rest of my content.
My hierarchy / constraints are as follows..
Are there constraints you need to have on the subviews within the 'contentViiew' ? I don't have additional code in my view controller that manipulates the scrollview.
using Xcode -v 11 & Swift -v 5 <- if this makes a difference
Please clear all constraints on contentView and proceed as follows. You need the following constraints for a vertically scrolling scrollView:
1) Constraint your ContentView to have zero distance from all over sides of scrollView.
2) Equal height and width constraint to scrollView. The height constraint to have lower priority (say 400).
The only constraint for subviews is that they all have constraints set relative to view just above them. Also, the bottom subview should have a bottom constraint for scrollView to scroll.
What I mean by this is that all UIViews should have relative vertical constraints. for example, if going from top to bottom, you have three views - A->B->C, then following constraints are required -
1) top to A
2) A to B
3) B to C
and most importantly
4) C to bottom.
If you get an error in interface builder, you can use ">=" instead of "=" constraint for the #4. I hope that helps.
Add a dummy view(UIView) inside a scroll view with zero width. Set constraint of this view like this.
My dummyView Top constraint = scroll view top constraint
My dummyView bottom constraint = scrollView Bottom Constraint
My dummyView leading Constraint = scrollView Leading Constraint
My dummyView Height constraint = give height according to your need (eg 1500)
My dummyView width constraint = 0
Now whenever you want to change height of scroll view just change height of dummy view.
I am adding UIScrollView in storyboard with all sides(trailing,leading,top,bottom) constraints. I have added a contentView inside a UIScrollView added constraints all sides(trailing,leading,top,bottom) and Equal width and Heights to SuperView(not scrollView) and changed height constraint priority to 250.
I have kept 3 views insdie content view for all views I have mentioned height and 3 sides(except bottom) but for last view I have kept all four sides and height.
But why i am not able to scroll till last view bottom.
]2
You give the contentView equal height constraint to main view ( Remove it )
While you should hook subviews of it so the scrollView will scroll according to the current content
Hey #santhosh I think you set a Equal height with SuperView is wrong
1. Remove ComentView Height constrains
2. set all(Three view) height and all constrains trailing,leading,top,bottom
Automatically remove(scrollview) constrains error.
I'm trying to build UI similar to that of ios photo gallery : Navigation view controller with a scrollview occupying 80% height and 100% width of the parent's view and the collection view controller occupying the rest of the height and 100% width. So here's how it looks like :
The blue area is scrollview and its content view. The bottom part is a collection view which suppose to behave like a carousel. You can see the constraints that I have set in the following screenshot :
:
I want to set the scrollview height so that it only occupies 80% of the parent view estate and the collection view occupies the rest. However, I can't seem to resolve scrollview constraint issues such as autolayout not able to resolve height/y position of scrollview. As you can see in the above pic, I tried setting the height of the scrollview to 50% of the parent view but the autolayout still complains about not being able to resolve height. If I let interface builder resolve the issue, it just adds spacing to the content view inside scrollview and pushes it down as a result. You can see that in the following screenshots.
Your view heirarchy is correctly setup so thats quite nice and you are on the right track of what constraints to add. I'm going to write all the constraints starting from step 1.
To your UIScrollView add a top, leading and trailing constraint to the superView. Also add a equal height constraint between your UIScrollView and the superView and set the multiplier to 0.8.
Now add your UICollectionView below the UIScrollView and give it a leading, trailing and bottom to the superView. Also add a vertical spacing between the UICollectionView and UIScrollView.
Now add for the contentView inside the UIScrollView. Add a leading, top, bottom and trailing for the contentView to UIScrollView. As soon as you do this, the constraints will break and Xcode will complain. Now what you need to do more is add a equal height and width constraint between the UIScrollView and contentView. Set the priority of this equal height constraint (assuming you want vertical scroll) to something like 250, so that it breaks when the content inside the UIScrollView becomes too large to be displayed completely.
Now as far as that extra spacing issue is concerned. What you need to do is, select the UIViewController that has your UIScrollVIew and then select the attributes inspector for this UIViewController and uncheck the adjust scroll view insets option. For a screenshot, check this.
As i see from above do the following.
Add leading, trailing and top constraint to scrollview.
Add height constraint i.e drag from scrollview to superview and add equal width, in equal width constraint change the multiple factor to 0.8.
Add leading trailing, bottom constraint to collection view with respect to superview and vertical space constraint with respect to scrollview.
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.