In iOS 6, you could scroll to the top of a UIScrollView using:
[scrollView setContentOffset:CGPointZero animated:YES];
If you use that code in iOS 7 with a translucent navigation bar, you get a result that is technically correct, but not user friendly. The top of the scroll view will be positioned to the origin of the screen.
How would I position the top of the scroll view to the bottom of the navigation bar instead? I'm looking for a solution that is not hardcoded, because in my application, sometimes the status bar and navigation bar can be hidden. Also, I would like to keep the translucent effect instead of copping out and doing self.edgesForExtendedLayout = UIRectEdgeNone.
Instead of using hard-coded values, use the new API:
[self.scrollView setContentInset:UIEdgeInsetsMake(self.topLayoutGuide.length, 0, self.bottomLayoutGuide.length, 0)];
You are setting the content insets of the scroll view to top and bottom layout guides. So if you have a navigation bar that is 44 points and a status bar of 20 points and no status bar, it will be 64 points top (in portrait) and 0 points bottom.
You should do this in viewDidLayoutSubviews.
You have to use this method -> setContentOffset:animated:
[_scrollView setContentOffset:CGPointZero animated:YES];
Just use -60 for the y coordinate or, better yet, get the statusbar and navigation bar heights dynamically because they both change.
See UIApplication's statusBarFrame and self.navigationController.navigationBar.bounds, I think.
Related
In my UIViewController I have UIImageView that takes up the full size of the controller (screen) and serves as a background. On top of UIImageView I have a UITableView with a clear background. I set the navigation bar to translucent like this:
self.navigationController.navigationBar.translucent = YES;
UIImageView is underneath the navigation bar as I want it to be. Unfortunately the same happens to UITableView. I want to put UITableView at the bottom of navigation bar, leaving UIImageView underneath. If I set:
[self setEdgesForExtendedLayout:UIRectEdgeBottom]
then UITableView is at the bottom of the navigation bar, but the same happens also to UIImageView. What would be the easiest solution to leave UIImageView underneath the navigation bar and push down the UITableView at the bottom of the navigation bar?
By default in iOS 7 the content extends to the top and bottom of the screen, underneath any navigation bars, tool bars, or tab bars. If you were to set the frame of the table view to be start after the navigation bar, the content of the table view would not scroll beneath the navigation bar providing the nice blur effect.
What you'll probably want to do instead, is keep the y origin of your table view at 0, underneath the navigation bar, and set the content inset so the content starts after the navigation bar.
This is pretty simple. If you're using auto layout the top layout guide of the view controller will recognise the height of the status bar and navigation bar so you don't need to calculate this yourself. The bottom of the navigation bar should end at 66.
//Using Auto Layout
CGFloat navigationBarHeight = self.topLayoutGuide.length;
//Not using Auto Layout
UINavigationBar *nav = self.navigationController.navigationBar;
CGFloat navigationBarHeight = nav.frame.origin.y + nav.frame.size.height;
myTableView.contentInset = UIEdgeInsetsMake(navigationBarHeight, 0, 0, 0)
And of course if you actually do want the frame to start after the navigation bar the height above stays the same, you just need to manually set the frame of the table view.
CGRect tableViewFrame = self.view.bounds;
tableViewFrame.origin = CGPointMake(tableViewFrame.origin.x, navigationBarHeight);
tableViewFrame.size = CGSizeMake(tableViewFrame.size.width, tableViewFrame.size.height - navigationBarHeight*2);
myTableView.frame = tableViewFrame;
EDIT: Ah, almost forgot. You'll also want to change the scrollIndicatorInsets to match the contentInset, so your scroll bars don't move offscreen.
myTableView.scrollIndicatorInsets = myTableView.contentInset;
I started building a TableView in my app by using a TableViewController in a storyboard. When you do this, you have a very cool effect when you scroll down your list : the cells moving behind the nav bar get blurred.
Some time later, I had to move from this TableViewController to a ViewController with a TableView inside (I had to add other views at the bottom of the table).
In order to avoid having the first cells hidden by the navigation bar (being over it), I added constraints to the Top and Bottom Layout Guides, and to the left and right edges of the view.
This works fine, but I lost the cool blurred scrolling effect : the cells seem to be disappearing before going behind the navigation bar.
I've seen workarounds with people not using constraints and putting magic numbers in interface builder. I cannot do this, first because I dislike it, and second because I have to be iOS 6 compatible.
What did I miss to be able to benefit again from the blurred navigation bar effect ?
You have to manually adjust the contentInset of the table view and make sure the table view frame origin is 0, 0.
In this way the table view will be below the navigation bar, but there will be some margin between the content and the scroll view edges (the content gets shifted down).
I advise you to use the topLayoutGuide property of the view controller to set the right contentInsets, instead of hard coding 64 (status bar + navigation bar).
There's also bottomLayoutGuide, which you should use in case of UITapBars.
Here is some sample code (viewDidLoad should be fine):
// Set edge insets
CGFloat topLayoutGuide = self.topLayoutGuide.length;
tableView.contentInset = UIEdgeInsetsMake(topLayoutGuide, 0, 0, 0);
By the way, this properties of UIViewController might help you (you should not need to change their default values, but I don't know what your view hierarchy is):
automaticallyAdjustsScrollViewInsets
edgesForExtendedLayout
extendedLayoutIncludesOpaqueBars
The tableView needs to be full screen. That is underneath the top and bottom bars. Note don't use the top and bottom layout guides as they are used for positioning relative to the bars not underneath.
Then you need to manually set the content inset of the tableview. This sets the initial scroll position to under the top bar.
Something like:
CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame].size;
CGFloat h=MIN(statusBarSize.width, statusBarSize.height);
UIEdgeInsets e = UIEdgeInsetsMake(self.navigationController.navigationBar.bounds.size.height + h,
0.0f,
0.0f,
0.0f);
self.tableView.contentInset = e;
Not you get this functionality for free when using a tableView controller and the "Automatically Adjust content inset" settings
You probably have the coordinates of your tableView not set to (0, 0) to map to those of the viewController.view.frame or viewController.view.bounds. If you have done that, try setting
self.navigationController.navigationBar.translucent = YES;
UIViewController property edgesForExtendedLayout does the trick. If you are using storyboards just make sure Extended Edges Under Top Bars is on (and it is by default).
If you are creating your view controller programmatically try this:
- (void)viewDidLoad
{
[super viewDidLoad];
self.edgesForExtendedLayout = UIRectEdgeAll;
}
And of course, your table view needs to have proper autoresizing mask/layout constraints
edgesForExtendedLayout is not what you want here, as this will limit the table view underneath the navigation bar. In iOS 7, the view controllers uses fullscreen by default, and the property controlling where the tableview content starts is automaticallyAdjustsScrollViewInsets. This should be YES by default, so check if it is somehow set to NO, or try setting it explicitly.
Check this answer for a good explanation on how this works:
https://stackoverflow.com/a/19585104/1485715
I have a ViewController with a navigation controller and a tab bar controller. This ViewController has 2 buttons that toggle the visibility of a scroll view and a map view. The main thing is to have these 2 buttons always show up in the same place regardless of orientation or the view that happens to be visible.
The problem I am having is that the MapView won't size properly. If I just give it a frame from self.view.bounds it goes under the navigation bar / tab bar - basically taking up the whole screen. This throws off the location of my toggle buttons.
I noticed my ScrollView does the same (using a background color and a translucent navigation bar) but the positioning of sub views on it stay within the visible area (between the navigation bar and the tab bar). So when I add my toggle buttons, they show in the correct place.
When I press the toggle buttons, I just re-assign the parent view of the buttons to the now displayed view (ScrollView or MapView). This always works on the scroll view but due to the positioning, they end up going under the navigation bar when the MapView is displayed.
I have tried creating the frame for the MapView manually but I get odd results. I use this for the frame:
CGRect mapFrame = CGRectMake(
0,
(self.navigationController.navigationBar.frame.size.height + [UIApplication sharedApplication].statusBarFrame.size.height),
self.view.frame.size.width,
(
self.view.frame.size.height
- (self.navigationController.navigationBar.frame.size.height + [UIApplication sharedApplication].statusBarFrame.size.height + self.tabBarController.tabBar.frame.size.height)
)
);
I then set the auto resizing masks
[self.mapView setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin];
But with this, if I enter into the view controller in landscape mode - the MapView is off the screen. If I enter in portrait mode and then rotate to landscape, the top margin is off but about 10 points so it still goes under the navigation bar a bit (and has a visible margin between the tab bar and the bottom of the map view).
How can I make the MapView subviews only display within the visible region like the ScrollView does? I don't mind so much if the map itself goes under the navigation bar / tab bar
Ugh, I found the answer just a few minutes ago. I have no idea why this is the default behavior on iOS 7 but alas, there it is.
The solution is to add this to the viewDidLoad on the ViewController
[self setEdgesForExtendedLayout:UIRectEdgeNone];
[self setAutomaticallyAdjustsScrollViewInsets:NO];
Much thanks to the post here
In storyboard, in a view controller I tried add a navigation bar under the status bar, running it, it is transparent and shows a label that's supposed to be blurred, like by navigation bar.
But when placing the same view controller embedded in a navigation view controller, the underneath background image could be blurred, which is my intention.
What are these two way different results? What need to do for the firs method to make status bar blur?
Thanks!
In iOS 7 the status bar is transparent by default. The blurring you're seeing when there's also a navigation bar is actually created by the navigation bar. So to create the effect you're looking for without a navigation bar, you need to position a view that produces a blurring effect beneath the status bar.
For reference, add your view with a frame provided by:
CGRect statusBarFrame = [[UIApplication sharedApplication] statusBarFrame];
I know this is old, just for reference, I solved this by setting self.navigationController.navigationBar.clipToBounds = NO
I haven't tested this completely, but go to your plist file and check the following settings:
"View controller-based status bar appearance": If this is set to "Yes", then it should display a status bar that is unique to each View Controller, which might be what you need.
"Status bar style": You may set this to three different styles: Opaque black, Gray, and Transparent black.
Let me know if this worked for you.
UINavigationController will alter the height of its UINavigationBar to either 44 points or 64 points, depending on a rather strange and undocumented set of constraints. If the UINavigationController detects that the top of its view’s frame is visually contiguous with its UIWindow’s top, then it draws its navigation bar with a height of 64 points. If its view’s top is not contiguous with the UIWindow’s top (even if off by only one point), then it draws its navigation bar in the “traditional” way with a height of 44 points. This logic is performed by UINavigationController even if it is several children down inside the view controller hierarchy of your application. There is no way to prevent this behavior.
It looks like you are positioning your view hierarchy in the first example starting at the point (0,20). Also, is that a UIToolbar or a UINavigationBar? If it's the latter, why are you using it by itself and not using it inside of UINavigationController?
If you do not use UINavigationController and are instead using custom view controller containers, you'll need to position your views accordingly.
See this answer for a thorough explanation.
I have similar UI design and based on Matt Hall answer and some article I've googled, I come up with something like this:
- (void)viewDidLoad {
[super viewDidLoad];
if (NSFoundationVersionNumber>NSFoundationVersionNumber_iOS_6_1) {
CGRect statusBarFrame = [self.view convertRect: [UIApplication sharedApplication].statusBarFrame fromView: nil];
UIToolbar *statusBarBackground = [[UIToolbar alloc] initWithFrame: statusBarFrame];
statusBarBackground.barStyle = self.navBar.barStyle;
statusBarBackground.translucent = self.navBar.translucent;
statusBarBackground.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth;
[self.view addSubview: statusBarBackground];
}
}
Where self.navBar points to navigation bar added in storyboard. This is needed only in case when it runs on iOS7 that is why I've added this condition (my app has to support iOS5).
This works like a charm.
alternative approach (enforce status bar size) is also good:
- (void)viewDidLoad {
[super viewDidLoad];
if (NSFoundationVersionNumber>NSFoundationVersionNumber_iOS_6_1) {
CGRect statusBarFrame = [self.view convertRect: [UIApplication sharedApplication].statusBarFrame fromView: nil];
self.navBar.frame = CGRectUnion(statusBarFrame, self.navBar.frame);
}
}
I've found another solution I think this is best since it involve only storyboard and no code is required.
Switch storyboard view to 6.1 mode (view as: iOS 6.1 and Earlier)
Select problematic UINavigationBar
in size section add 20 delta height in "iOS6/7 Deltas"
Switch back view to 7.0 mode (view as: iOS 7.0 and Later), and be happy with result.
when you embed view controller with navigation view controller that time you will see navigation bar to all the view controller you are pushing to from same view controller. In your first case you are adding the navigation bar object, insted of that you can select view controller from storyboard , go to attributes inspector tab & from their select Top bar as translucent navigation bar.
I'm working on a project that needs to have the navigation bar height bigger than the default.
This is how i set the nav bar height:
- (CGSize)sizeThatFits:(CGSize)size {
if (iPad) {
CGSize newSize = CGSizeMake(768,86);
return newSize;
}
return CGSizeMake(320, 44);}
I set an bg image for the navigation bar and that's working ok.
The problem is that the back button and the right button item are not centered.
Does anyone know how to center them?
Thanks
It's generally bad practice to manipulate the navigation bar's height. I tried to do it a number of different ways for one project and every approach had a "gotcha". Namely, the navigation buttons are always justified to the bottom of the navigation bar, so adjusting it's height will cause the buttons to look like they're rendering towards the bottom of the bar. And the buttons will animate oddly as you push and pop other controllers. I would suggest not adjusting the height of the navigation bar.