I have a design of navigation bar like this. I've ready increased the height of Navigation Bar, but how can I set the position of Back button image and align left the title?
#import "UINavigationBar+Custom.h"
#implementation UINavigationBar (Custom)
- (CGSize)sizeThatFits:(CGSize)size {
CGRect rec = self.frame;
CGRect screenRect = [[UIScreen mainScreen] bounds];
rec.size.width = screenRect.size.width;
rec.size.height = 77;
return rec.size;
}
#end
NavBar picture design
Reality
Update: My code to add back bar button
- (void)viewDidLoad {
[super viewDidLoad];
[self configNavBar];
}
- (void)configNavBar {
// -- Config NavigationBar Background --
self.navigationController.navigationBar.barTintColor = [UIColor whiteColor];
self.navigationController.navigationBar.translucent = NO;
// -- Navigator title font --
NSDictionary *titleAttributes = #{
NSFontAttributeName :FONT_NAVIGATION_TITLE_BAR,
NSForegroundColorAttributeName : [Utils colorWithHexString:#"#0f385a"] };
[self.navigationController.navigationBar setTitleTextAttributes:titleAttributes];
// -- Back button color --
[self.navigationController.navigationBar setTintColor:[UIColor whiteColor]];
UIImage *myImage = [UIImage imageNamed:#"ic_arrow_back"]; //set your backbutton imagename
UIImage *backButtonImage = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// now use the new backButtomImage
[[UINavigationBar appearance] setBackIndicatorImage:backButtonImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backButtonImage];
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(-0.f, -0)
forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackgroundVerticalPositionAdjustment:40 forBarMetrics:UIBarMetricsDefault];
// -- Empty back title --
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"" style:UIBarButtonItemStylePlain target:nil action:nil];
[self.navigationItem setBackBarButtonItem:backButtonItem];
}
Try this codeUIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image"] style:UIBarButtonItemStylePlain target:self action:#selector(action)];
[self.navigationItem setLeftBarButtonItem:barButtonItem];. And correctly format the image
Related
I making custom navigationBar with background color and font size. In addition i have add menu button on right. For this I had made the category named
UINavigationController+Transparent.h
#interface UINavigationController (Transparent)
- (void)presentTransparentNavigationBar;
- (void)hideTransparentNavigationBar;
#end
UINavigationController+Transparent.m
#import "UINavigationController+Transparent.h"
#implementation UINavigationController (Transparent)
UIBarButtonItem *menuButton;
- (void)presentTransparentNavigationBar;
{
menuButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"menu_icon"] style:UIBarButtonItemStylePlain target:self action:#selector(showMenu:)];
[menuButton setTintColor:[UIColor whiteColor]];
self.navigationItem.rightBarButtonItem = menuButton;
UIImage *backButtonImage = [UIImage imageNamed:#"back"];
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;
[self.navigationBar setTranslucent:NO];
[self.navigationBar setShadowImage:[UIImage new]];
[self.navigationBar setBarTintColor:[UIColor wolfRed]];
[self.navigationBar setTitleTextAttributes:
#{NSForegroundColorAttributeName:[UIColor whiteColor], NSFontAttributeName:[UIFont fontWithName:#"Helvetica" size:19.0] }];
[self setNavigationBarHidden:NO animated:NO];
}
- (void)hideTransparentNavigationBar
{
[self setNavigationBarHidden:YES animated:NO];
[self.navigationBar setBackgroundImage:[[UINavigationBar appearance] backgroundImageForBarMetrics:UIBarMetricsDefault] forBarMetrics:UIBarMetricsDefault];
[self.navigationBar setTranslucent:[[UINavigationBar appearance] isTranslucent]];
[self.navigationBar setShadowImage:[[UINavigationBar appearance] shadowImage]];
}
#end
inside my ViewControllers i call
[self.navigationController presentTransparentNavigationBar];
or
[self.navigationController hideTransparentNavigationBar];
The problem is that menu button is not visible and back button is seems like standard iOS blue back button.
Thanks for help!
See I used to customize my navigation bar in following way with
objective c
Step.1 Make sure your View Controller is embed in Navigation Controller
Step.2 Add required icons in your assets eg. "menu_icon" and "back"
Step.3 with the objective-C you can customize navigation bar as like you want.
I always do this way,
#import "ViewController.h"
#interface ViewController (){UIBarButtonItem *menuButton;}
#end
#implementation ViewController
#pragma mark - life cycle methods
- (void)viewDidLoad {[super viewDidLoad];}
- (void)didReceiveMemoryWarning {[super didReceiveMemoryWarning];}
#pragma mark - IBAction methods
- (IBAction)showClicked:(id)sender {[self presentTransparentNavigationBar];}
- (IBAction)hideClicked:(id)sender {[self hideTransparentNavigationBar];}
#pragma mark - Navigation Bar methods
//Customize Naviagtion Bar
- (void)presentTransparentNavigationBar;
{
//Add Menu Button to Navigaiton Bar
menuButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"menu_icon"] style:UIBarButtonItemStylePlain target:self action:#selector(showMenu:)];
[menuButton setTintColor:[UIColor whiteColor]];
self.navigationItem.rightBarButtonItem = menuButton;
//Add Back button to Navigation Bar
UIImage *backButtonImage = [UIImage imageNamed:#"back"];
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;
//Config Navigaton bar settings
[self.navigationController.navigationBar setTranslucent:NO];
[self.navigationController.navigationBar setShadowImage:[UIImage new]];
[self.navigationController.navigationBar setBarTintColor:[UIColor lightGrayColor]];//I used light gray color
[self.navigationController.navigationBar setTitleTextAttributes:
#{NSForegroundColorAttributeName:[UIColor whiteColor], NSFontAttributeName:[UIFont fontWithName:#"Helvetica" size:19.0] }];
[self.navigationController.navigationBar setHidden:NO];
}
//Hide Navigation Bar
- (void)hideTransparentNavigationBar
{
[self.navigationController.navigationBar setHidden:YES];
[self.navigationController.navigationBar setBackgroundImage:[[UINavigationBar appearance] backgroundImageForBarMetrics:UIBarMetricsDefault] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setTranslucent:[[UINavigationBar appearance] isTranslucent]];
[self.navigationController.navigationBar setShadowImage:[[UINavigationBar appearance] shadowImage]];
}
- (void) showMenu:(id) sender{ /*TODO when clicks on Menu button */ }
- (void) popViewController{ /*TODO when clicks on Back button */ }
#end
and if managed everything proper you should be able to get Menu and Back button to navigation bar when you click show button on the screen.
Note:
you can do this in your AppDelegate file so it will available in entire application
I added the following to customize my back button in my navigation bar but the image just overlaps/duplicated:
http://i.stack.imgur.com/eyzJC.png
- (void)viewWillAppear:(BOOL)animated
{
//take out the label following the button
UIBarButtonItem *backButton = [[UIBarButtonItem alloc]initWithTitle:#"" style:UIBarButtonItemStylePlain target:nil action:nil];
//set image for back button
[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:#"backButtonImage.png"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:#"backButtonImage.png"]];
self.navigationItem.backBarButtonItem = backButton;
}
It's supposed to be an image of one black arrow facing to the left.
Before it worked fine but now it does this when I simulate it. Any insight and help would be appreciated.
Thank you
This should work for you.
UIButton *back = [UIButton buttonWithType:UIButtonTypeCustom];
back.frame = CGRectMake(0, 0, 50, 44);
back.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[back addTarget:self action:#selector(back) forControlEvents:UIControlEventTouchUpInside];
[back setImage:[UIImage imageNamed:#"backButtonImage.png"] forState:UIControlStateNormal];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView: back];
add a function:
-(void) back
{
[self.navigationController popViewControllerAnimated:YES];
}
Add this code
[UINavigationBar appearance].barTintColor = [UIColor colorWithWhite:1.00 alpha:1];
It should solve your problem.
I want to incorporate a custom back button - I'm able to get the above result using
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"back-btn"] style:UIBarButtonItemStylePlain target:nil action:nil];
but how do you remove the native blue button?
Use the below code to hide the back arrow:
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"back-btn"]
style:UIBarButtonItemStylePlain
target:nil
action:nil];
if ([UINavigationBar instancesRespondToSelector:#selector(setBackIndicatorImage:)]) {
[[UINavigationBar appearance] setBackIndicatorImage:[[UIImage alloc] init]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[[UIImage alloc] init]];
}
In iOS7+ you can use navigationBar's backIndicatorImage and backIndicatorTransitionMaskImage to achieve the custom arrow that you want. Swift code below:
self.navigationController?.navigationBar.backIndicatorImage = UIImage(named:"button-backArrow18x15")
self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = UIImage(named:"button-backArrowMask18x15")
If you want to hide the "back" text you can set the title of the previous view to be an single space " " or use a custom UIBarButtonItem that doesn't have a title.
You can hide backbutton
self.navigationItem.hidesBackButton=YES;
To create custom leftbarbutton you can use this:
UIButton* someButton = [UIButton buttonWithType:UIButtonTypeCustom];
[someButton setFrame:frame];
[someButton setBackgroundImage:#"youArroImageName" forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(backButtonAction:) forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];
UIBarButtonItem* someBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:someButton];
[self.navigationItem setLeftBarButtonItem:someBarButtonItem];
Check this one:
UIImage *faceImage = [UIImage imageNamed:#"back_arrow.png"];
UIButton *face = [UIButton buttonWithType:UIButtonTypeCustom];
face.bounds = CGRectMake( 10, 0, faceImage.size.width, faceImage.size.height );
[face addTarget:self action:#selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
[face setImage:faceImage forState:UIControlStateNormal];
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithCustomView:face];
self.navigationItem.leftBarButtonItem = backButton;
[self.navigationItem setHidesBackButton:YES animated:YES];
[self.navigationItem setBackBarButtonItem:nil];
-(IBAction)handleBack:(id)sender
{
// [self dismissViewControllerAnimated:YES completion:nil];
[self.navigationController popViewControllerAnimated:YES];
}
Thanks to all the answerers - found a simpler way of doing it...
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"back-btn"] style:UIBarButtonItemStylePlain target:self action:#selector(backButtonAction:)];
self.navigationItem.leftBarButtonItem.tintColor = [UIColor whiteColor];
[self.navigationItem setHidesBackButton:YES animated:NO];
[self.navigationItem setBackBarButtonItem:nil];
-(void) backButtonAction:(id)sender
{
[self.navigationController popViewControllerAnimated:YES];
}
Swift 4 (if you just want to hide it)
let mask = UIImage()
navigationController?.navigationBar.backIndicatorImage = mask
navigationController?.navigationBar.backIndicatorTransitionMaskImage = mask
Why can't you try with the Custom UIButton :
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setFrame:CGRectMake(0.0f, 0.0f, 25.0f, 40.0f)];
[btn addTarget:self action:#selector(buttonEN:) forControlEvents:UIControlEventTouchUpInside];
[btn setImage:[UIImage imageNamed:#"back-btn"] forState:UIControlStateNormal];
UIBarButtonItem *backBtn = [[UIBarButtonItem alloc] initWithCustomView:btn];
self.navigationItem.backBarButtonItem = backBtn;
I just faced the exact same problem, here's what I ended up doing:
// First set the back button text to an empty string
viewController.navigationItem.backBarButtonItem =
[[UIBarButtonItem alloc] initWithTitle:#""
style:UIBarButtonItemStylePlain
target:nil
action:nil];
// Set the back-indicator image to the custom image (scaled to 20x20)
UIImage *img = [MyUtils imageWithImage:[UIImage imageNamed:#"back"] scaledToSize:CGSizeMake(20, 20)];
[[UINavigationBar appearance] setBackIndicatorImage:img];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:img];
// Set the tint color to WHITE
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
Here's the image-scaling method:
+ (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
Credit for the scaling method above goes to Paul Lynch on this SO question: (The simplest way to resize an UIImage?)
First of all, when i call presentViewController:navigationController it appears with normal green color navigation bar. But after animation is finished navigation bar becomes a little darker.
if(!userPageViewController)
userPageViewController = [[UserPageViewController alloc]initWithUser:tempUser];
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:userPageViewController];
[self presentViewController:navigationController animated:YES completion:nil];
When i press the home button, navigation bar becomes black like on this image.
https://dl.dropboxusercontent.com/u/14066789/2013-12-04%2012.27.45.png
Top bar in xib file is set to Translucent Navigation Bar
Why it becomes black?
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = #"Личный кабинет";
[myTableView setBackgroundColor:[UIColor clearColor]];
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithTitle:#"Закрыть" style:UIBarButtonItemStyleBordered target:self action:#selector(backPressed:)];
self.navigationItem.leftBarButtonItem = btn;
self.navigationItem.backBarButtonItem = nil;
UIBarButtonItem *exitBtn = [[UIBarButtonItem alloc] initWithTitle:#"Выход" style:UIBarButtonItemStyleBordered target:self action:#selector(logOut:)];
self.navigationItem.rightBarButtonItem = exitBtn;
scroll.contentSize = CGSizeMake(320.0f, 400.0f);
if ([self respondsToSelector:#selector(edgesForExtendedLayout)])
self.edgesForExtendedLayout = UIRectEdgeNone;
}
-(void)viewWillAppear:(BOOL)animated
{
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
{
UIColor * barColor = [UIColor
colorWithRed:222.0/255.0
green:255.0/255.0
blue:229.0/255.0
alpha:1.0];
[self.navigationController.navigationBar setBarTintColor:barColor];
UIColor * barTintColor = [UIColor
colorWithRed:48.0/255.0
green:140.0/255.0
blue:76.0/255.0
alpha:1.0];
[self.navigationController.navigationBar setTintColor:barTintColor];
NSDictionary *navbarTitleTextAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
barTintColor,UITextAttributeTextColor,
[UIColor clearColor], UITextAttributeTextShadowColor,
[NSValue valueWithUIOffset:UIOffsetMake(0, 0)], UITextAttributeTextShadowOffset, nil];
[[UINavigationBar appearance] setTitleTextAttributes:navbarTitleTextAttributes];
}
else
{
UIColor * barColor = [UIColor
colorWithRed:73.0/255.0
green:208.0/255.0
blue:114.0/255.0
alpha:1.0];
[self.navigationController.navigationBar setTintColor:barColor];
}
}
I had the same problem.
Fixed by turning off "Transcluent" checkbox in properties of Navigation Bar of my root Navigation Controller in Storyboard.
You need to open left pane named "Document Outline" with small button in bottom left to find Navigation Bar.
I've added UIAppearance code in my appdelegate to customize UIButtonBarItem.
The back buttons in a nav controller pick up the UIappearance.
But the UIButtonBarItems I create programmically to appear on the first navbar dont get the uiappearance.
Isn't UIAppearance supposed to apply to all UIButtonBarItems that are created?
The same thing happens if I put in a UIButtonBarItem into a navbar in storyboard.
The navbar picks up the UIAppearance but the UIButtonBarItem does not.
in appdelegate
-(void) configureAppearance
{
// navbar background
UIView* bk0 = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 480.0f, 44.0f)];
UIView* bk1 = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 480.0f, 22.0f)];
UIView* bk2 = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 22.0f, 480.0f, 22.0f)];
[bk0 addSubview:bk1];
[bk0 addSubview:bk2];
bk1.backgroundColor=LIGHT_PURPLE;
bk2.backgroundColor=DARK_PURPLE;
UIImage* navimg=ChangeViewToImage(bk0);
[[UINavigationBar appearance] setBackgroundImage:navimg forBarMetrics:UIBarMetricsDefault];
#define BUTTON_SIZE 34.0f
UIView* bbk0 = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, BUTTON_SIZE, BUTTON_SIZE)];
UIView* bbk1 = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, BUTTON_SIZE, BUTTON_SIZE)];
bbk0.backgroundColor=[UIColor clearColor];
bbk1.backgroundColor=DARK_PURPLE;
[bbk0 addSubview:bbk1];
addBorderAndShadow(bbk1, VERY_DARK_PURPLE, 1.0, 2.0);
UIImage* bimg=ChangeViewToImage(bbk0);
bimg = [bimg resizableImageWithCapInsets:UIEdgeInsetsMake(0.0f, BUTTON_SIZE, 0, 0)]; // this will keep it square
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:bimg
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, bimg.size.height*2) forBarMetrics:UIBarMetricsDefault]; // to not show text on button but still get nav ani
//[[UIBarButtonItem appearanceWhenContainedIn:[UINavigationBar class], nil] setBackButtonBackgroundImage:bimg forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
}
in one of my viewcontrollers (which doesnt get uiappearance
- (void)viewDidLoad
{
[super viewDidLoad];
// Uncomment the following line to preserve selection between presentations.
// self.clearsSelectionOnViewWillAppear = NO;
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem;
//AppDelegate* appdel = (AppDelegate*)[[UIApplication sharedApplication] delegate];
//[appdel configureAppearance];
UIBarButtonItem* backButton = [[UIBarButtonItem alloc] initWithTitle:#"" style:UIBarButtonItemStylePlain target:self
action:#selector(revealMenu:)];
self.navigationItem.leftBarButtonItem = backButton;
}
Try like this:
[UIBarButtonItem apperanceWhenContainedIn: [UINavigationController class],nil]
setBackgroundImage:bimg
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];