I have an image that is assigned to the navigationItem.leftBarButtonItem on IOS7. When I get it from the designer it looks fine on the navigation bar's background. But when I implement it in IOS7 it becomes pale and almost disappears.
This is how it's being set up:
UIBarButtonItem *button = [[barButtonItemClass alloc] initWithImage:[UIImage imageNamed:#"nav_menu_icon.png"] style:UIBarButtonItemStyleBordered target:self action:#selector(showLeft:)];
viewController.navigationItem.leftBarButtonItem = button;
This is how it should look (image came from my designer):
And this is how it looks when implemented (on the simulator or a phone):
What's the solution?
You should set the tint color of the navigation bar to tint all items in the bar.
A nice solution is to use the UIAppearanceprotocol introduced in iOS 5.
In you AppDelegate's applicationDidFinishLaunching method put the following code:
[[UINavigationBar appearance] setTintColor: [UIColor whiteColor]];
Note, I am currently not able to try the code.
Cheers!
this works fine for me :
UIBarButtonItem *customItem = [[UIBarButtonItem alloc] initWithImage:backButtonImage style:UIBarButtonItemStyleBordered target:self action:#selector(backBtnAction)];
customItem.imageInsets = UIEdgeInsetsMake(0.0, -10, 0, 0);// For adjusting the image
[customItem setBackgroundVerticalPositionAdjustment:+3.0f forBarMetrics:UIBarMetricsDefault];
[self.navigationItem setHidesBackButton:YES];// Hide the Default back button before set custom
[self.navigationItem setLeftBarButtonItem: customItem];
Hopefully, causes might be with the Tint
Try this, may help you ;
// Solve your frame issue.
UIImage * bgImg = [UIImage imageNamed:#"nav_menu_icon.png"];
UIButton *leftButton = [[UIButton alloc] initWithFrame: CGRectMake(x, y, bgImg.size.width, bgImg.size.width)];
viewController.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:leftButton];
Also change the tintColour to clear colour.
Related
This is the code I am using in viewWillAppear:
UINavigationBar *navbar = [[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, 1420, 50)];
//do something like background color, title, etc you self
[[UINavigationBar appearance] setBarTintColor:[UIColor underPageBackgroundColor]];
self.navigationController.navigationBar.translucent = NO;
[self.view addSubview:navbar];
UINavigationItem *item = [[UINavigationItem alloc]
init];
navbar.items= #[item];
UIBarButtonItem *backButton = [[UIBarButtonItem alloc]
initWithTitle:#"Back"
style:UIBarButtonItemStylePlain
target:self
action:#selector(backBtnClicked:)];
item.leftBarButtonItem = backButton;
I want to remove the shadowImage. The line underneath the nav bar but ONLY in one view controller. How do I do this?
I've already tried this but it changes all view controllers, to be like, invisible:
[[UINavigationBar appearance] setBackgroundImage: [UIImage new]
forBarMetrics: UIBarMetricsDefault];
[UINavigationBar appearance].shadowImage = [UIImage new];
Any help would be greatly appreciated!
I had an issue with white space appearing under my nav bar. Is this what you mean by a line? I solved it within xCode's Interface Builder by:
Selecting the view controller in the storyboard
Going to the attributes section of the right toolbar
Check the box "Under Opaque Bars" in the "Extend Edges" section.
I also added the following code in my viewDidLoad method:
self.automaticallyAdjustsScrollViewInsets = NO;
For some reason I can't use UINavigationBar on my view and I use UIToolBar instead. I was using dummy left button with clear tintColor and title button with black tintColor to properly center the title and hide the dummy left bar button, but it's not working anymore and both the dummy left button and the title button get either the main tintColor or if I disable them, they become gray.
How can I make them ideally disabled as buttons and set the proper tintColor (clear and black)?
- (void)addToolbar
{
CGFloat barHeight = 44.0;
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(self.view.bounds.origin.x, self.view.bounds.size.width - barHeight, self.view.bounds.size.height, barHeight)];
UIBarButtonItem *flexibleSpaceButtonItem = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
target:nil action:nil];
// Done button on the right
UIBarButtonItem *doneButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:#selector(done)];
// dummy button on the left to have centered title
UIBarButtonItem *dummyButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:nil action:nil];
dummyButtonItem.enabled = NO;
dummyButtonItem.tintColor = [UIColor clearColor];
// title button
UIBarButtonItem *titleButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"Title text here" style:UIBarButtonItemStylePlain target:nil action:nil];
titleButtonItem.enabled = NO;
titleButtonItem.tintColor = [UIColor blackColor];
// set toolbar items
toolbar.items = #[dummyButtonItem,flexibleSpaceButtonItem, titleButtonItem, flexibleSpaceButtonItem,doneButtonItem];
[self.view addSubview:toolbar];
}
When you specify a tint for a view, the tint is automatically propagated to all subviews in the view’s hierarchy. Because UIWindow inherits from UIView, you can specify a tint color for the entire app by setting the window’s tint property using code like this:
Under application:didFinishLaunchingWithOptions:
window.tintColor = [UIColor purpleColor];
Source - iOS Transitions . Check it out under Using Tint Color section
Based on your feedback I found that by doing this in AppDelegate:
self.window.tintColor = [UIColor colorWithRed:255/255.0 green:59/255.0 blue:48/255.0 alpha:1.0];
[[UITextField appearance] setTintColor:[UIColor colorWithRed:66/255.0 green:107/255.0 blue:242/255.0 alpha:1.0]];
the second line causes my issue. I now need to find out why did I put the second line there :). Thanks for your help.
i am using below code to add background image to the Custom UItoolbar where it has 4 Custom UIBarButton it in.I want to add background image for the ToolBar i searched many things and tried but nothing is working. can anyone please tell me how to add background image for Custome UIToolBar for the Frame which i have specified.
UIToolBar *toolBar =[[UIToolBar alloc]init];
-(void)layoutSubviews{
CGRect frame;
frame = CGRectMake(20 ,90, 150, 30);
toolBar.frame = frame;
UIImage* toolbarImage = [UIImage imageNamed: #"toolbar_background.png"];
[[UIToolbar appearance]
setBackgroundImage: toolbarImage
forToolbarPosition: UIToolbarPositionAny
barMetrics: UIBarMetricsDefault];
}
The Above code is not working For me as mine is Custom Toolbar adding progrmatically and also i am adding it as per requirment.
I had the same problem and now, it is working fine. You can try it, if its works fine,
1.First i set the tool bar hidden to NO.
[self.navigationController setToolbarHidden:NO animated:YES];
2.addin Image to UItoolbar
UIImage *toolbarImage = [[UIImage imageNamed:#"search_BottomBar1.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UIToolbar appearance]setBackgroundImage:toolbarImage forToolbarPosition:UIToolbarPositionBottom barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance]setTintColor:[UIColor grayColor]];
i added the bar Button to it.
UIBarButtonItem *button2 = [[UIBarButtonItem alloc]initWithTitle:#"My Place"
style:UIBarButtonItemStyleBordered target:self action:#selector(clickedButton1)];
NSArray *itemsN = [NSArray arrayWithObjects:button0,button1,button2, nil];
[self setToolbarItems:itemsN animated:NO];
Try this, Hopefully it will works..
I set an arrow custom image to navigation bar by adding the following code in app delegate, it works but now im looking to remove the text completely for back button.
UIImage * backButtonImage = [UIImage imageNamed: #"BackButtonGrey.png"];
backButtonImage = [backButtonImage stretchableImageWithLeftCapWidth: 15.0 topCapHeight: 30.0];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage: backButtonImage forState: UIControlStateNormal barMetrics: UIBarMetricsDefault];
Simply move the text vertically so far that it no longer appears. This can be done at app launch in your app delegate.
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, 20.f) forBarMetrics:UIBarMetricsDefault];
Normally this call is for tweaking the vertical text position which can vary depending on the font used. Here the text is moved far enough that it's no longer inside the Back button view, and so is clipped into non-existence.
I really don't think is a good practice for a developer to adjust the offset of the text in order to hide it.
A cleaner solution would be to just add to the navigation controller back button a new button where the title is an empty string. You should add this in the previous calling view controller in viewWillAppear (not the current one):
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:#"" style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.backBarButtonItem = backButton;
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(-100.f, 0) forBarMetrics:UIBarMetricsDefault];
I just did it like this, worked fine for me :-)
UIImage *backButtonImage = [UIImage imageNamed:#"navigationBarBack.png"];
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setImage:backButtonImage
forState:UIControlStateNormal];
backButton.frame = CGRectMake(0, 0, backButtonImage.size.width, backButtonImage.size.height);
[backButton addTarget:self
action:#selector(popViewController)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
self.navigationItem.leftBarButtonItem = backBarButtonItem;
Do not use the appearance proxy. Instead, for every view controller, put this code into its viewDidLoad implementation:
UIImage * backButtonImage =
[UIImage imageNamed: #"BackButtonGrey.png"];
backButtonImage =
[backButtonImage stretchableImageWithLeftCapWidth: 15.0 topCapHeight: 30.0];
UIBarButtonItem* b =
[[UIBarButtonItem alloc]
initWithImage:backButtonImage
style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.backBarButtonItem = b;
That will cause the next view controller pushed onto the navigation stack to have a back button consisting of just the image.
(However, I should point out that stretchableImageWithLeftCapWidth:... is deprecated. You should be using resizableImage....)
To set a backbutton text, you set a new backbutton to the current viewController before pushing or presenting then new one which would show the text of the backbutton:
In your current viewController (not the new one which will show the back-button):
vc = [[MyNewViewController alloc]initWith...];
vc.title = #"New ViewController";
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc]initWithTitle:#"Back" style:UIBarButtonItemStylePlain target:nil action:nil];
[self.navigationController pushViewController:vc animated:YES];
So if you want to remove the text, just use #"" as a title for the new backbutton.
To set a backbutton-icon for the entire app, use the following code in your appDelegate class. Not every icon fits perfectly, so if you have to move it around a little, you can use the "backInsets". In my example the icon will move 2px down.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
...
...
[self customBackButtonIcon];
return YES;
}
- (void)customBackButtonIcon
{
UIEdgeInsets backInsets = UIEdgeInsetsMake(0, 0, -2, 0);
UIImage *backImg = [[[UIImage imageNamed:#"back_button_white"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] imageWithAlignmentRectInsets:backInsets];
[[UINavigationBar appearance] setBackIndicatorImage:backImg];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backImg];
}
Tested with iOS9
UIBarButtonItem *newBackButton =
[[UIBarButtonItem alloc] initWithTitle:#""
style:UIBarButtonItemStylePlain
target:nil
action:nil];
[[self navigationItem] setBackBarButtonItem:newBackButton];
Perfect solution globally
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName:UIColor.clearColor()], forState: UIControlState.Normal)
UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName:UIColor.clearColor()], forState: UIControlState.Highlighted)
return true
}
I need to use a simple UIBarButtonItem in a UIToolBar.
I used this code to add the button with my custom image to the navigation bar:
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image_sheep.png"] style:UIBarButtonItemStylePlain target:self action:#selector(clone)];
NSArray *rightItems = [NSArray arrayWithObject:cloneButton];
self.navigationItem.rightBarButtonItems = rightItems;
The result is what I want and it looks like this
navigation bar http://img207.imageshack.us/img207/3383/navigationbara.jpg
When doing the same thing in a UIToolBar that I'm adding to a UITableViewCell's contentView
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image_sheep.png"] style:UIBarButtonItemStylePlain target:self action:#selector(clone)];
UIBarButtonItem *leftSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
toolbar.items = [NSArray arrayWithObjects:leftSpace, cloneButton, nil];
The problem is that I get something like this:
toolbar http://img209.imageshack.us/img209/1374/toolbary.jpg
This is surely due to the fact that UINavigationBar and UIToolBar are not drawn the same way...
Can someone please point out how to resolve this problem?
On your UIToolbar use UIBarButtonItemStyleBordered instead of UIBarButtonItemStylePlain.
UINavigationBar will not draw the button the same without the button look.
That's how UIToolbar is supposed to work. Per the documentation:
Toolbar images that represent normal and highlighted states of an item derive from the image you set using the inherited image property from the UIBarItem class. For example, the image is converted to white and then bevelled by adding a shadow for the normal state.
That said, you might be able to get the result you want by creating a UIBarButtonItem with a custom view instead of an image. Like so:
UIImage *sheepImage = [UIImage imageNamed:#"image_sheep.png"];
UIButton *sheepButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sheepButton setImage:sheepImage forState:UIControlStateNormal];
[sheepButton addTarget:self action:#selector(clone) forControlEvents:UIControlEventTouchUpInside];
[sheepButton setShowsTouchWhenHighlighted:YES];
[sheepButton sizeToFit];
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithCustomView:sheepButton];
I haven't tested this, so I don't know if it will work.
I cannot see the images posted in the question anymore. But I am pretty sure that we're trying to mimic the UIBarButtonItemStylePlain of the UIToolBar in a UINavigationBar.
Benzado is pretty much spot on except for this line:
[sheepButton setImage:sheepImage forState:UIControlStateNormal];
This puts the image in front of the touch indicator. The UIToolBar shows the touch in front of the image. So to mimic the UIToolBar style in a UINavigationBar:
UIImage *sheepImage = [UIImage imageNamed:#"image_sheep.png"];
UIButton *sheepButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sheepButton setBackgroundImage:sheepImage forState:UIControlStateNormal];
[sheepButton addTarget:self action:#selector(clone) forControlEvents:UIControlEventTouchUpInside];
[sheepButton setShowsTouchWhenHighlighted:YES];
[sheepButton sizeToFit];
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithCustomView:sheepButton];