I'm building an app with a custom navigation bar. After some research I decided to do this using a category on UINavigationBar. The navigation bar needs to be a bit larger than usual to accomodate a drop shadow. Here is the code:
#import "UINavigationBar+CustomWithShadow.h"
#implementation UINavigationBar (CustomWithShadow)
- (void)drawRect:(CGRect)rect {
// Change the tint color in order to change color of buttons
UIColor *color = [UIColor colorWithHue:0.0 saturation:0.0 brightness:0.0 alpha:0.0];
self.tintColor = color;
// Add a custom background image to the navigation bar
UIImage *image = [UIImage imageNamed:#"NavBar.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, 60)];
}
- (void)layoutSubviews {
self.frame = CGRectMake(0, 20, self.frame.size.width, 60);
}
#end
The only problem now is that the larger navigation bar means that the navigation bar buttons end up too far down, like so:
Does anyone know how I can correct the position of the buttons?
Thanks for all help!
Update:
I add the buttons to the nav bar in the init method of the view controller like so:
// Create "Add" button for the nav bar
UIBarButtonItem *addButton = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
target:self
action:#selector(createNewEntry:)];
[[self navigationItem] setRightBarButtonItem:addButton];
[addButton release];
You'll need to add the leftBarButtonItem and rightBarButtonItem as custom items and mess with the frames.... for example:
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0,5,buttonImage.size.width,buttonImage.size.height)];
[button setBackgroundImage:buttonImage forState:UIControlStateNormal];
[button addTarget:delegate action:#selector(barButtonPressed:) forControlEvents:UIControlEventTouchUpInside];
[button setTitle:titleString forState:UIControlStateNormal];
[button setTitleColor:CUSTOM_BAR_BUTTON_TITLE_COLOR forState:UIControlStateNormal];
[[button titleLabel] setFont:[UIFont boldSystemFontOfSize:14]];
[[button titleLabel] setShadowColor:CUSTOM_BAR_BUTTON_SHADOW_COLOR];
[[button titleLabel] setShadowOffset:CGSizeMake(0,-1)];
UIBarButtonItem *barButton = [[UIBarButtonItem alloc] initWithCustomView:button];
[button release];
[[self navigationItem] setRightBarButtonItem:barButton];
[barButton release];
Try adding the buttons to the nav bar in the viewDidLoad method of the view controller instead.
My solution, not the best, but it works for me fine. My custom navigation bar has height 55 (default height is 44). I cut from my custom navigation bar only 44 of height and insert it to the navigation bar. Then I cut next part of my custom navigation bar (shadows etc.) and insert it as image view under the navigation bar. And that's it. Buttons are at right places...
Related
I have a UICollectionView that displays image thumbnails. When clicked, the thumbnails call another view, wallpaperView, to show the image in full size.
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
// ...insert the usual row number check here
UIViewController *wallpaperView = [QUOWallpaperViewController new];
[self.navigationController pushViewController:wallpaperView animated:YES];
}
(The UICollectionView itself is the root view controller of a UINavigationController object, as per usual)
Now, in wallpaperView, I want to hide the navigation bar, and display my own custom button. I have already found a solution here.
Following the top answer there, I put this code in wallpaperViewController.m:
- (void)viewWillAppear:(BOOL)animated
{
[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];
}
However, this does not work. The navbar still shows up as usual. Does anyone know why this is the case?
if you need to show your own button as bar button on navigation then there is no need to hide navigationbar i've gone through your code and made some modifications just use this one and do not hide navigation bar ok.
UIImage* image3 = [UIImage imageNamed:#"mail-48_24.png"];
CGRect frameimg = CGRectMake(0, 0, image3.size.width, image3.size.height);
UIButton *someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:image3 forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(sendmail) forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];
UIBarButtonItem *mailbutton =[[UIBarButtonItem alloc] initWithCustomView:someButton];
self.navigationItem.rightBarButtonItem=mailbutton;
[someButton release];
self.navigationController.navigationBar.translucent = YES; // Setting this slides the view up, underneath the nav bar (otherwise it'll appear black)
const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];
[self.navigationController.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault];
//remove shadow
[[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
Try by hiding navigation controller
Inside the viewDidLoad method for your class QUOWallpaperViewController
write
[self.navigationController setNavigationBarHidden:YES animated:YES];
You can write this code in ViewDidLoad method.
self.navigationController.navigationBarHidden=YES;
I am trying to set the tint color of the back button within a navigation controller, but nothing is working. I have tried
[self.navigationController.backBarButtonItem setTintColor:myColor];
//myColor was previously set
But it stays the default tint
I believe barButtonItem is read-only. (I'm not too sure about this, someone correct me if I'm wrong)
To give a tint colour to these buttons, this is what I would do:
In your App Delegate, add these lines of code:
UIBarButtonItem *barButtonAppearance = [UIBarButtonItem appearance];
[barButtonAppearance setTintColor:[UIColor redColor]]; // Change to your colour
The first line sets an appearance proxy, so I believe this works too, if you like less code:
[[UIBarButtonItem appearance] setTintColor:[UIColor redColor]];
I hope this works for you! (This changes all instances of UIBarButtonItem)
You can't change the tint color of UINavigationItem directly. You have to change the tint color of navigation bar and your bar button will automatically change its color.
Add these lines in your viewWillAppear method
[[self.navigationController navigationBar] tintColor] = [UIColor myColor];
Or You can create a custom button and initialize your UIBarButtonItem as
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:yourUIButton];
This worked for me.
[self.navigationController.navigationBar setTintColor:[UIColor redColor]];
It is very similar to the second answer...
If you prefer to do it in Interface Builder without writing code:
Select your UINavigationBar (inside UINavigationController)
In Attributes Inspector, find "Tint" - this is what sets Back Button color. Note that "Bar Tint" is not the same - this sets Navigation Bar background color.
It is important to set Back Button appearance this way, and not try to implement leftBarButtonItem, because implementing leftBarButtonItem will disable the built-in back navigation gestures, like swipe to go back.
Swift way:
It changes all items in the nav.
In AppDelegate do something like this:
let navControl = UINavigationBar.appearance()
navControl.tintColor = UIColor.grayColor()
Well you can certainly change the color of just the Back Button or perhaps any Bar Button on the Navigation bar. Here's a small snippet to do it.
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonItemStylePlain target:self action:nil];
backButton.tintColor = [UIColor blackColor];
[self.navigationItem setBackBarButtonItem:backButton];
[backButton release];
Well this is just one of the ways for doing this.
I hope this helps!! I know the answer for it is already accepted, but I thought to give a proper snippet to it.
Cheers!!! Happy Coding!!
If you want to set it to predefined style you can use
[navigationBar setBarStyle: UIBarStyleBlack];
Place the following code in AppDelegate that will set color for Back button globally
//Set color of BackButtonItem globally
[[UIBarButtonItem appearance] setTintColor:[UIColor colorWithRed:5.0/255.0
green:127.0/255.0 blue:173.0/255.0 alpha:1.0]];
This is supported in iOS 5 and above
It always work for me:
self.navigationItem.leftBarButtonItem = [self logicToAddBackButton];
GET DEFAULT BACK BUTTON
-
(UIBarButtonItem*) logicToAddBackButton
{
UIImageView *imageView;
// [imageView setTintColor:[UIColor redColor]];
UILabel *label=[[UILabel alloc] init];
if (WHITEBACK) {
imageView =[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"UiNavigationBackIPAD"]];
[label setTextColor:[UIColor whiteColor]];
}else{ //DEFAULTBACK
imageView =[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"UiNavigationBack"]];
[label setTextColor:[UIColor colorWithRed:0.0 green:122.0/255.0 blue:1.0 alpha:1.0]];
}
[label setText:#"Back"];
[label sizeToFit];
int space=6;
label.frame=CGRectMake(imageView.frame.origin.x+imageView.frame.size.width+space,
label.frame.origin.y, label.frame.size.width,
label.frame.size.height);
UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0, label.frame.size.width+imageView.frame.size.width+space,
imageView.frame.size.height)];
view.bounds=CGRectMake(view.bounds.origin.x+8, view.bounds.origin.y-1, view.bounds.size.width,
view.bounds.size.height);
UIButton *button=[[UIButton alloc] initWithFrame:CGRectMake(view.bounds.origin.x, view.bounds.origin.y,
view.bounds.size.width, view.bounds.size.height)];
button.bounds=CGRectMake(view.bounds.origin.x, view.bounds.origin.y, view.bounds.size.width,
view.bounds.size.height);
[button addTarget:self action:#selector(eventBack) forControlEvents:UIControlEventTouchUpInside];
[button addSubview:imageView];
[button addSubview:label];
[UIView animateWithDuration:0.33 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
label.alpha = 0.0;
CGRect orig=label.frame;
label.frame=CGRectMake(label.frame.origin.x+25, label.frame.origin.y -5, label.frame.size.width,
label.frame.size.height+10);
label.alpha = 1.0;
label.frame=orig;
} completion:nil];
UIBarButtonItem *backButton =[[UIBarButtonItem alloc] initWithCustomView:button];
return backButton;
}
BACK BUTTON ACTION
(void)eventBack
{
[self.navigationController popViewControllerAnimated:YES];
}
UiNavigationBack Image (Please change colour of image as require with same size [25X41 144pixels/inch] to get
default look)
What worked for me was this :
self.navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor textPrimaryColor] forKey:NSForegroundColorAttributeName];
I am able to give image to navigation bar and also changed image of navigation bar button item. For some reason navigation bar image, i guess, overlapped over navigation bar button image. Navigation bar button is functioning right when i click on navigation bar image at left but its not displaying over navigation bar image. here is the code ;
UIImage *imagebar = [UIImage imageNamed: #"schedule-strip.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage: imagebar];
imageView.frame = CGRectMake(0, 0, 190, 44);
imageView.contentMode = UIViewContentModeScaleAspectFill;
self.navigationItem.titleView = imageView;
UIImage* image = [UIImage imageNamed:#"back-icon.png"];
CGRect frame = CGRectMake(0, 0, image.size.width, image.size.height);
UIButton* someButton = [[UIButton alloc] initWithFrame:frame];
[someButton setBackgroundImage:image forState:UIControlStateNormal];
[someButton setShowsTouchWhenHighlighted:YES];
[someButton addTarget:self action:#selector(backToMore) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem* someBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:someButton];
[self.navigationItem setLeftBarButtonItem:someBarButtonItem];
[someBarButtonItem release];
[someButton release];
help me out.
use the code
[imageView addsubView someButton];
I hope now u will see the button.Actually you are adding the left bar button item to default navigation bar and as u r creating somebutton it is not getting added on imageview which is overlapping your navigation bar.So by clicking on that area it is working but button is not visible.
- (void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed: #"TopBg.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
extends #interface MyToolBar : UIToolbar and make object of MyToolBar. after that make your custom button for navigation bar. enjoy and like it
Ketan did you check for image ? is image exist in your project?
Why you are using frame and content mode property for Navigation bar title ?
May this link Help you
http://iosdevelopertips.com/user-interface/ios-5-customize-uinavigationbar-and-uibarbuttonitem-with-appearance-api.html
I use custom image for my navigation bar buttons using the following code, that allows me to make custom add button. I want to be able to do the same for the edit button item.
UIImage *image=[UIImage imageNamed:#"Plus.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );
[button setBackgroundImage:image forState:UIControlStateNormal];
[button addTarget:self action:#selector(add) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = barButtonItem;
[barButtonItem release];
self.navigationItem.leftBarButtonItem = self.editButtonItem;
I'm doing this because I want to change the button text color.I would appreciate your help,
Sarah
You can customize the edit button in the same way you can customize any other navigation control button, for example...
self.editButtonItem.style = UIBarButtonItemStyleBordered;
self.editButtonItem.title = #"Custom";
self.navigationItem.rightBarButtonItem = self.editButtonItem;
Unfortunately changing the text colour is not as easy as setting a 'color' property, since that property doesn't exist (again this applies to all navigation control buttons). It is however possible using a label as described in the following post...
iPhone Navigation Bar Title text color
I have a navigation controller which also has a table view. I want to add an image left side of the navigation bar on top programmatically. When i tried to add by the below code in viewDidLoad:
CGRect frame = CGRectMake(0.0, 0.0, 94.0, 33.0);
UIImageView *image = [ [UIImageView alloc]initWithImage:[UIImage imageNamed:#"topBarImage.png"] ];
image.frame = frame;
[self.view addSubview:image];
but it is adding to top of the table view instead of navigation tab. I think, this image should be added as navigationItem. But i don't how to add an image on left side of navigation bar programmatically. Could some one guide please?
Clave/
you just use a custom view for a bar button item. Here is an example of one with a custom image button
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"myImage.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(blah) forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 32, 32)];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
You want to do it this way because the title of the nav controller will be auto resized this way. If you do it your way (subview of the nav bar) the text will go behind or ontop of the image
edit: it will also stay on the screen as you pop and push view controllers.
edit2: once again, you can use an imageview as the custom view and not the button. Here is code
UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,32,32)];
[iv setImage:[UIImage imageNamed:#"myImage.png"]];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:iv];
[iv release];