iPhone-SDK: Adding Image on Navigation Bar: - iphone

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

Related

UIBarButtonItem:setBackgroundVerticalPositionAdjustment not working properly with custom button

I have the following code to customize the display of an UIBarButtonItem (locationButton):
UIButton *locationButtonAux = [UIButton buttonWithType:UIButtonTypeCustom];
[locationButtonAux setFrame:CGRectMake(0, 0, LOCATION_BUTTON_WIDTH, LOCATION_BUTTON_HEIGHT)];
[locationButtonAux setBackgroundImage:[UIImage imageNamed:#"location_button.png"] forState:UIControlStateNormal];
[locationButtonAux setBackgroundImage:[UIImage imageNamed:#"location_button.png"] forState:UIControlStateHighlighted];
[locationButtonAux addTarget:self action:#selector(userLocation) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *locationButton = [[UIBarButtonItem alloc] initWithCustomView:locationButtonAux];
UIBarButtonItem * item = [[UIBarButtonItem alloc] initWithTitle:#"title"
style:UIBarButtonItemStyleDone
target:nil action:#selector(someMssage)];
[locationButton setBackgroundVerticalPositionAdjustment:-20.0 forBarMetrics:UIBarMetricsDefault];
self.navigationItem.rightBarButtonItem = locationButton;
And I want to adjust the position of this button into the NavigationBar, because my NavigationBar is taller than normal (is customized using Appeareance).
I'm using the method setBackgroundVerticalPositionAdjustment, as you can see in the code, to do that. But is not working at all with my UIBarButtonItem, no matter what offset I put there, the button always appear close to the bottom of the bar (snapshot).
BUT, if I use a normal UIBarButtonItem with a normal style (the one I called button) I DO can see how the position of the button will be altered the offset of -20. Very strange... Any ideas?
Thank you!
Perhaps something like this would work for you:
UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 150, 30)]; //change this frame to counteract for your taller navbar
[rightView addSubview:locationButtonAux];
UIBarButtonItem *rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rightView];
self.navigationItem.rightBarButtonItem = rightBarButtonItem;
Hope this helps
You need to put the button inside a blank view and position it within that blank view. Now make that view the custom view of the bar button item.
You really don't need a button here, since this is just an image and you are not using any of the button capabilities (you can attach a gesture recognizer to spot the tap). So here's a simple solution using an image view:
UIImageView *locationButtonAux =
[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"location_button.png"]];
UIView* v = [[UIView alloc] initWithFrame:locationButtonAux.frame];
[v addSubview:locationButtonAux];
CGRect f = locationButtonAux.frame;
f.origin.y -= 10;
locationButtonAux.frame = f;
UIBarButtonItem *locationButton = [[UIBarButtonItem alloc] initWithCustomView:v];
self.navigationItem.rightBarButtonItem = locationButton;
I've omitted the gesture recognizer part but you can easily see how to add it.

navigation bar image hiding custom navigation bar button

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

adding custom UIButton to UINavigationBar

So the code I have is as follows:
// Create a containing view to position the button
UIView *containingView = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 23.5, 21.5)] autorelease];
// Create a custom button with the image
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"Settings.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(settings) forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(-19, -3, 21.5, 21.5)];
[containingView addSubview:button];
// Create a container bar button
UIBarButtonItem *containingBarButton = [[[UIBarButtonItem alloc] initWithCustomView:containingView] autorelease];
self.navigationItem.rightBarButtonItem = containingBarButton;
The issue is that my Settings.png original image size is 21.5, 21.5 and there fore the button is super hard to click. I have to tap really hard in order to trigger the UITouchUpInside to be triggered. This will clearly be rejected if I put it in the app store, as it is not in compliance with apple's HIG. Is there a way around this? I still need to use UIView as the container for the UIButton as I'd like to position it correctly on the UINavigationBar
Try to set a bigger fram to the button like 40,40 and set the content mode to be the center so the image will apear to be in the center.
button.contentMode = UIViewContentModeCenter;
Tell me if that helped

iOS: Positioning navigation bar buttons within custom navigation bar

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...

iphone custom navigation bar edit button

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