Hello I am new to ios development and want to know how to customise navigation bar buttons
This is what i used to change navigation bar color
[[UINavigationBar appearance] setBarTintColor:[UIColor]]
I want to change button colour
Here is a exmaple
First you need to set navigation bar, assuming your first screen is SpalshViewController you need to set splash screen as a root view controller for navigation bar and then set navigation bar as root view controller like :
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
SplashScreenVC *obj =[CustomUtility getViewController:#"SplashScreenVC"];
self.navigationController =[[UINavigationController alloc] initWithRootViewController:obj];
self.window.rootViewController =self.navigationController;
in didFinishLaunchingWithOptions
Now coming to customize navigation bar setting and appearance you need to set :
self.navigationController.navigationBar.translucent = NO;
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"top_bg2.png"] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setTitleTextAttributes:#{NSForegroundColorAttributeName : [UIColor whiteColor],NSFontAttributeName:[UIFont fontWithName:#"Lato-Regular" size:18]}];
Now setting the custom bar buttons for navigation bar you need to create barbutton items like :
UIBarButtonItem *leftbtn;
UIBarButtonItem *rightbtn;
[self.navigationController.navigationItem setLeftBarButtonItem:leftbtn];
[self.navigationController.navigationItem setRightBarButtonItem:rightbtn];
customizebarbuttonItems According to your need
if you want to set more than one buttons to the navigation bar you can add like:
UIBarButtonItem *leftbtn1;
UIBarButtonItem *leftbtn2;
UIBarButtonItem *rightbtn1;
UIBarButtonItem *rightbtn2;
[self.navigationController.navigationItem setLeftBarButtonItems:#[leftbtn1,leftbtn2]];
[self.navigationController.navigationItem setRightBarButtonItems:#[rightbtn1,rightbtn2]];
Hope it will helpful for you
You can use below navigation bar to customize. In Storyboard you have option to change the colour.
Otherwise you can put UIView to customize. Like below,
Create a 1x1 pixel image with the color you want. Then add following code to your AppDelegate class.
UIImage *btnBgColor = [[UIImage imageNamed:#"backColor"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UIBarButtonItem appearance] setBackgroundImage: btnBgColor
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
OR
Write the below code on your base viewController class, then make this class as superclass of all your other view controllers.
UIButton* yourButton = [UIButton buttonWithType:UIButtonTypeCustom];
yourButton.layer.backgroundColor = [UIColor redColor].CGColor;
UIBarButtonItem* buttonItem = [[UIBarButtonItem alloc] initWithCustomView: yourButton];
self.navigationBar.leftBArButtonItems = #[buttonItem];
You can add your custom button in navigation bar like:
UIButton *btnObj = [UIButton buttonWithType:UIButtonTypeCustom];
[btnObj setFrame:CGRectMake(0, 0, 60, 44)];
[btnObj setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
[btnObj setImage:[UIImage imageNamed:#"<button background image>"] forState:UIControlStateNormal];
[btnObj addTarget:self action:#selector(btnObjClick:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *itemBtnObj = [[UIBarButtonItem alloc] initWithCustomView:btnObj];
self.navigationItem.rightBarButtonItems = [[NSArray alloc]initWithObjects:itemBtnObj, nil];
You can do it from story board itself.
Drag UINavigation Bar
Customise your navigation using images or background colors giving them shadows.
Add navigation item
you can customize those too using images or colors and images and position as per requirements.
To add constraints to the same refer my ans. Adding constraints to a UIBarButtonItem
Hope it helps.. Happy Coding.. :)
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;
I don't see all of my navigation bar.
There is only a outline of where a nav bar would be.
I set the navigationBar Color and tint colors so as to define this nav bar even if it had no items.
I used Storyboards to make the currently functional UI.
My Story Board UI includes Delegates,Custom Collection View Cells,Custom Table View Cells,And Animations.
By the end of my app I wanted to add nav bars programmatically to each of my ViewControllers. (see code)
I have used this code in 6 other classes. And I Have 6 Perfectly Flawless navigation bars in those ViewControllers.
- (void)viewDidLoad
{
[super viewDidLoad];
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizeralloc]
initWithTarget:self
action:#selector(titleGestureLabelMethod)];
UILabel * titleView = [UILabel new];
titleView.text = #"Title";
titleView.textColor = [UIColor greenColor];
[titleView sizeToFit];
titleView.userInteractionEnabled = YES;
[titleView addGestureRecognizer:tapGesture];
self.navigationItem.titleView = titleView;
[self.view addSubview:titleView];
[self.navigationController.navigationBar setTranslucent:NO];
UIBarButtonItem *lButton = [[UIBarButtonItem alloc] initWithTitle:#"L"
style:UIBarButtonItemStylePlain
target:sel
action:#selector(lButtonMethod)];
[self.navigationItem setLeftBarButtonItem:lButton animated:YES];
UIBarButtonItem *rButton = [[UIBarButtonItem alloc]
initWithTitle:#"R"
style:UIBarButtonItemStylePlain
target:self
action:#selector(rButtonMethod)];
[self.navigationItem setRightBarButtonItem:rButton animated:YES];
self.navigationController.navigationBar.tintColor = [UIColor redColor];
[self.navigationController.navigationBar setBarTintColor:[UIColor greenColor]];
[self.view addSubview:testTwoNavBar];
}
You need to embed your view controller into a navigation controller. If you're using Interface Builder, from your storyboard select the view controller. In the menu select editor and choose embed in navigation controller. It's hard to understand what you really need though from this question.
I want to navigate from a white UINavigatinonBarto a transparent UINavigationBar.
In my root view controller, this is the setup:
self.navigationController.navigationBar.hidden = NO;
[self.navigationController.navigationBar setBarTintColor:[UIColor whiteColor]];
[self.navigationController.navigationBar setTranslucent:NO];
It's important that it stays non translucent.
This is the setup in the second view controller:
// set title of navbar
self.title = [self.data objectForKey:#"title"];
[self.navigationController.navigationBar setTitleTextAttributes:#{NSForegroundColorAttributeName : [UIColor whiteColor]}];
//
// IMPORTANT PART: make the nav bar transaparent - no prerequisites.
self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.translucent = YES;
// set custom back button
UIButton *backButton = [[UIButton alloc] initWithFrame: CGRectMake(16, 31, 22, 20)];
UIImage *backImage = [UIImage imageNamed:#"backButtonDetail"];
[backButton setBackgroundImage:backImage forState:UIControlStateNormal];
[backButton setTitle:#"" forState:UIControlStateNormal];
[backButton addTarget:self action:#selector(popBack) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
self.navigationItem.leftBarButtonItem = backButtonItem;
This goes almost well, except for the animation:
As you can see, the background becomes black when I animate it. I want to fade the white into the destination color. It now animates from the black background.
I tried settings a custom UIView underneath the nav bar, but that didn't work.
I'm quite lost about how to about this now and any help would be highly appreciated.
I recently ran into this same problem and was able to get around it by just setting the window's background color in the appDelegate's didFinishLaunchingWithOptions
window.backgroundColor = UIColor.whiteColor()
and if you don't already have a reference to window then
UIApplication.sharedApplication().delegate?.window.backgroundColor = ...
I found this to be the cleanest solution. Hope it helps, albeit a bit late.
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.
I have setup a Navigation Bar in a storyboard with an UIBarButton for the right.
This is the code I use to update the image for this:
// Setup the right navigation bar item
[self.addGameButton setBackgroundImage:[UIImage imageNamed:#"addGameButton"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.addGameButton setTitle:#""];
The image is here, it is 76x58 (at 2x). It is 38x29 (at normal).
When run on the device the image is stretching and I do not know why?
The backgroundImage property is meant to draw a stretchable image for the background of the button. If you want the image inside the button, you could try initializing the UIBarButtonItem with this:
UIImage *image = [UIImage imageNamed:#"images/global/add"];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStyleBordered target:nil action:nil];
[self.navigationItem setRightBarButtonItem:barButtonItem];
For you, it looks like you have an image that you want to replace the whole button with. You could also try this code, which will create a custom button as the view for your UIBarButtonItem:
UIImage *addImage = [UIImage imageNamed:#"images/global/add"];
UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom];
[addButton setFrame:CGRectMake(0, 0, addImage.size.width, addImage.size.height)];
[addButton setBackgroundImage:addImage forState:UIControlStateNormal];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:addButton];
[self.navigationItem setRightBarButtonItem:barButtonItem];
In storyboard you can dragg a UIButton over the UIBarButtonItem and you can customise the UIButton as you like.
Try setting the frame of the button to the size you want.
Stuart, since you have setTitle:#"" the nav bar button will not display the text "add" but instead take up the space that was allocated to the text.. I am also yet to find a proper solution but a workaround for your problem is to set the font size to 0.1f. This will resolve your issue..
you need to set the navigation bar appearance in the "application:didFinishLaunchingWithOptions” method of AppDelegate.m, try adding the following code:
UIImage *buttonback = [[UIImage imageNamed:#"nav_back"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 22, 0, 0)];
[[UIBarButtonItem appearance]
setBackButtonBackgroundImage:buttonback forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary
dictionaryWithObjectsAndKeys:[UIColor whiteColor],
UITextAttributeTextColor, [UIFont fontWithName:#"verdana" size:0.1f],
UITextAttributeFont, nil] forState:UIControlStateNormal];
Also Note that this will work with iOS 6, looking for a solution for compatibility in iOS 5