I want have a custom navigationbar .But there is a white space between navigationbar and status bar.The code is below:
#implementation UINavigationBar (CustomImage)
- (void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed: #"NavigationBar.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
#end
Thank you for your help!
Do not override methods in categories.
Do NOT override metods in categories.
DO NOT OVERRIDE METHODS IN CATEGORIES.
Now that that is out of the way.
This just means that your image has the white line in it, or your navigation bar is placed incorrectly.
The problem may not be necessarily in navigation bar. The frame of the navigation controller or view controller may not have been set properly.
There are chances that the navigation controller or view controller leaves space for status bar or navigation bar without having any idea about whether they are already there or not.
Make sure you are creating the navigation controller or view controller with proper frames.
Related
AS you can see in the image below, Twitter use different navigation bar color for each view-controller that is pushed.
I've tried almost everything (setbackgroundimage, backgroundcolor, bartintcolor, etc) but nothing seems to work. What i think is that Twitter use custom transition to SIMULATE the push, because, what it seems to me is that every view-controller is presented has his own navigation bar with his own color.
If you want to handle navigationBar with different barTintColors, Code School had a tutorial about it. (iOS App: Creating a Custom Nav Bar)
It could also extended to different backgrounds by using setBackgroundImage:forBarMetrics: method.
There are following four steps:
Handle this in viewWillAppear of the source view controller, hide the navigationBar that navigationController provided and create a new navigationBar to the superView.
- (void)styleNavBar
{
// 1. hide the existing nav bar
[self.navigationController setNavigationBarHidden:YES animated:NO];
// 2. create a new nav bar and style it
UINavigationBar *newNavBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 64.0)];
[newNavBar setTintColor:[UIColor whiteColor]];
// 3. add a new navigation item w/title to the new nav bar
UINavigationItem *newItem = [[UINavigationItem alloc] init];
newItem.title = #"Source";
[newNavBar setItems:#[newItem]];
// 4. add the nav bar to the main view
[self.view addSubview:newNavBar];
}
Do the same trick in viewWillAppear of the destination view controller, and create a backBarButtonItem as new navigationBar'sleftBarButtonItem.
- (void)styleNavBar
{
[self.navigationController setNavigationBarHidden:YES animated:NO];
UINavigationBar *newNavBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 64.0)];
[newNavBar setTintColor:[UIColor blueColor]];
UINavigationItem *newItem = [[UINavigationItem alloc] init];
newItem.title = #"Destination";
// BackButtonBlack is an image we created and added to the app’s asset catalog
UIImage *backButtonImage = [UIImage imageNamed:#"BackButtonBlack"];
// any buttons in a navigation bar are UIBarButtonItems, not just regular UIButtons. backTapped: is the method we’ll call when this button is tapped
UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithImage:backButtonImage
style:UIBarButtonItemStylePlain
target:self
action:#selector(backTapped:)];
// the bar button item is actually set on the navigation item, not the navigation bar itself.
newItem.leftBarButtonItem = backBarButtonItem;
[newNavBar setItems:#[newItem]];
[self.view addSubview:newNavBar];
}
Fill out the backTapped: method so that user is able to tap-to-popover from destination view controller.
- (void)backTapped:(id)sender
{
[self.navigationController popViewControllerAnimated:YES];
}
Considering the swipe-to-pop situation, setting the gesture recognizer’s delegate to self in viewWillAppear of the destination view controller. (The author: The solution here is a bit of a hack.)
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[self styleNavBar];
__weak id weakSelf = self;
self.navigationController.interactivePopGestureRecognizer.delegate = weakSelf;
}
This for swift3 :
You can set the original navbar background with an empty image:
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
With this all of the others VC in the view hierarchy will adopt an transparent nav bar.
In the other VC if you want to set an custom image or a custom color simply put a background view in the position of the navbar, this in the view did load method of the particular view controller.
let viewNavBar = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 64))
viewNavBar.backgroundColor = UIColor.white
view.addSubview(viewNavBar)
Whit this you can set any background or image inside the viewNavBar and don't mess with the overall configuration of the navigation bar.
Twitter doesn't change the navigation bar colour. When you're looking at a user's profile, it's a blurred version of the user's cover photo.
As you can see in the transition, the whole user profile view replaces the previous view. The navigation bar doesn't change, it is replaced. They might not even use a UINavigationBar (or at least not the one from the navigation controller).
The "bar" is a custom view that shows the user's cover photo, with the back/search/tweet buttons appearing in their usual positions. The user's cover photo shrinks, blurs and attaches to the top of the screen when you have scrolled down - and at this point, it looks like a normal navigation bar. The user's name and tweet count also scrolls up to the center of the navigation bar at this point.
It's quite intriguing, and their whole view structure for a user's profile probably uses a bunch of tricks. But it's not exactly a simple task to imitate their profile view, and they do much more than just change the tint of their navigation bar. If you just want to do this, Undo's answer works well. However, you may also have to reset the tint colour in your viewWillAppear method (of the old and new views).
Try look up this GitHub repo, I think it could help you achieve that effect https://github.com/kingiol/KDInteractiveNavigationController
I am trying to add Navigation Bar to a UITableViewController without using NavigationController.
So in viewDidLoadMethod of MyUITableViewController, I create a Navigation Bar using CGRect.
UINavigationBar * navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 30, 320, 50)];
Then I present MyUITableViewController from MainViewController
[self presentViewController:controller animated:YES completion:Nil];
At this point my MyUITableViewController is overlapping with NavBar
I was thinking of creating tableViewController with initWithFram(x, y, width, height) to compensate for NavBar.
But I was not sure what height I should use and how to come up with a value. Would it have the correct scroll behavior??
What is the right way? Please note at this point I do not want to use Navigation Controller.
Is it possible w/o Navigation Controller.
Try not to use UITableViewController, but use simply UIViewController, add a UITableView object on it, and also implement the 2 protocols for table views.
You can resize the table view as you need, you can set its origin Y coordinate to 44 or 64 if you also need the status bar visible.
You can add a UINavigationBar object on top of it.
I hope doing this will help you solve the problem.
I have a UITableViewController with a UISearchBar and UISearchDisplayController. That exists inside a Container View in a UIViewController which is in a UINavigationController. I made this image to help describe the structure:
This is what it really looks like:
When I tap the Search Bar, I have to hide the Nav Bar. Normally, this would happen on its own, but since my UITableViewController is inside a Container View, I have to handle that change myself. This is what it looks like then, note that the Status Bar is white because the Nav Bar is white, even though it is Hidden at the moment.
Once I start typing in some search text, the results show up. If I scroll those results upward, they pass underneath the Search Bar, but they overlap the Status bar which is very unattractive.
If the Container View isn't involved, then this all works as intended and the table content passes underneath the Status Bar, but with the ContainerView involved, the table text and status bar collide.
How do I get the text to travel under the Status Bar like normal?
I have search this for hours and my final result was to put this line in viewDidLoad:
self.extendedLayoutIncludesOpaqueBars = YES;
Problem solved :)
Try setting the definesPresentationContext in viewDidLoad of your TableViewController
Swift
override func viewDidLoad() {
super.viewDidLoad()
definesPresentationContext = true
}
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
self.definesPresentationContext = YES;
}
Here's what worked for me:
DO:
Use UISearchController (not a separately placed UISearchBar)
Place your VC in a UINavigationController if it isn't already. Set the nav not to "Show Navigation Bar" if desired.
Use autolayout for the UITableView (not springs and struts) and pin the top of the table to the top of the VC's view.
Add this delegate method:
- (UIBarPosition)positionForBar:(id<UIBarPositioning>)bar {
return UIBarPositionTopAttached;
}
DON'T:
Fiddle with edgesForExtendedLayout
Fiddle with extendedLayoutIncludesOpaqueBars
Fiddle with the table's contentInset
Basically this is due to the traslucency of the nav bar, usually the view controller fix that overlapping, by correcting the top insets of the owned view or subview if they are(or inherits) from UIScrollView. You have 2 options, one is to set the traslucency of the navbar to no, the other is set the edgeForExtendedLayout to none ore leave only bottom.
- (void)searchDisplayControllerWillBeginSearch:(UISearchDisplayController *)controller {
self.navigationController.navigationBar.translucent = YES;
}
- (void)searchDisplayControllerDidEndSearch:(UISearchDisplayController *)controller {
self.navigationController.navigationBar.translucent = NO;
}
These advices works only on iOS7, if you are deploying on lower target check before settings those properties.
Another way around, but I didn't tested could be read the --topLayoutGuide length and in the -searchDisplayControllerWillBeginSearch try to set a topInsets of the same length. In this way you should still preserve the translucency.
I have UISearchBar and UISearchDisplayController.
In viewdidload:
self.edgesForExtendedLayout = UIRectEdgeNone;
[searchDisplayController.searchBar setBackgroundImage:[self imageWithColor:ETSBaseColor] forBarPosition:0 barMetrics:UIBarMetricsDefault];
method that obtain image from UIColor:
- (UIImage *)imageWithColor:(UIColor *)color
{
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
I had the same problem:
- (void)searchDisplayControllerWillBeginSearch:(UISearchDisplayController *)controller
{
controller.searchBar.searchBarStyle = UISearchBarStyleDefault; // Used to cover UIStatusBar
}
- (void)searchDisplayControllerWillEndSearch:(UISearchDisplayController *)controller
{
controller.searchBar.searchBarStyle = UISearchBarStyleMinimal; // Used not to show top and bottom separator lines
}
In my case I don't want to hide the UINavigationBar but I had similar problems with gapes and other side effects. One of them was a missing UISearchBar after switching between UIViewControllers while the UISearchDisplayController is visible (I'm using SWRevealViewController to switch between UIViewController). This problem occurs only on iPads. It came out that the UISearchBar suddenly hides behind the UINavigationBar. Now I solved all my Problems with the following lines of code in the UITableViewController which is presented in a UIContainerView:
- (UINavigationController *)navigationController {
return nil;
}
Those lines prevent the UISearchDisplayController to reach and change my UINavigationController. I also subclassed this method into "MyContainerTableViewController" class and use this class now for all embedded UITableViewController.
I'm still using UISearchDisplayController to Support iOS 7.
The following hack worked for me:
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return (self.searchController.isActive && section == 0) ? 22.0f : 0.0f;
}
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.
To customize my navigation bar, I did several steps:
create a subclass which inheriting from UINavigationBar class, do some customization like draw shadow or setting background image for the navigation bar.
create an empty xib file, which contains nothing but a navigation view controller.
set the class name for the navigation bar in the navigation view controller.
Everything works fine, but when I want to add another customized back button on the navigation bar, I tried to attach a UIBarButtonItem to the navigationItem.backbarbuttonitem, I have no idea how to get the navigationItem from the UINavigationBar subclass.
code sample:
// header file
#interface MyNavigationBar : UINavigationBar
#end
// implementation file
#implementation MyNavigationBar
-(void)drawRect:(CGRect)rect
{
// background image
UIImage* background_image = [UIImage imageNamed:#"my-navigation-bar.png"];
[self setBackgroundImage:background_image forBarMetrics:UIBarMetricsDefault];
// draw shadow
self.layer.masksToBounds = NO;
self.layer.shadowOpacity = 0.6;
self.layer.shadowOffset = CGSizeMake(0, 3);
}
#end
Is there any way to get the navigationItem entry in my customized UINavigationBar subclass, or I just did it the wrong way? :P
thanks :)
you can hide the uinavigationbar. then put a uiview which can have height and width of uinavigationbar. and then add as many as buttons can fit or you want. add uiimage to the view. you will have a nice customized uinavigation bar. you can mimic the back button by using popviewcontroller or poptorootviewcontroller.