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?
Related
at First:
I work with the storyboard interface builder...
I tried to color my navigation bar like Instagram:
UIColor *mainColorBlue = [UIColor colorWithRed:0.071 green:0.337 blue:0.533 alpha:1];
[[UINavigationBar appearance] setBarTintColor:mainColorBlue];
[[UINavigationBar appearance] setBackgroundColor:mainColorBlue];
But if i set the color to mainColorBlue, it is not this color. I've read in the internet, that it is cause from translucent. So I set translucent to OFF.
But now, my Problem is: If i deactivate the translucent and activate opaque and start the app on my external device, under the navigation bar is another navigation bar. If i switch the translucent to ON again,the second navigation bar isn't shown.
What i have to do, that the second navigation bar disappear?
I resolve the problem.
I added a subview on position 0,0 to color the statusbar.
UIView *statusBarColor = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 64)];
statusBarColor.backgroundColor = mainColorBlue;
[self.view addSubview:statusBarColor];
So this View is displayed under the navigation bar. I removed this code and now it works.
I ran into this issue in iOS 8 where the wrong background image for the navigation bar is displayed in any of these situations:
the view controller-based status bar appearance is set to YES (default) and the navigation controller is presented modally.
the view controller-based status bar appearance is set to NO and the status bar is initially hidden. In this case, the navigation controller does not need to be presented modally to display the wrong image.
To isolate the problem where the view controller-based status bar appearance is set to YES (default) and the navigation controller is presented modally I created a test project from scratch following these steps:
Create a new project with the "Master-Detail Application" template.
Open Main.storyboard and add a Navigation Controller to it. Remove its root view controller and connect the Master View Controller with a modal segue. Then connect the Detail View Controller as its root view controller. You should end up with something like this:
Customise the navigation bar background via the appearance proxy. Use two different images for portrait (UIBarMetricsDefault) and landscape (UIBarMetricsCompact). I used a category on UIImage to create the images from solid colors.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor redColor]] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor blueColor]] forBarMetrics:UIBarMetricsCompact];
return YES;
}
Run the app. The Master view controller displays the right navigation bar background images for portrait and landscape orientations:
Now present the Detail view controller modally. To do so, tap on the "Add" button and then select the newly created row. The Detail view controller displays the right navigation bar background image.
Rotate the interface. The Detail view controller will not change the navigation bar background image (wrong):
Rotate the interface back to its original orientation. The Detail view controller will change the navigation bar background image (wrong):
Has anyone else struggled with this?
Yes,I have been struggling with this, after I add "View controller-based status bar appearance" in target's plist file, it is working again on iOS 8, remember to set it to NO.
In MasterViewController, add this to avoid wrong background image when detailViewController is dismissed. It basically set the same appearance again.
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor redColor]] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageWithColor:[UIColor blueColor]] forBarMetrics:UIBarMetricsCompact];
}
UIImage *gradientImage46 = [[UIImage imageNamed:#"navbar.png"]resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[UINavigationBar appearance] setBackgroundImage:gradientImage46
forBarMetrics:UIBarMetricsDefault];
I am using this to customize the appearance of my navigation bars in my app. However, this is causing the status bar to be solid black, showing nothing...time, carrier, battery, etc. Is this a bug, or did I implement this incorrect?
I have this running in a tab bar using MainWindow.xib method for interface. The first tab is just a navigation controller with a view controller inside it. Another tab is a Navigation Controller with a TableView Controller inside. If I go from one tab to the table view, and then back, the status bar appears.
The navbar.png is 320 x 44 pixels.
I also have this problem bringing my app from iOS 6 to iOS7, I solved by changing the code in this way:
instead
[UINavigationBar appearance] setBackgroundImage:gradientImage46
forBarMetrics:UIBarMetricsDefault];
i use
-(void) viewWillAppear:(BOOL)animated {
[self.navigationController.navigationBar setBackgroundImage:gradientImage46 forBarMetrics:UIBarMetricsDefault];
}
I have a view controller, in which the navigation bar is transparent. My next view is a table view, in which the navigation bar is white.
To stop an unwanted animation carrying over, I am setting the navigation bar to transparent in the 'viewDidDissapear' of the table view. Unfortunately this leaves me with the image below when I navigate back (its even worse when you navigate forward). Does anyone know how to get rid of the black area?
-(void)viewWillDisappear:(BOOL)animated {
[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.translucent = YES;
[super viewWillDisappear:NO];
}
This is the code I'm using in the table view controller.
As you said, UNWANTED ANIMATIONS ,. i would suggest you to set (animated:NO) in both (presentViewController & dismissViewController) of your tableViewController……… and set your navigation bars in viewWillAppear of both controllers.. best and easy i think..
The iOS7 Facebook App has a right side menu that can be shown by swiping right to left or clicking on the upper right button. When this menu is opened the there is a color transition in the entire status bar from blue to black and vice-versa when closed.
This image shows both status bar side-to-side
This looks like a very good solution for iOS Apps with side menus.
Any ideas or ways about how to accomplish this?
I am currently using JASidePanels.
Thanks!
I managed to find a very simple, elegant way to do this, that mimics the Facebook app functionality perfectly.
Here's my approach:
Create view with status bar frame
Set view background color to black, opacity to 0
Add view as subview to any root view (you need a view that will cover both the center view and the menus, so that it won't be confined to any single view - a good option for this is the container view controller used by your menu controller implementation)
Set view's opacity in your menu controller implementation's menu animation method
Here's my specific implementation, using MMDrawerController:
I subclassed MMDrawerController (I actually already had a subclass for using MMDrawerController with storyboards), and added this code to the class's init method:
// Setup view behind status bar for fading during menu drawer animations
if (OSVersionIsAtLeastiOS7()) {
self.statusBarView = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
[self.statusBarView setBackgroundColor:[UIColor blackColor]];
[self.statusBarView setAlpha:0.0];
[self.view addSubview:self.statusBarView];
}
// Setup drawer animations
__weak __typeof(&*self) weakSelf = self; // Capture self weakly
[self setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) {
MMDrawerControllerDrawerVisualStateBlock block;
block = (drawerSide == MMDrawerSideLeft) ? [MMDrawerVisualState parallaxVisualStateBlockWithParallaxFactor:15.0] : nil; // Right side animation : Left side animation
if(block){
block(drawerController, drawerSide, percentVisible);
}
[weakSelf.statusBarView setAlpha:percentVisible]; // THIS IS THE RELEVANT CODE
}];
I also added self.statusBarView as a private property.
The first section of code creates a view, configures it, and adds it as a subview of the MMDrawerController subclass's view. The OSVersionIsAtLeastiOS7() method is a custom method that simplifies the check to see if the device is running iOS 7 (if it isn't, your custom view will show up below the status bar, which you don't want).
The second section of code is MMDrawerController's setDrawerVisualStateBlock method, which sets the animations code to be performed when a menu is being opened and closed. The first few lines of code are boilerplate code that sets one of the prebuilt animations blocks to each menu (I wanted parallax on the left, but nothing on the right). The relevant code is the last line of the block: [weakSelf.statusBarView setAlpha:percentVisible];, which sets the status bar view's opacity to match the percentage that the menu is currently open. This allows for the smooth cross animation you see in the Facebook app. You'll also notice I've assigned self to a variable weakSelf, so as to avoid the "retain cycle" compiler warning.
This is my specific approach using MMDrawerController and a subclass, which I did more for convenience because I already had the subclass in place, than because it is necessarily the best approach or the only way to do it. It could probably be implemented in several other ways, using MMDrawerController without a subclass, or using any other side-drawer menu implementation.
The ending result is a smooth fading to black animation behind the status bar, exactly as you see in the new Facebook app.
I've been trying to accomplish the same thing. The method I am using to do this is based on the following concepts:
A background image with a height of 64 points will fill both the
UINavigationBar and the UIStatusBar.
A background image with a height of 44 points will fill the UINavigationBar and leave the
UIStatusBar black.
You can add an subview to the top of the current navigationController's view and it will sit underneath the UIStatusBar.
So, first, you need to create two images with your desired UINavigationBar look:
A 640x128px image to cover navigation bar and status bar (ImageA)
And a 640x88px image to cover the navigation bar but leave the status bar black (ImageB).
In the application:didFinishLaunchingWithOptions: method, set the background of your UINavigationBar with ImageA with [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"ImageA.png"] forBarMetrics:UIBarMetricsDefault];
When the side menu starts to open, you are going to want switch the UINavigationBar so it uses ImageB and create a view which you will add underneath the UIStatusBar. Here is some sample code for doing just that:
// Add a property for your "temporary status bar" view
#property (nonatomic, strong) UIView *temporaryStatusBar;
And in the code where the side menu starts to open:
// Create a temporary status bar overlay
self.temporaryStatusBar = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
self.temporaryStatusBar.backgroundColor = [UIColor yourColor];
[self.navigationController.view addSubview:self.temporaryStatusBar];
// Update both the current display of the navigationBar and the default appearance values
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:#"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setNeedsDisplay];
As the side menu animates open, or as the user pans the menu, all you need to do then is adjust the alpha level of the UIStatusBar overlay. When the side menu is fully open, the UINavigationBar should have ImageB as its background image and the UIStatusBar overlay should have an alpha of 0. When the side menu closes, you'll want to replace the UINavigationBar background with ImageA and remove the UIStatusBar overlay.
Let me know if this works for you!
You can use this awesome slide menu library
https://github.com/arturdev/AMSlideMenu
In this demo project you can see how to do that by writing 4 lines of code.
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
// Setting navigation's bar tint color
self.navigationController.navigationBar.barTintColor = [UIColor colorWithHex:#"#365491" alpha:1];
// Making view with same color that navigation bar
UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 20)];
statusBarView.backgroundColor = [UIColor colorWithHex:#"#365491" alpha:1];
// Replace status bar view with created view and do magic :)
[[self mainSlideMenu] fixStatusBarWithView:statusBarView];
}