Navigation bar appear over the views with new iOS7 SDK - iphone

CGRect cgRect1 = [[UIScreen mainScreen] applicationFrame];
UISearchBar *mySearchBar = [[UISearchBar alloc]
initWithFrame:CGRectMake(0, 0, cgRect.size.width, 40)];
mySearchBar.autoresizingMask =
UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight ;
UITableView *myTableView = [[UITableView alloc]
initWithFrame:CGRectMake(0, 40, cgRect.size.width, cgRect.size.height-40)];
myTableView.autoresizingMask =
UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
[self.view addSubview:mySearchBar];
[self.view addSubview:myTableView];
In the earlier versions it is working correctly. The search bar is appearing below the statusbar and navigation bar. The tableview is appearing below the search bar
But when I run this on Xcode 5 sdk iOS 7, the search bar is not visible (I think its placed under the status bar and navigation bar) , and also the navigation bar is appearing over the table view.
Will it be fixed with iOS 7 stable release ?
Or is it the problem of my coding ?
Or should we handle it by adding the y (y = statubar height + nav bar height) value for iOS 7 ?
I recently downloaded Xcode 5 DP to test my apps in iOS 7. The first thing I noticed and confirmed is that my view's bounds is not always resized to account for the status bar and navigation bar.
In viewDidLayoutSubviews, I print the view's bounds:
{{0, 0}, {320, 568}}
This results in my content appearing below the navigation bar and status bar.
I know I could account for the height myself by getting the main screen's height, subtracting the status bar's height and navigation bar's height, but that seems like unnecessary extra work.
Has anyone else experienced this issue?
UPDATE:
I've found a solution for this specific problem. Set the navigation bar's translucent property to NO:
self.navigationController.navigationBar.translucent = NO;
This will fix the view from being framed underneath the navigation bar and status bar.
However, I have not found a fix for the case when you want the navigation bar to be translucent. For instance, viewing a photo full screen, I wish to have the navigation bar translucent, and the view to be framed underneath it. That works, but when I toggle showing/hiding the navigation bar, I've experienced even stranger results. The first subview (a UIScrollView) gets its bounds y origin changed every time.

That’s not entirely true. There has been a new property introduced in iOS 7 that lets you adjust the layout behavior as in previous versions of iOS. Place this piece of code in your view controller, and you should be good to go! The space your navigation bar takes up should be accounted for automatically
if ([self respondsToSelector:#selector(edgesForExtendedLayout)])
self.edgesForExtendedLayout = UIRectEdgeNone;
You need add the above in your -(void)viewDidLoad method.
Note: You should be using the latest GM release of iOS 7 and Xcode 5 now since the API has changed from beta versions.

If you are working in Storyboard (which I strongly recommend!) this is the solution:
You can disable "Extend Edges" of your ViewController in storyboard. You have to do this for each viewController. You can disable extended edges by clicking the viewController icon in stortyboard (besides the productOwner beneath the view itself) and then selecting the attributes inspector (Like the images shows).
This will also set the alignment lines like iOS 6.
Another great tool in xCode 5 is "Preview": click on the butler Button (assistant editor) and select Preview. there you can select iOS 6 and see how your storyboard design will look like on iOS 6.
Its just great:D
[Update]
Be careful: disabling "Extend Edges" might result in a black glow on the navigation bar when the app enters background on iOS7. the glow will also be visible on the multitasking view (double press on home button). this can be solved by setting the background color of the navigation's bar view to white.
[self.navigationController.view setBackgroundColor:[UIColor whiteColor]];

As the OP says, there is a simple solution to this which is to set the navigation bar to be opaque. Rather than doing this in code, simply untick "Translucent" for your root navigation bar:

self.edgesForExtendedLayout=UIRectEdgeNone;
It works on iOS 7 simulator(Xcode 5 DP5)

these answers were all helpful, especially MQoder's, but for me i also had to set the default top bar to "opaque black navigation".

#One Man Crew's answer is correct, but:
I would recommend to use this code to avoid errors when running the app on older versions :
#if __IPHONE_OS_VERSION_MAX_ALLOWED > __IPHONE_6_1
if ([self respondsToSelector:#selector(edgesForExtendedLayout)])
self.edgesForExtendedLayout = UIRectEdgeNone;
#endif

self.edgesForExtendedLayout = UIRectEdgeNone;
And you need to do this on AppDelegate#application:didFinishLaunchingWithOptions:
self.window.backgroundColor = [UIColor whiteColor];
Otherwise Navigation Bar's background color will changed to gray. Because the transparent Navigation Bar overlaps window.

If you want to keep the transparency when the user scrolls your table view, you can set the contentInset of it:
CGFloat topLayoutGuide = self.topLayoutGuide.length + self.tabBarController.navigationController.navigationBar.frame.size.height;
self.tableView.contentInset = UIEdgeInsetsMake(topLayoutGuide, 0, 0, 0);

One solution is to use Navigation Controller. This automatically solve the issue.
Also use Xcode 5 instead of Xcode Preview versions since they are beta ones.

Related

Overlaps the status bar on view iOS7

I have develop the my iPad application in ios6 but now i want to develop that application in ios7 also , I am using .xib file and I am not using the AutoLayout i want to use the black status bar in my application and i want to make the application similar like ios 6 but the status bar is overlap on the view i use the different code like below link
Link 1
Position of navigation bar for modal view - iOS7
Link 2
iOS 7 - Status bar overlaps the view
Thanks in Advance
wont happen, two options:
use a custom background image that is sized accordingly.. IIRC 44 (for navbar) + 20 (for status bar)
OR
account for the 20 pixels by using a custom view which is black :D
In iOS 7, the status bar is transparent, and other bars—that is, navigation bars, tab bars, toolbars, search bars, and scope bars—are translucent. As a general rule, you want to make sure that content fills the area behind the bars in your app.
Because the status bar is transparent, the view behind it shows through. The style of the status bar refers to the appearance of its content, which includes items such as time, battery charge, and Wi-Fi signal. Use a UIStatusBarStyle constant to specify whether the status bar content should be dark (UIStatusBarStyleDefault) or light (UIStatusBarStyleLightContent):
UIStatusBarStyleDefault displays dark content. Use when light content is behind the status bar.
UIStatusBarStyleLightContent displays light content. Use when dark content is behind the status bar.
In some cases, the background image for a navigation bar or a search bar can extend up behind the status bar. If there are no bars below the status bar, the content view should use the full height of the screen.
In iOS 7, you can control the style of the status bar from an individual view controller and change it while the app runs. If you prefer to opt out of this behaviour and set the status bar style by using the UIApplication statusBarStyle method, add the UIViewControllerBasedStatusBarAppearance key to an app’s Info.plist file and give it the value NO.
For more details about how to use status bar with navigation controller, please refer my answer here.
Try below to do not overwrite status bar:
[navController.navigationBar setBackgroundImage:[UIImage imageNamed:#"navBar.png"] forBarPosition:UIBarPositionTop barMetrics:UIBarMetricsDefault];
A workaround to use the old style status bar is to modify the frame of the main view and shift it down 20px. This will only work on viewWillAppear function but you need to make sure you call this once. This is more of a hack than a solution:
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[self.view setFrame: CGRectMake(self.view.frame.origin.x, self.view.frame.origin.y+20, self.view.frame.size.width, self.view.frame.size.height-20)];
}

Overlap navigation bar on ios 6 with other view

For an iphone project with an "unique" design (with which i am not happy at all) I need to draw a custom view which partially overlaps the navigation bar of a controller in a UINavigationController. Target is iphone/ios 6 with a fixed device orientation (portrait).
My currents solution is to disable the navigation bar programatically via self.navigationController.navigationBar.hidden = YES; in viewDidLoad of my controller and to draw a "fake" navigation bar and paint over this.
This leads to the problem that the status bar color remains black (since there is no real navigation bar visible).
Ios 6 status bar color is discussed here: Status bar color in iOS 6?
I already tried to use [self.view insertSubview:OVERLAPVIEW aboveSubView:self.navigationController.navigationBar] but it did not work and OVERLAPVIEW was drawn beneath the navigation bar.
Is there another way to overlap the navigation bar with another view (z-wise)?
Or is there a way to change the status bar color when no navigation bar is shown (unfortunately in addition to this the view with the overlap is the main view of the app and the first screen visible to the user)
Full disclosure: I am an ios noob and stack overflow lurker - this is my first question on stack overflow, please help me to clarify my question and improve my stack overflow skills if necessary.
Use
[self.navigationController.view addSubview:OVERLAPVIEW];
instead of
[self.view insertSubview:OVERLAPVIEW aboveSubView:self.navigationController.navigationBar];
You can adjust the frame of your view according to make navigation bar partially visible.
I solved this issue by hiding the Navigation bar with
self.navigationController.navigationBar.hidden = YES;
and by adding a navigation bar to my view. Everything added after this new navigation bar will to overlap it (you could use index [parentView.subviews objectAtIndex:0]; as well).
The color of the status bar changes as needed.
In the case of the splash screen i do exactly the same and overlap the navigation bar with the fullscreen splash image.
-(void)viewDidLoad{
[super viewDidLoad];
UINavigationBar * navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 49)];
UINavigationItem *item = [[UINavigationItem alloc] initWithTitle:#"SPLASH"];
[navigationBar pushNavigationItem:item animated:NO];
[self.view addSubview:navigationBar];
CGRect frame = [[UIScreen mainScreen] bounds];
frame.origin.y -= 20;
UIImageView *splashImage = [[UIImageView alloc] initWithFrame:frame];
splashImage.image = [UIImage imageNamed:#"splash"];
[self.view addSubview:splashImage];
}
It seems that this answer solves my issue
Add UIView Above All Other Views, Including StatusBar
Note: at the moment i am not going down this road and I will accept this answer once I tried it (I postponed solving this problem at the moment and it might take a while)

iPhone, can I put an imageView under the TabBar?

I currently have an iPhone application which utilizes the tab bar control. I was wondering if it is possible to move the tab bar up from the bottom of the screen and place an imageView underneath it. Thanks in advance!
You should be able to set the UITabBar's frame like so:
myTabBar.frame = CGRectMake(0, 240, 320, 50);
Even though you might can, it is not highly recommended to do it, because it doesn't stick to the Human Interface Guidelines, which state that a tabbar should always appear on the bottom of the screen.
You can use
myTabBar.frame = CGRectMake(0, UIApplication.sharedApplication().statusBarFrame.size.height, UIScreen.mainScreen().bounds.size.width, 50);
Note: it takes effect only in viewDidLoad() and not in any other method. So if you use hideBottomBarWhenPushed() method to hide the tabbar it hides tabor when pushed but when the view is poped, tabbar sticks to the bottom even if you set its frame to top. Moreover personal hotspot bar overlaps your tab bar frame. Try alternative

Top margin on UITableViewController

I have a TabBarController, one of the tabs of which contains a sub view which is a navigationController. I am then loading into the navigation controller a view which inherits form UITableViewController.
My problem is thta for some reason the table view starts behing the navigation controller, not the top of the screen but about half way down the navigation bar, hence the top of the first cell in the table view is cut off.
Can anyone suggest how to move the UITableViewController down?
Fix it programmatically:
- (void)viewDidLoad {
UIEdgeInsets inset = UIEdgeInsetsMake(20, 0, 0, 0);
self.tableView.contentInset = inset;
}
This "tucked in behind the Navigation bar" issue is due to iOS 7 using fullscreen layout automatically. See the iOS 7 Transition Guide.
It's a bit devious since it displays as in iOS 6 in the Simulator (layout-wise; ie. not tucked in behind).
Is your navigation bar translucent? Mine was, and setting it to non-translucent fixes it on Iphone iOS 6, iPhone iOS 7, and Simulator 7.0 building with XCode 5. (In my case I set it to translucent for visual appearance.)
You can set the frame of the UITableView to an explicit X,Y position by setting the frame property on the view. Or you can change the same property using interface builder depending on whether you've added the tableview via IB or in code.
eg.
myTable.frame = CGRectMake(0.0, myTable.frame.origin.y + NAV_BAR_HEIGHT, myTable.frame.size.width, myTable.frame.size.height);
This will position the table myTable (which is a pointer to the UITableView) below the navigation bar, you may also need to adjust the height of the table accordingly. The height of the nav bar which I am indicating with a constant is 44.0.
I typically do this type of view adjustment if it has been necessary in the viewWillAppear of the view controller responsible. It's not common that you'll need to make this type of adjustment so it may be something you can fix by changing the way your views are being setup.
Without more details of how your view is setup it's hard to be more specific.

Navigation Controller Transparent Bar Style is not working

I am using a navigation controller, and I have the style set to :
navController.navigationBar.barStyle = UIBarStyleBlackTranslucent;
But when I run my program, the navigation controller looks like it is on top of a white background, not my background. When I push a controller, left or right, all my view, the current one, shifts to the top exactly the size of the navigation bar. And it is there where I can see my background through the navigation controller bar. Any ideas? When my barStyle is set to opaque, everything looks fine. I was thinking on setting my view frame a negative 'y' value, but I think there should a more elegant way.
I believe the UINavigationController assumes that your controller view frames don't include the area beneath the navigation bar.
UIBarStyleBlackTranslucent is more often used for UIToolbar, so Apple probably didn't make it easy to use it nicely with UINavigationBar. You'll probably need to abandon the UINavigationController, or start hacking the frames (careful with rotations), if you want to reliably render under the bar area.
Also, if your intention is to hide the navigation bar after a few seconds, you'll have a much easier time if you make it fade out (like the Photos app) instead of trying to slide it up (like Mobile Safari). Trust me on that one... that took me a lot of time to learn the hard way.
Simply use a transparent background image, and translucent = YES to allow the content to flow below the bar. Works on iOS 5 / 6. Add in viewDidLoad.
self.navigationController.navigationBar.translucent = YES;
UIImage * backgroundImage = [UIImage imageNamed:#"spacer.gif"];
[self.navigationController.navigationBar setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:UIBarMetricsDefault];
I attached the spacer.gif image here, a single 1px x 1px transparent image.
self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:0.169 green:0.373 blue:0.192 alpha:0.9];
self.navigationController.navigationBar.translucent = YES;
Note:
Don't use self.navigationBarStyle and self.navigationBarTintColor to change.
Add the last two statements to your viewDidLoad.
I ran into this same problem (in 3.1.3) and while you can't set the bar style after the navigationBar has already been setup you CAN set the tintColor and translucent values whenever you like:
self.navigationController.navigationBar.tintColor = [UIColor blackColor];
self.navigationController.navigationBar.translucent = YES;
Will create the 'blackTranslucent' bar, I change the navigationBar look when I push certain view controllers onto the stack.
I had the same problem, and I solved it by making the background of the root view the same as my view. The white area behind the navigation bar turned out to be the root view.
The navigation controller offsets the coordinate sytem of all it's subviews so they draw below the navigation bar.
Extend your view's frame into the negative y domain for it to draw under the navigation bar.
You need to set the barstyle in your info.plist file for it offset everything correctly.
However, I haven't tried it since the 2.1 f/w was released, but when I tried this in 2.0 I found that the setting was lost after a rotation from portrait to landscape.
try to use this, may be it will helpful.
_topToolBar.barStyle = UIBarStyleBlackTranslucent;
_topToolBar.alpha = 0.3;
I had a same problem.I solved!
ImageViewExtendController *detailImageController = [[ImageViewExtendController alloc] init];
[detailImageController loadImage:url];
[self.navigationController pushViewController:detailImageController animated:YES];
If you set your nav controller's navigationBar to transparent in your App delegate early enough (It worked for me before adding the nav controller to the window), it will automatically shift your view up underneath the navigation bar.
Unfortunately it does not also shift your view underneath the status bar. Sad, it looks like you need to implement your own version of UINavigationController. Luckily, it's not too bad as UINavigationBar is pretty reusable.
Try this:
self.tabBarController.tabBar.superview.backgroundColor = [UIColor blackColor];
Change the Extend Edges options in child viewControllers
As for example, in xcode editor, go to your first viewcontroller child and unset the options:
Extend Edges;
Under Top Bars;
Under Bottom Bars;
Under Opaque Bars;
This way your child ViewController will not layout starting below the status bar of the navigation controller, neither the tabbar or the toolbars
hope it may help anyone