White transparent toolbar, how do I make status bar match - ios

Using xcode6, and storyboarding
I have a toolbar that is at the top of my view. under the toolbar is a mapview. The map view extends under the status bar which is what I want. Basically I want the toolbar and status bar to be a little transparent ~20%, such that you can see the mapview beneath.
I have setup my toolbar's background color to be white 80% opaque. However I have no idea how to get the status bar to be exactly the same thing.
From everything I know, the status bar is 100% transparent, meaning it will show any view that is beneath it. I have tried to add a 20 point tall view above my toolbar, and I have set that to white, 80% transparent. That almost achieves the same effect that I am going for, but there is a black line between the toolbar and the status bar,
Am I even on the right track? How do I make the toolbar color and transparency match the status bar color and transparency and avoid the line?
EDIT:
clipsToBounds worked great at removing the line.
I added a button programmatically:
-(void)splitViewController:(UISplitViewController *)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem *)button forPopoverController:(UIPopoverController *) pc {
button.image = [UIImage imageNamed:#"bars"];
NSMutableArray *items = [self.toolbar.items mutableCopy];
if (!items) {
items = [NSMutableArray arrayWithObject:button];
} else {
[items insertObject:button atIndex:0];
}
[self.toolbar setItems:items];
}
And after I add that button my toolbar background turns back to white:
EDIT 2
So I just discovered the UIBarPositionTopAttached enum and that I can set my view as the toolbars delegate. I did this:
(UIBarPosition)positionForBar:(id )bar {
return UIBarPositionTopAttached;
}
And verified that it was called. I was hoping this would tell iOS that my toolbar is attached to the status bar and that my toolbar color and all would flow into the status bar. Is that not the case either?
Seems like attaching a toolbar to the status bar such that the status bar takes the backgroud of the toolbar should not be this hard, i.e. do I really have to create an extra 20 point high view to achieve this? And even if so seems like I am doing it wrong, as when I add button my toolbar transparency goes back to opaque.

The UIToolbar has a hairline shadow at the top. If you set the bounds clipping property it will hide the line.
toolbar.clipsToBounds = YES;

While clips to bounds works great, I think the right answer to this question use barPosition on toolbar.
There are a couple ways to do this:
Set your view as the delegate to the toolbar and implement this delegate method:
- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
return UIBarPositionTopAttached;
}
Or in a storyboard set a User Defined Runtime Attribute on the UIToolbar:
barPosition Number 3

Related

when navigationBar.isTranslucent is true, the backgroundImage of navigationbar become translucent too

In my first page, the navigation bar should be transparent, and when push to next page, the navigation bar should be a image. I worked it out by changing the _UIBarBackground or _UINavigationBarBackground's alpha.
But I meet a big problem, in the first page, view should be placed and draw from (0,0) so I set the navigation bar's isTranslucent to true, that all works fine. But when I enter the next page, background image shows with a translucent looking which I don't want.
btw, I set background using:
navVC.navigationBar.setBackgroundImage(UIImage(named: "navigation_bar_background"),
for: .default)
I checked the image used here, and it's not translucent.
What can I do with this issue? I don't want set viewController's extendedLayoutIncludesOpaqueBars to true due to ugly appearance when animation.
Combination of these 2 solutions will help.
http://ioscodeguide.blogspot.in/2014/01/navigation-bar-bagground-image.html
http://ioscodeguide.blogspot.in/2014/01/navigation-bar-font-style-and-font.html
In first view:
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.barStyle = UIBarStyleBlackOpaque;
In 2nd view:
Set image to your navigationBar using the following link.
How to set Navigation Bar Bagground image - By - iOSCodeGUIDE
Adding to that
To keep navigation bar transparent in first page and display on 2nd page,
1st Page viewwill appear Hide-Yes NavigationBarHide, and on view did disappear Hide-No

iOS 9 Navigation Bar Tile Background

I have some problems in XCode. I tried to get my navigation bar colored which works perfectly but, the statusbar won't change its color too. I already searched, but nothing works for me.
I hope it is possible to do this without code.
Here is my take on this:
First, iOS gives only two kinds of status bar appearance - light or default.
It is important to note as well that the system status bar no longer
has any background color. When the API refers to
UIStatusBarStyleLightContent, they mean white text on a clear
background. UIStatusBarStyleDefault is black text on a clear
background.
To set status bar white throughout the app:
UIApplication.sharedApplication().statusBarStyle = .LightContent
To set status bar black throughout the app:
UIApplication.sharedApplication().statusBarStyle = .default
Second, As a side note, in your info.plist, you can use UIViewControllerBasedStatusBarAppearance to NOif you want to set the above style at app level (inside your AppDelegate). Otherwise set this property to YES and implement following method in each your view controller to set different styles based on your needs:
override func preferredStatusBarStyle() -> UIStatusBarStyle {
return UIStatusBarStyle.LightContent
}
Third, To have a custom color on your status bar, you can add a UIView of desired colour just below the status bar like this:
UIView *addStatusBar = [[UIView alloc] init];
addStatusBar.frame = CGRectMake(0, 0, screenWidth, 20);
addStatusBar.backgroundColor = [UIColor grayColor]]; //assign here your color
[self.window.rootViewController.view addSubview:addStatusBar];
Fourth, importantly, UINavigationController will alter the height of its UINavigationBar to either 44 points or 64 points based on following points:
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.

iOS7 Side menu status bar color transition. As in the iOS7 Facebook App

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];
}

iOS 7 status bar transparent

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.

remove toolbar from navigation controller

I have a navigation controller where I add a toolbar based on user input.
When the user hits back to the home screen. I don't want the toolbar.
self.navigationcontroller.toolbar.hidden = YES;
This just hides the toolbar and the UIImage on the homepage is now shifted up the 40px and the black background appears where the toolbar is hidden.
How can I REMOVE the toolbar so the image doesn't get pushed up.
self.navigationController.toolbar.hidden = YES;
needed to be replaced with...
self.navigationController.toolbarHidden = YES;
To keep the position of the child VC's frame move it with 40px down (animation with duration 0.25 f.e.), when you hide the toolbar, or change the navigation controllers bounds origin with origin.y+40, just like you would do, when you are hiding the status bar. But i think an empty space will remain, you should do something with it.
For swift you need to write:
self.navigationController?.isToolbarHidden = true

Resources