I placed TableView on a middle of a layout with constraints to stay aligned with top/bottom guide bars and left/right sides.
When I insert prototype cell it doesn't go to the top and it's the same at run time. Seems like TableView holds space on top for something?
How do I make first cell to appear on top?
In your storyboard, adjust scroll view insets of your view controller is selected by default.
The best way to solve this problem is to add top and bottom constrains between the table view and its super view, instead of the layout guide, because the view controller will adjust the insects of the table view automatically.
By default, iOS adds a content inset on the UITableView. There are two solutions. You could either set the layout constraints to the top and bottom of the view instead of the top and bottom layout guides, or you could click on the view controller and in the attributes inspector, disable Extend Edges for Under Top Bars and Under Bottom Bars.
Related
I have a save button that is supposed to be located right above the tab bar and right under the table view, but it does not appear in the view when I switch to a smaller screen. There is auto layout on all the elements, and the button is centered horizontally, equal width to the view, and has vertical spacing between the table view and bottom. Any ideas on how to make sure the save button always appears in the position stated above? Auto layout was done through storyboard not code.
set height of UIButton, and do not set height of UITableView.
I've added a TableView to my ViewController.
I have set the constraints like this:
Yet when i run the project the top of the firstcell(like 40px) is behind the NavigationBar:
What am i doing wrong here? Why is the TableView behind the navigationControllerBar?
Do not just set the constraint to 50, that's wrong on so many levels.
Constrain table view's top to top layout guide of view controller. This is gonna handle rotations for you as well. In landscape the navigation bar might have smaller height, this accounts for it as well. If you set it to 50 it's probably gonna look ridiculous.
Or pin the table view to the top of the superview as you do and set the contentInset property to the height of bars (this is useful if you wanna have translucent navigation bar and see the cells under navigation bar while you scroll). You can do this in code or storyboard:
You're not accounting for the navigation bar using the constraints. Set the top constraint to 50.
Since the scene in the Interface builder does not have a navigation bar - the constraints are not considering it and y (top) is set to 0 on the view, which does not have a navigation bar.
Either set the top constraint to 50 or put a bar in the view and set the top constraint to it.
I'm experiencing some trouble managing a scroll view embed inside a navigation view controller. I'm using Auto Layout and I'll try to explain the problem the best I can.
I embed a scroll view in the controller's main view and pinned the top, left, bottom and right borders to main view's borders.
I embed a standard UIView inside the scroll view and gave it a fixed height of 800 points. This should act as a container for all my controls (let's name it content view). Then again I pinned its top, left, bottom and right borders to the scroll view's borders. Because the bottom space constraint of scroll view's descendant view was negative, I adjusted it bringing it back to 0.
For the width, I CTRL-dragged from the content view to the main view and added a Equal widths constraint.
Finally, I added an image view and placed it at the top center of my content view adding some further trivial constraint.
The storyboard for the situation I've just depicted is shown above (in the document outline you should see all the constraints I've defined).
My scroll view works, it scrolls fine and the image view is well-centered where it's supposed to be. However, there's a gap between the end of the navigation bar and the start of the scroll view and I can't figure out why. It seems to be as high as the navigation bar, but I have no idea about how to fix it. The image shown below should make you understand what I'm talking about (the content view is highlighted in grey for clarity).
I didn't write a single line of code to achieve this result. I would really appreciate any kind of help and I'm ready to give you all the information you need to help me address the problem.
I think you should uncheck Adjust Scrollview Insets property of your viewcontroller to get rid of this....
you have to uncheck Adjust Scrollview Insets
In my app, I tried to use scroll view. But I encountered an issue where the scroll view added space at the top and bottom, as mentioned in the following question.
ScrollView adds space at the top of subview xcode 6 Swift
I was asked to uncheck "Adjust scroll view insets" of the containing view controller. Doing that solved my purpose.
But the scroll view isn't scrolling anymore. I'm not able to scroll to the views which are appearing at the bottom.
May I know what I need to do, to make it work ?. Thanks.
The way I solved the extra padding between the top label and the nav bar was by unchecking "Under Top Bars" in the attributes inspector, in the "Extended Edges" section. When you uncheck it, items on your storyboard may move around. Don't re-arrange them. Run simulator and it should work.
Note: leave "Adjust Scroll View Insets" checked, otherwise nothing scrolls.
My attributes:
I had exactly the same issue. This is how it worked for me. I added a screen shot of my object hierarchy
Leave Adjust Scroll View Insets checked.
Drag a view and place it in your Scroll View, cover the entire storyboard. This view will hold every UI object in your storyboard
Add top, right, bottom, left = 0 constraints from your Scroll view to Main View.
Add top, right, bottom, left = 0 constraints from your content view to Main View.
Add constraints from your UI object relative to your content view.
The imageView is placed under the navigation bar. Top, right, left constraints are set to 0 relative to content view. When I run the app my image appears right below the navigation bar.
Define in the viewDidLoad
self.automaticallyAdjustsScrollViewInsets = false
I want to use the Top Layout Guide in the UIScrollView through Auto Layout. Without the UIScrollView Auto Layout works well with Top Layout Guide.
But when I embed the UIButton in UIScrollView, it doesn't.
I know that is because UIScrollView is not the same hierarchy level with Top Layout Guide. But I think there may be a good solution to resolve this issue.
You are right to be confused. It is a bit counterintuitive but the top and bottom layout guides are irrelevant to configuring a UIScrollView so that its scrollable content will underlap the translucent navigation bar, which is the effect you are trying to achieve.
what to do
Given the view hierarchy you've shown in the second picture, this is what you need to do on iOS8:
Configure the view controller so that "Extend Edges Under Top Bar" is checked (in code, use edgesForExtendedLayout). This will ensure that the view controller's lays out its root view so that it underlaps the nav bar.
Configure the scroll view constraints so that the scroll view's top edge has a zero offset from the top edge of its superview, not zero space from the top layout guide. This will ensure that the collection view fills the root view and thus also underlaps the nav bar, which is necessary for the scroll view's content to be able to scroll under the nav bar. (IB might fight you on this. See the footnote below.)
So now how do you make sure that the scroll view has any idea where the nav bar is, so that (for instance) it doesnt't always position its content under the nav bar? The answer has nothing to do with layout guides. In the view controller, check the box "Adjusts Scroll View Insets" (or in code, automaticallyAdjustsScrollViewInsets). This will cause the view controller to automatically adjust the scroll view's contentInset property so that the scroll view positions its content appropriately.
This will work.
what's going on
So why is this the answer? And why is it so confusing?
Frankly, it's easy to get confused because the top and bottom layout guides are prominently presented to us as elements that convey layout information about translucent overlaid elements. However, they are not the only "translucency-aware" layout mechanism. They are directly relevant only for positioning of "normal" subviews, i.e., not the view controller's root view, and not content within a UIScrollView.
Content within a scroll view (or a subclass like UICollectionView and UITableView) will always be positioned in a more complicated way involving the scroll the view itself, affected by properties like contentInset, contentOffset, etc.. (Really, if scroll view layout were a straightforward thing, why would Apple have dedicated WWDC sessions to scroll view layout for the last four years running?!)
To summarize, as the steps above indicate, the three distinct translucency-aware mechanisms for managing layout are as follows:
Extends Edges determines if the view controller positions its root view so that it underlaps the nav bar.
Layout Guides provide a metric that tells where the "main" content area is, taking translucent bars into account. You can use these with Auto Layout to position normal views so they don't underlap. Or you can access the numerical values in code.
Scroll View Insets are the right way to ensure that a scroll view's content can underlap but doesn't always underlap. The automaticallyAdjustsScrollViewInsets property on the view controller can do this for you automatically in simple cases. (Presumably, this property just causes the view controller to update the scroll view's contentInset based on the same values it exposes via the layout guides. So if you needed to manage the insets yourself, that's how you would do it.)
fighting IB's layout guide mania
A footnote on "Fighting with IB":
Unfortunately, Interface Builder might fight you when you try to constrain the scroll view edge to its superview's edge. If you do a ctrl-drag from the scroll view to the superview, when it pops up the menu of possible constraints to add between those views, it might try to get you to constrain the scroll view against the view controller's layout guides. This is because IB mindlessly prefers layout guides to superview edges, when the superview is the root view. But when you're working with a scrollview, this is the wrong thing.
Why? For instance, suppose you accept a constraint against the layout guide. Then you will end up with a top constraint on your scrollview that constrains it to topLayoutGuide-64.0. That -64.0 is a hard-coded value compensating for the exact height of a nav bar. So what happens when one fine day the nav bar does not equal 64pt? Or when you simply turn off the nav bar entirely? Or want to re-use this scene in a context without a nav bar? Answer: then you get a broken layout.
So how do you force IB to add a constraint from the scroll view to its superview's edge, as opposed to the layout guide? As far as I can tell, the answer is that you can't add that constraint correctly in IB by doing a ctrl-drag between views.
Instead, you need to select the view, and then use the "Pin" control at the bottom of the canvas. This is the one that looks like a capital H with a box in its middle. In the top section of the Pin popup dialog, the section with the little diagram showing superview space constraints, you can use the dropdown controls next to the text fields to configure if the space constraint binds a layout guide or a superview. This is shown below:
Github link to demo projects: https://github.com/algal/ScrollViewUnderlapDemo
While algal's answer seems to have worked prior to iOS 9.0 it is unnecessarily complicated and broken beyond iOS 9.0. The easier way that also works beyond iOS 9.0 and requires no interaction with auto layout is to simply do the following:
Ensure Adjust Scroll View Insets is checked for the ViewController in Interface Builder (or set automaticallyAdjustsScrollViewInsets to true programmatically).
Set the class of the ViewController's root View to UIScrollView in Interface Builder (or replace it (self.view) manually with an UIScrollView in code).
While adding spacing constraints, Xcode does not show items which have negative distance with your view. It seems you added a vertical space constraint between UIScrollView and UIView. Delete that constraint, move your scroll view to below Top Layout Guide and add a new vertical space constraint between UIScrollView and Top Layout Guide.