Apps like Facebook, Instagram and YikYak seem to have a navigation bar that's coloured, and when its swiped, it hides however, the status bar is still there with a background colour thats the same as the navigation bar?
Example:
Facebook Navigation Bar Shown
Then user swipes up (on a tableview or something) then the navigation bar hides but the status bar is still there with a coloured background.
How can I implement this?
I have achieved a coloured Navigation bar with a white status bar that hides on swipe with this code:
// Set Navigation Bar Color
[[UINavigationBar appearance] setBarTintColor:[UIColor colorWithRed:(252/255.0) green:(103/255.0) blue:(105/255.0) alpha:1.0]];
// Set Status Bar Style
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
Now I just need to figure out how to change the status bar's background colour.
I have gotten close with the following code (that I add to my app delegate didFinishLaunchingWithOptions) that adds a coloured view, however it adds the view to the very top of my view controller hierarchy, where as I just want to add the view to my table view controller.
UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0,[UIScreen mainScreen].bounds.size.width, 20)];
view.backgroundColor=[UIColor colorWithRed:(252/255.0) green:(103/255.0) blue:(105/255.0) alpha:1.0];
[self.window.rootViewController.view addSubview:view];
Does anyone know how to ether add this view to just one of my view controllers, or a better way to do this?
I have a container view with two views and a toolbar. In the ContainerViewController I have "deactivated" the shadow of the navigation bar using this code (from Apple's library):
[self.navigationController.navigationBar setShadowImage:[UIImage imageNamed:#"TransparentPixel"]];
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"Pixel"] forBarMetrics:UIBarMetricsDefault];
Also I have implemented the UIToolbarDelegate and its method
- (UIBarPosition)positionForBar:(id<UIBarPositioning>)bar
{
return UIBarPositionTop; //or return UIBarPositionTopAttached;
}
But the shadow of the toolbar is still between the navigation bar and the toolbar and not underneath the toolbar, to separate the toolbar from the content.
Any ideas why the shadow doesn't change? Or how to check, if the toolbar position is position really TopAttached.
Edit:
I try to do something like described in this post: UISegmentedControl below UINavigationbar in iOS 7 without the searchbar.
As explained there, there are two shadows, the one of the navigationbar in the navigationcontroller, that is between navbar and toolbar. And the shadow of the toolbar.
I was able to deactivated the shadow of the navigationbar as described. It works also in the viewDidLoad:
But the shadow of the toolbar is in the wrong position. Using the positionForBar: method it should be in the button of the toolbar, but it stays in the top (between Navbar and Toolbar).
So I am looking for the fault, why it does not change.
You didn't specify what method you tried to change the shadow in, but I'm going to guess that you're trying to do it in viewDidLoad:
Your navigationBar does not actually exist in viewDidLoad, instead change the shadow in viewWillAppear: like this:
-(void) viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[self.navigationController.navigationBar setShadowImage:[UIImage imageNamed:#"TransparentPixel"]];
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"Pixel"] forBarMetrics:UIBarMetricsDefault];
}
I'm running into problems reconfiguring the UINavigationBar on iOS 7 and 8 when transitioning between views.
My application currently contains the following UIViewController flow:
VC1 --> VC2 --> VC3
In this flow
VC1 is the home screen and has an opaque UINavigationBar
VC2 has a translucent UINavigationBar
VC3 goes back to having an opaque UINavigationBar
The problem I've been running into is that the transitions between these views are all very sloppy looking. To start with I tried the following:
in VC2
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// configure appearance
[self.navigationController.navigationBar configureTranslucentAppearance];
}
And in VC1 and VC3
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// configure appearance
[self.navigationController.navigationBar restoreDefaultAppearance];
}
Here are the implementations of the two helper functions listed above:
- (void)restoreDefaultAppearance {
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
[self setTitleTextAttributes:#{NSForegroundColorAttributeName: [UIColor JTTextNavBar]}];
[self setTintColor:[UIColor JTTextNavBar]];
[self setBarTintColor:[UIColor JTBackgroundNavBarWithAlpha:1.0]];
[self setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];
[self setBackgroundColor:[UIColor JTBackgroundNavBarWithAlpha:1.0]];
[self setShadowImage:[UIImage navigationBarShadowImage]];
[self setTranslucent:NO];
}
- (void)configureTranslucentAppearance {
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
[self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[self setBackgroundColor:[UIColor clearColor]];
[self setShadowImage:[UIImage new]];
[self setTranslucent:YES];
}
This is the most basic way of handling this transition. It has the following visual artefacts:
When going from VC1 --> VC2 the moment you begin the transition the navigation bar turns black. The animation completes normally
When going from VC2 --> VC1 the nav bar instantly changes to the application default colour before the segue has time to complete.
When going from VC2 --> VC3 the navigation bar instantly goes from translucent to the app nav bar color and then menu items and VC body animate in.
When going from VC3 --> VC2 the nav bar instantly turns black and remains this way until the segue is complete.
None of these transitions look good at all. Ideally I would like the views to transition smoothly along with their new UINavigationBar but the only way I've seen to do this successfully is to manually add a toolbar to each xib.
Any suggestions? Apologies if this description is confusing :(
Edit: Added cropped images of the UINavigationBar and top portion of UIViewController for each of the listed transitions.
I finally found a decent solution!
There doesn't appear to be a proper way to smoothly transition from an opaque to transparent UINavigationBar BUT you can transition smoothly from a view controller with a visible status bar to one that has a hidden status bar.
This opens up a possible workaround which is to add the following in the viewWillAppear of VC2 from above:
[self.navigationController setNavigationBarHidden:YES animated:YES];
Once you have that, manually add a UINavigationBar to your xib and configure it to be transparent (and add all necessary UIBarButtonItem and views).
If everything is hooked up properly transitioning from VC1 to VC2 will hide the UINavigationBar at the same speed as the view transition and VC2 will show up with it's embedded UINavigationBar
Note: To make this work properly you'll have to make sure that in the viewWillAppear of View Controllers that can be accessed from VC2 you reset the UINavigationBar to be visible (if necessary) via:
[self.navigationController setNavigationBarHidden:NO animated:YES];
TL;DR - manually add a UINavigationBar to your transparent nav bar view controller and in its viewWillAppear hide the default one via setNavigationBarHidden:animated:
The black color you're seeing is the background color of the UINavigationController's view. One way to minimize seeing it is to manipulate the background color of that view to the color of the outgoing / incoming view controller's view. This works well if you're working with solid colors. Another approach is to extend your views behind the opaque navigation bar using UIViewController.extendedLayoutIncludesOpaqueBars = YES;
Set the UIWindow background color to your Navigation bar's tintColor.
always use Translucent, plus add an uiview with a color below it and animate it's alpha?
I've struggled with a nearly identical problem. There really aren't any smooth transitions using either a nav bar or toolbar as a blur. The best option that I've found* is to make an image out of the view and then use that image for the transition. Especially if you just need it for transitions, it's just about the cheapest option that still provides a great UI/UX.
*The one caveat is that some of the UI effects in a nav bar and toolbar don't show up when you take a snapshot, screenshot, or rasterize a UIView as an image. This is negligible if used for a transition.
You can create your own navigation bar using just a UIView and that way you have complete control over its appearance, layout, fading etc.
I gave up using UINavigationBar a while ago as it can be a pain to work with, as you are discovering, and now I never ever use it.
I have a root view controller which has a UIView which represents the navigation bar. If I want to do something like add a back button, change the color, show the navigation bar or hide it, change the transparency, etc. that is all controlled by the RVC and other view controllers call methods on the RVC to change the navigation bar depending upon their appearance requirements.
The RVC has a container view which is the full size of the controller view and the other view controllers get loaded into that.
A little bit of configuration to get everything set up, but once done its a structure that can be used in every project that uses a navigation bar very quickly.
So I struggled with this too.
Unfortunately I didn't have any success adding my own navigation bar via the storyboard. Instead, (and I warn you this is hacky) I add a view in the ViewController with the opaque navigation bar that has a negative margin and extends under the navigation bar.
When the ViewController with the transparent navigation bar is pushed the bar then immediately becomes transparent but due to the identically coloured view I have place directly behind it the change isn't noticeable. Et voila.
The code I have is pretty basic and written in C# (Xamarin) but for reasons of completeness....
var backing = new UIView(new CGRect(0, -68, this.View.Frame.Width, 64f));
backing.BackgroundColor = UIColor.Green;
this.View.AddSubview(backing);
Change background color work for me
window?.backgroundColor = Color.red.toUIColor()
I have one more solution..for the ones who are now refactoring the project and cant add navigation bar everywhere.. This is not a perfect solution just like #alexgophermix one. But its not bad either:
let transition = CATransition()
transition.duration = 0.6
transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
transition.type = kCATransitionFade
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.isTranslucent = true
navigationController?.navigationBar.layer.add(transition, forKey: nil)
navigationController?.view.backgroundColor = .clear
I am setting my nav bar in viewDidLoad() so this works everywhere and gives a slight different transition. In my case I was setting clear backgrounds somewhere and rest a gradient image. So this small change goes well for everywhere. This transition is not much noticeable but neither looks bad :)
In my case, the black I was seeing was the navbar's background image. Instead of setting it to nil, I set it to match the background color of the view behind the transparent navbar inside viewWillAppear:
let image = UIImage(color: .white)
navigationController?.navigationBar.setBackgroundImage(image, for: .default)
Then, inside willMove and viewWillDisappear I reverted it back to the original color.
YPNavigationBarTransition is a configureable framework animating navigation bars.
YPNavigationBarTransition uses two fake navigationbars (UIToolBar indeed) to simulate bar transitions while making the real navigationbar transparent.
Subclass your own UINavigationController and embed transitioncenter in it like YPNavigationController
Implement YPNavigationBarProtocol for your content controllers respectively.
Done.
A complete demo is include in the repo, checkout it for more details.
I'm hiding the navigationbar on a certain view, and when the user presses a button on the view, i'm pushing it to the next view.
In the next view, I am not longer hiding the nav bar and as expected it becomes visible. When hitting back however, the navbar on the first view also becomes (somehow) visible.
I'm hiding the top navbar like this:
self.navigationController.navigationBar.hidden = YES;
And I'm making it visible like this:
self.navigationController.navigationBar.hidden = NO;
I wonder what could be wrong with this, as it's quite basic but somehow has a glitch.
In Parent VC's viewWillAppear method hide the navigation bar.
-(void)viewWillAppear:(BOOL)animated {
self.navigationController.navigationBar.hidden = YES;
}
I have a table view A which is segued to a view B.
In A, there is a nav bar on the top, and below is the table.
When I press a row in A's table, B is pushed.
In B's viewWillAppear, I have the following code.
-(void)viewWillAppear:(BOOL)animated
{
self.wantsFullScreenLayout = YES;
[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent;
}
This makes extends the view so that below the status bar, I have Nav bar and the UIView overlapped.
I also have viewWillDisappear
-(void)viewWillDisappear:(BOOL)animated
{
if ([self.navigationController.viewControllers indexOfObject:self]==NSNotFound) {
// back button was pressed. We know this is true because self is no longer in the navigation stack.
self.wantsFullScreenLayout = NO;
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"navigationbar_bg.png"] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.translucent = NO;
}
}
So when the user press back button, it will undo the fullscreen mode so that the view and nav bar won't overlap. THE ISSUE IS, when I press back button and the previous screen A is shown, strangely the table view still appears overlapped with the nav bar.
I even tried to put self.wantsFullScreenLayout = NO in A's willViewAppear but to no avail.
Shouldn't A shrink the tableview and be located under Nav bar? Can anyone let me know what is worng and how to solve this issue?
Thanks in advance!
Instead of putting the code in viewWillDisappear method, try to put the same code in the viewWillAppear method of the previous view controller.