I have a rather simple screen where I am inserting a custom UINavigationBar at the top of the screen and a content area below it. I'm using AutoLayout and I'm visually declaring the relationship as so:
#"V:|-0-[_navBar(65)]-0-[_content]-0-|";
Now, this seems to work perfectly until I tried to have another view slide down from under the navigation bar. The nav bar contains a search field and I want the search results to slide down from under nav bar. As the code currently stands, the search results slide down on top of or in front of the nav bar and it looks quite strange. So I tried to push the nav bar to the top of the index stack using:
[self.view bringSubviewToFront:_navBar];
As far as the animation is concerned, it works perfectly. The search results no longer slide over the nav bar but they are in front of the content area. When the child of _content is a UIView it seems to be OK. However, when the child of _content is a UIScrollView, this seems to have introduced a 20px margin between the nav bar and the content area. Honestly, the space seems to be very close in size to the status bar although the nav bar has stayed the same height. I've tried bringing the nav bar to the front using many different techiniques but as soon as the nav bar and the content area are on different planes, it seems to break the autolayout constraint of 0px that is defined above.
Here is a sample project to show the bug. Look at the third item, "bringSubViewToFront bug".
Does anyone know what's going on?
The 20 point space seems like it would have something to do with the status bar, but I'm not sure why bringing the navigation bar to the front would apparently cause the scroll view to inset its content. Anyway, I was able to fix it by adding this line, after you bring the navigation bar to the front,
_scrollView.contentInset = UIEdgeInsetsMake(-20, 0, 0, 0);
Related
I’m implementing a design that requires the navigation bar to visually appear to be 64px tall (even though the content fits inside the standard height). The standard UINavigationBar height on iOS is 44px and it is strongly discouraged try to to change the that (see: https://developer.apple.com/forums/thread/88202?answerId=274620022#274620022).
So, what I’m trying to do instead is to add a padding of 10px both above and below the bar itself, but I can’t figure out if this is even possible.
I am able to extend the bar by 20px by setting the UINavigationController’s additionalSafeAreaInsets.top = 20, but the bottom of the navigation bar is still flush with the bottom of the navigation controller, and I need it to be -10px from bottom.
So, my question, is this possible, or am I chasing a ghost here?
EDIT: To clarify, I want it to look like how the navigation bar looks in the iMessage conversation view, i.e. a tall navigation bar, but with vertically centered content.
I think you should make a customized navigation bar to solve this issue.
Because built-in UI is not easier to adjust or customize. I have tried many tricks but they didn't work.
I already made a base screen that automatically adds a navigation bar on top, just need to set left/right button and the label. This navigation bar is just a normal UIView.
When I hide my navigation bar I end up with some space under it, it looks like the status bar is twice as big as it should be.
In the image the red line is just touching where the statusbar/navigation bar ends.
My VC is contains a scroll view that is spaced 0 to the edges and spaced 0 to the top layout guide.
Why is the navigation bar not hiding completly? I thought that if you hide the navigation bar you would end up with a 20px statusbar showing only.
I could space my scrollview to be +20 from the top view but that seems a bit hacky.
Look for Extended Edges in attribute inspector of the view controller and uncheck Under Top Bars.
This a little bit wierd i have made UIPageController that works and everything is fine. But when i put it inside UINavigationController, it offset from the for status bar. Than i swipe up on that screen it positions itself right and everything is ok. I don't really understand what is happening. Here are the images
try setting adjustScrollViewInsets to false on UIPageController.
This is the property that determines whether the system should automatically add inset to a UIScrollView in your view controller's view hierarchy when it is being displayed behind transparent bars (here , the navigation bar). What happened here is that the system assumed the bounds of the page controller overlaps with that of the nav bar and so it adds insets so that the view's contents is fully visible and is not obscured by the nav bar. But in this case it is wrong since it seems your page controller's bounds starts at the bottom edge of the nav bar.
I think you can also set the nav bar as opaque to disable the automatic adding of insets.
EDIT: Small update to my issue, what i did as a solution for now was obviously just having my scrollview white. This fixes my issue, but my real curiosity was to why exactly the content view was doing what i explained below. Also still curious to what common practice formatting is when adding a scroll view to a VC with a navigation bar.
So i am a bit confused with what is going on here. I have a VC with a navigation bar at the top and i need to add a Scroll view to it. So when i did that i stretched it to just below the navigation bar at the top of the screen, then added constraints. (I also made the ScrollView background red so i could differentiate it from the content view)
Secondly i added a UIView which i named Content view and i stretched it to the exact same position as the Scroll view. Then added constraints for that as well. (No objects were added yet)
I then ran the app to check how it looked and i noticed that under the navigation bar my there was a big chunk of red, meaning the Scroll view was full screen in the correct position right below the nav bar, but my content view was not.
A couple things i did to fix this was
I extended the Scroll view all the way to the top of the VC, past the nav bar, but when i ran the app i could see red behind the nav bar, which i figured meant it was not right.
I extended just the content view to the top of the VC, but this did not seem right to me either, even though both seemed to fix the problem.
So my questions are:
When adding views in general to a VC with a nav bar at the top should i be extending those views only to the bottom of the nav bar, or all the way to the top of the VC?
I am new to Scroll views as this is my first time dealing with one, am i missing something in this situation? Or doing something wrong?
Your help is greatly appreciated, thank you.
1) Move the scroll view all the way up and beyond nav bar.
2) Have the scroll view match the height of its parent.
Trying to set up a scrollview in a UIViewController that has a nav bar. In IB my content gets pushed up to the top below the nav bar (see image).
When running the app on my phone the view is pushed down to sit below the nav bar which is fine. Is there anyway to get it to reflect like this in IB. It is hard to set up my content when half of it is cut off.
If I add a constraint to make the top of the view sit below the nav bar when I run the app it adds that offset and doesn't look correct. (I guess I could alter the constraint before running on my phone but seems like a ridiculous hack just to layout my app). (Already having major issues getting my scrollView to work the way I want it to... don't scroll if my content fits the screen but also use the scroll view to move the view up if the content is covered up by the keyboard but thats for another post)
when I run in simulator looks like this
In Interface Builder you should make sure your NavigationBar is set to Opaque in the simulated metrics. When you have a transparent Nav bar content can go underneath it.
It might look right in your app if you have a global attribute applied to make sure all nav bars are not translucent.