I've a view with nothing but a map on it, inside a navigation controller.
The navigation bar is translucent so the map can be seen slightly through it.
This works fine with the navigation bar tint set to Default, but as soon as I change the bar tint to a specific colour the navigation bar background turns completely transparent.
Interestingly, the issue doesn't happen in the emulator, only on an actual iPhone (a 4 (not S), in case that might be relevant).
I've added no code yet- everything I've put together was generated purely in Interface Builder.
Does anyone have any idea what might be happening here and what I might be doing wrong? Or is this a bug I need to report to Apple?
You need to set the bar's translucent property to true. From the Apple documentation for UINavigationBar:
barTintColor
The tint color to apply to the navigation bar background.
This color is made translucent by default unless you set the translucent property to NO.
When you set a tint color on a UINavigationBar, it sets translucent to false. Unfortunately, translucent can not be set on an appearance proxy. You'll need to add self.navigationController.navigationBar.translucent = YES in all your viewWillAppear: methods (or create your own subclass that changes the default)
Related
I'm trying to present a view controller (which is embedded in a navigation controller) modally. The problem is that when the view is presented, it is blending the navigation bar with black rather than white.
I am creating my view controller from a storyboard and showing it by using -[UIViewController presentViewController:animated:completion:].
How can I get the correct blending as can be seen below?
Incorrect behavior:
Correct behavior:
The problem was that the Extend Edges setting had Under Top Bars disabled. Once I enabled that setting, everything worked properly.
Note to revert to the defaults, you should enable Under Top Bars and Under Bottom Bars. The latter is especially useful if you notice the same behavior with a tool bar at the bottom of the view controller.
You can see what the value is set to programmatically by reading the edgesForExtendedLayout value on your view controller. If it is set to UIRectEdgeNone, you will get the undesirable behavior.
For more information on how extended edges works, see this answer.
The preview window/multitasking switcher shows a weird behaviour in iOS 7.
Here is how it appears when I set this property for both apps.
self.navigationController.navigationBar.translucent = NO;
Now for the white app I commented the line.
Now when I run it again and go directly to the switcher, this is what I get:
If I run the app and then go to the home screen or any other app and then go to the switcher, this is what I get:
Is there any way to correct this problem while having translucent navbar?
Thanks.
I ran into this as well. Since you don't have any content under the translucent navigation bar (and/or tab bar or tool bar), it can sometimes appear black in the app switcher. I was using a collection view that was constrained to the top and bottom layout guides and so there was nothing behind the tab bar and navigation bar. When the app is in the foreground it looks correct because there must be some default background color applied by Apple (maybe on the UIWindow) so you don't see through to the springboard. This background color seems to be gone (or black) when in the app switcher causing it to look like that.
The problem goes away on view controllers that are set to extend under top and/or bottom bars:
self.edgesForExtendedLayout = UIRectEdgeTop | UIRectEdgeBottom;
or in Interface Builder:
If that doesn't fit you needs or you still have other view controllers that don't extend under top and bottom bars you will still get the black bars in the app switcher. The way I solved it was to set the UIWindow background color in my appDelegate.
self.window.backgroundColor = [UIColor whiteColor];
Instead of doing it in code, you can also do it via Storyboard.
In the navigation bar of your root navigation bar, make sure you turn off its translucency.
I reckon it's a simpler solution.
I am using a custom color for my UINavigationBars that I set globally (on iOS7) in didFinishLaunchingWithOptions:
[[UINavigationBar appearance] setBarTintColor: [UIColor mainThemeColor]];
This works fine, but in two of my screens I see something very odd. When the view appears, I see a dark glow move in from the right, and the color of the bar ends up to be darker than what I set it to. I tried setting the color in viewDidAppear et al, but the same thing happens.
I have no idea how this can happen, all my views and viewControllers are set up the same.
Also, when the app is in the background, and I go to the app switching view (with all the miniature screens), the bar for those two screens is completely dark, instead of the theme color.
Has anyone seen this?
EDIT: It has to do with calling self.edgesForExtendedLayout = UIRectEdgeNone; on my view controllers. If I remove that line, then the coloring of the navbar remains correct. However, in that case, part of my view is hidden.
In my app, I have some webviews. A transparent status bar doesn't look good for full screen webview. I want to make the status bar TRANSLUCENT, just like the game center.
I notice that the status bar would be drawn translucent if there is a navigation bar under it. But I want a translucent status bar BY ITSELF.
Is there any way to do this?
If you look at the Human Interface Guidelines section about the Status Bar it recommends (emphasis mine on the section most related to your question):
Prevent scrolling content from showing through the status bar. As
users scroll, you don’t want them to see a confusing mix of app
content and status bar items in the status bar area. To give users the
impression of spaciousness while still ensuring maximum readability,
make sure the status bar has a background that obscures the content
behind it. Here are a few ways to keep scrolling content from showing
through the status bar:
Use a navigation controller to display content. A navigation controller automatically displays a status bar background and it ensures that its content views don’t appear behind the status bar. (To learn more about navigation controllers, see “Navigation
Controllers”.)
Create a nondistracting custom image—such as a gradient—and display it behind the status bar. To ensure that the image stays behind the status bar, you could use a view controller to keep the image above a scrolling view or you could use a scrolling view to keep it pinned to the top.
Position content to avoid the status bar area (that is, the area defined by the app’s statusBarFrame property). If you do this, you should use the window’s background color to provide a solid color behind the status bar.
As the status bar is totally transparent and any content can go on top of it, I just create an empty UIToolbar that is 20px height which just looks like a perfect translucent background for the status bar.
This is not an ultimate solution, but it really helps and it is very easy to implement when you don't need a real tool bar.
Thanks to Apple that they do not provide an option to set the status bar from transparent to translucent.
In Xcode 6, create top, bottom, left, right constrains and set the
- constants to 0
- priorities to 749.
- Don't forget to UNCHECK the "Constrain to margins" check box.
How to create constrains?
At the bottom right of your storyboard window, there's four buttons. The second from your left has the constrains. Please google about constrains in Xcode 6 since it's a kinda new feature.
Hope this help,
I added a Navigation Bar to the .xib.
I did that because I want to customize a lot of things of it. I want my navigation controller to use that navigation bar in that screen.
I created the outlet named navBar and did:
[self.navigationController.navigationBar = navBar;
But it says that navigationBar is readonly. Is it possible to link my existing navigation controller with the navigation bar that I added to the screen?
It sounds to me that you may not actually want to use a UINavigationBar. As it states in the reference documentation:
The UINavigationBar class implements a control for navigating hierarchical content. It’s a bar, typically displayed at the top of the screen, containing buttons for navigating up and down a hierarchy. The primary properties are a left (back) button, a center title, and an optional right button. You can specify custom views for each of these.
So if you're planned customizations go beyond adding buttons, changing it's color / background, opacity, hiding etc.. you might be better off creating a UIView that mimics the look & feel of a navigation bar.
Here's an example of how to give your UIView that gradient look of a navigation bar.
It's far more flexible and actually quite easy to do BUT you've got alot of reading and testing ahead of you :).
Just in case if it's just buttons you're thinking of adding you might be better off using UIToolbar instead
You can't do that. Since the navigation controller's navigation bar has a lot of settings embedded, it's a readonly property and you shouldn't be able to change it.
What exactly are you trying to achieve that you need to do that via interface builder. I mean, with the newest APIs, it should be simple to do everything you want with a few lines of code, by customising the original navcontroller's navbar.
You would not manage a navigation bar in interface builder. Also, you would not try to set the navigationBar property of the navigation controller.
To make changes you would make changes to the navigationItem property of the navigationBar
[self.navigationController.navigationBar setItems:newNavItems];
You can also make other changes to the navigationBar such as setting a background image or making it translucent
self.navigationController.navigationBar.translucent = true;
[self.navigationController.navigationBar setBackgroundImage:img forBarMetrics:barMetrics];