I've been trying to create a UIScrollView for user registry but with no success. I'm using auto layout and all of the fields that go inside the scroll view are static. Because of the usual ambiguous height issue, I've added a UIView inside the scroll view, set the constraints to the margins of the scroll view and centered aligned it. After that I added all of the fields inside that Content View, in the storyboard.
The content fields have their constraints setup as you would expect, but when I get to the lowest field and set the bottom constraint to the bottom of the Content View then everything breaks.
I'm asked by Xcode to set the priority of some views, and when I do as is says, the Content View size stays the same and the views are shrunken.
I tried not to put the last bottom constraint and resize the Content View by code but the height is not resized as is should.
I'm looking for a good solution to do this in storyboards and auto layout.
Update: I added a bottom constraint with a low priority, but the content scroll view is not expanding to show all of the fields.
Add&Set ScrollView(UIScrollView)
Add&Set ContentView(UIView) with subviews
! Set ContentView Width equal to View Width
Set all subviews constraints
View1 should be tied to the top of the ContentView
View4 should be tied to the bottom of the ContentView
All SubView (View1, View2, View3, View4 ...) must have a height and distance between each other
P.s. In your case, if iOS > 9.0 you can replace ContentView with UIStackView
You are using auto layout so the size of the content view is determined by constraints. Follow the below steps to provide proper constraints:
Drag the Scroll View inside main view and provide constraints Top, Bottom, Leading and Trailing in align with Super View (Main View) as
per screenshot.
Take View which will contain your content and drag inside Scroll View. and provide the constraints Center X, Center Y, Top, Bottom,
Leading and Trailing in align with Scroll View as per screenshot
Put all the element inside content view which is a subview of scroll view and provide Top constraint relative to the element above
it, to make equal space between the elements (eg. label, button etc.)
(Make sure you provide required constraint for X-position)
Last element is "Register Account" button make sure you provide the Top Constraint relative to country and Bottom constraint relative to
superview (content view) and change the priority for Top or Bottom
constraint as per screenshot, otherwise it gives error.
Related
In my storyboard, I have a parent UIScrollView in which I have a UIView of height about 2000px.
I have designed the whole view & placed an another UIView at bottom of parent scroll view so that it will be fixed in the UI. But at the specific point, I need to place that UIView(i.e.fixed) to get scrolled. Like after I scroll a UILabel, I want to scroll that UIView below that & get disappeared from the bottom.
I know its hard to explain but I am stuck at it for so long.
P.S. I'm using AutoLayout.
In this case it is probably best to have the view outside the scroll view but connect constraints to the inner view as well. You use priorities to control those constraints.
In your case you would decrease your bottom constraint priority (to 500 for instance). And you would add a constraint like outsideView.top <= insideView.bottom. So connect the outside view to one of the views inside the scroll view and create the relation be smaller (or greater if the 2 items are reversed) or equal to that view point.
To create a demo of this start a new project and open Main.storyboard:
Add a scroll view with constraints to leading, trailing, top, bottom
Add a blank UIView (now called innerView) inside the scroll view and add leading, trailing, top, bottom constraints
Add a height constraint to innerView to 2000
Add an equal width constraint between innerView and your scroll view
Set bottom constraint between innerView and scroll view to 100
Set a distinct color to innerView to see the effect
All other constraints should be set to 0
Add another UIView on the top level (now called outerView)
Pin outer view to leading, trailing and bottom. Also add a height constraint to 50
Set a distinct color to outerView to see the effect.
By now you should have a scrollable scroll view and a fixed view at the bottom if you run the app.
Now connect outerView with innerView and select "vertical spacing"
Double click the newly created constraint and modify it:
(If needed) Reverse first and second item so that the outer view is first item
Change relation to "less then or equal"
(If needed) select outerView.top
(If needed) select innerView.bottom
Set constant to zero
Select outerView and find bottom constraint to safe area (or superview) and set its priority to 500.
Now run the app. If all is correct your fixed view will be fixed until you scroll down far enough. After 2000px is visible the fixed view will be scrolling with scroll view.
You can naturally pin it to any view in scroll view to get any possible effect you need.
I hope this is descriptive enough. Good luck.
I am trying to layout my detail screen in IB with a tab bar and nav bar. However, there are three issues with the display when the simulator runs:
There is a gap at the top of the screen,
The dynamic label content extends past their container views at the bottom
The scrollbar doesn't reach to the bottom of the content.
Screenshot of simulator displaying the issues described
My question is how should I set my constraints so that the above issues are resolved?
I have a lot of constraints and I'm not sure where I'm going wrong or what would be the best way to present the steps I've taken so far. But here is a screenshot of my constraints and here is a summary of the constraints/steps I've taken so far:
Main view contains just one child: The Scroll View. Scroll view is pinned to top, leading, trailing of main view and bottom is pinned to the Bottom Layout Guide.top,
Scroll view has just 1 child subview ("Content View"). Content View is pinned to top + 64, leading, trailing, bottoms to Super View, and it has equal heights and widths to the Main view.
The content view has an image, Recipe Title subview, and Shadow Background subview. The Shadow Background subview contains another subview with some labels of dynamic height. I have constraints to pin the leading and trailing sides of these containers to the superview. And I have top, bottom, leading, trailing constraints to pin these subviews to the superview and/or eachother so that there is a chain from top to bottom.
The Shadow Background View contains the labels of dynamic height. The labels also have pin constraints of top, leading, trailing and bottom with the exception of the last label which does not have the bottom constraint.
I do not have any code that updates the layout-- everything so far is in the IB.
Any help is GREATLY appreciated!
Hallelujah! After spending a full frustrating week, I've finally found the magical formula in IB for laying out a scroll view + navbar + tab bar + dynamic label height.
My original problems were caused by the following mistakes:
Adjust Scroll View Insets should have been set to false
Content View Top and Bottom pins were incorrect
Missing some heights on some of the subviews
Last subview wasn't pinned correctly on the bottom
Maybe not all these steps are required and maybe this isn't the most perfect solution, but this is what worked for me. Here is a diagram of the solution for those that prefer pictures.
Main View -> Attributes Inspector -> Uncheck the Adjust Scroll View Insets checkbox.
Add Scroll View. This is the only child of the Main View. Pin Top, Leading, Trailing Space to the Main View. Pin the Bottom to the Bottom Layout Guide.
Add one subview (name it "Content View"). This is the only child of the Scroll View. Pin Top, Leading, Trailing Space to Scroll View. Pin Bottom to Scroll view with a constant of -49 to account for the tab bar. Also set its Height and Width to be equal to the Main View.
Add a child subview to the Content View. Top is pinned to Superview with a constant of 62 to account for the Nav Bar. Leading and Trailing is pinned to the Superview. The view also needs a Height-- give it either a fixed value or a minimum value if it is dynamic content (ex: Height >- 20). You may also need to give the Height constraints a lower priority such as 250.
Continue adding sibling subviews as needed. Pin the tops to the previous sibling subview. Pin the Leading and Trailing to the Superview. The last sibling subview should be pinned to the Superview. Each subview needs a height. There needs to be one continuous chain of constraints (Top & Bottom pins, Height) from the top subview through to the bottom in order to avoid that "Scroll View has ambiguous scrollable content height" warning and have the scroll work correctly.
Do a happy dance.
Hope this helps someone else.
Make the content view's top constraint have a constant of 0, not 64. For the label extending beyond the bottom of the container view, you'll have to post more information about the layout for us to help.
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 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)
I have a UIScrollView added to my ViewController. And a View on top of that Scrollview. I have done the following:
Placed scroll view inside my original View and set top, left, right, and bottom constraints. Unchecking Constrain to margins.
Added a UIView within the scrollView (to hold my labels and such) and added the top, left, right, and bottom constraints, constrain to margins unchecked. And set equal widths to the original View
I then add an image view and three labels inside the view placed within the scroll view. And add top, left, right, bottom, and height constraints for them.
The scroll view works and my view does scroll and my labels and image view are centered but everything is very wide.
I am wondering how I make it so the View is not wide and I cannot scroll horizontally, only vertically.
Add an equal-widths constraint between the view inside the scroll view, and the root-level view of the view controller.
I just recently figured this out. Try doing this:
Make a scroll view
Put all of your labels and buttons into a stack view (If you don't know about stack views, check this out: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIStackView_Class_Reference/
Constrain the stack view's width and make sure the Allignment and Distribution are set to fill
Put the Stack View inside of the scroll view
Constrain the Scroll view to your hearts desire
Putting the labels and what you want in the scroll view should help with the width boundaries. Here's a picture of my successful scroll view. Hope this helps :)
In short, the contentsize is no effect while you use autolayout.
if you want you scrollview can scroll, uou should add a container inside scrollview and add origin subviews to the container.
For example, use snapkit (maybe some typos here):
you have a scrollview.set it's equal self.view's frame by autolayout
[import]then you add a containerView as scrollview's subview. set contraints:
make.edges.equalTo(scrollview) // mean its frame equal to scrollview
make.width.equalTo(self.view) // set width equal to self.view
make.height.equalTo(yourheight).priorityLow() // the actual height,if no changes,you can ingore .priorityLow()
add your sunviews to containerView,add the contraints must set to containerView,can't set to scrollview's.forexample,:
containerView.addSubView(myview)
myview.snp_makeConstraints { (make) -> Void in
make.left.equalTo(self.containerView)
make.top.equalTo(self.containerView)
make.right.equalTo(self.containerView)
make.height.equalTo(267)
}
Read this official doc -
Technical Note TN2154 UIScrollView And Autolayout.