ios) Object-c. how to customize a button on the navigation bar - objective-c

I'm developing a navigation-base application with a custom navigation bar. I succeeded to have a navigation bar with an image and a button. However I have no idea how to make the custom button..:(
This is the code that adds the "main"button on the navigation bar.(in the view controller, initWithNibName method)
if (self) {
// Custom initialization.
//set navigation id to I to inform that that page is inforview
navID = #"I";
//adds the button on the navigation bar
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithTitle:#"Main" style:UIBarButtonItemStyleBordered target:self action:#selector(goBack:)];
self.navigationItem.leftBarButtonItem = button;
self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
[button release];
[navID release];
}
Thank you
I created a custom button and applied it to the UIbarbuttonitem.
There is no error but nothing is shown on the navigation bar:(
This is my code-
//create a custom button
UIImage *image = [UIImage imageNamed:#"TESTButton.png"];
UIButton *myCustomButton = [UIButton buttonWithType:UIButtonTypeCustom];
myCustomButton.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );
[myCustomButton setImage:image forState:UIControlStateNormal];
[myCustomButton addTarget:nil action:#selector(goBack:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithCustomView:myCustomButton];
self.navigationItem.leftBarButtonItem = button;
self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
Anybody who can fix my code? :)

The easiest way is to use:
UIButton *yourCustomButton = ....
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:yourCustomButton];
self.navigationItem.leftBarButtonItem = barButtonItem;
[barButtonItem release];

Related

UINavigationBarButton not working when using customView

I would like to make a custom UIBarButtonItem that contains both image and text and also customise(reduce) the UIButton tap area. To achieve this programmatically, I am using the following code snippet. But UIButton disappears when added in UIView as subview. Could somebody guide me what is wrong ?
To reduce tap area of bar button, I am embedding custom UIButton in custom UIView.
//Set Navigation Bar
UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
//Set title if needed
UINavigationItem * navTitle = [[UINavigationItem alloc] init];
navTitle.title = #"";
UIView *customBackView = [[UIView alloc] initWithFrame:CGRectMake(220,0,50,40)];
customBackView.backgroundColor = [UIColor clearColor];
//Here you create info button and customize it
UIButton * tempButton = [UIButton buttonWithType:UIButtonTypeSystem];
tempButton.frame=CGRectMake(240,2,40,40);
[tempButton setImage:[UIImage imageNamed:#"offline_bk.png"]
forState:UIControlStateNormal];
//Add selector to info button
[tempButton addTarget:self action:#selector(onTapDone:) forControlEvents:UIControlEventTouchUpInside];
[customBackView addSubview:tempButton];
[customBackView bringSubviewToFront:tempButton];
UIBarButtonItem * infoButton = [[UIBarButtonItem alloc] initWithCustomView:customBackView];
//In this case your button will be on the right side
navTitle.rightBarButtonItem = infoButton;
//Add NavigationBar on main view
navBar.items = #[navTitle];
[self.view addSubview:navBar];
Because your tempbutton is going out of bound of custom back view. You set the y origin value to 2 and x origin value to 240 which is causing button to go out of bound of custom back view.
Try this code:
UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
//Set title if needed
UINavigationItem * navTitle = [[UINavigationItem alloc] init];
navTitle.title = #"";
UIView *customBackView = [[UIView alloc] initWithFrame:CGRectMake(0,0,50,50)];
customBackView.backgroundColor = [UIColor clearColor];
//Here you create info button and customize it
UIButton * tempButton = [UIButton buttonWithType:UIButtonTypeSystem];
tempButton.frame=CGRectMake(4,2,40,40);
[tempButton setImage:[UIImage imageNamed:#"offline_bk.png"]
forState:UIControlStateNormal];
//Add selector to info button
[tempButton addTarget:self action:#selector(onTapDone:) forControlEvents:UIControlEventTouchUpInside];
[customBackView addSubview:tempButton];
[customBackView bringSubviewToFront:tempButton];
UIBarButtonItem * infoButton = [[UIBarButtonItem alloc] initWithCustomView:customBackView];
//In this case your button will be on the right side
navTitle.rightBarButtonItem = infoButton;
//Add NavigationBar on main view
navBar.items = #[navTitle];
[self.view addSubview:navBar];
[self.view bringSubviewToFront:navBar];

How to change leftBarbuttonItem title?

I want to change leftBarButton title. I've tried this
UIBarButtonItem *newBackButton =
[[UIBarButtonItem alloc] initWithTitle:#"Back"
style:UIBarButtonItemStyleBordered
target:nil
action:nil];
[[self navigationItem] setLeftBarButtonItem:newBackButton];
but it brings changes like
But I want it like
How it can be possible?
It may helpful for you
UIBarButtonItem *backBarButton = [[UIBarButtonItem alloc] initWithTitle:#"Back" style:UIBarButtonItemStyleDone target:self action:#selector(backAction:)];
self.navigationItem.leftBarButtonItem = backBarButton;
From the view controller (ViewController1) that is pushing the next view controller (ViewController2), you need to set the backBarButtonItem.
#implementation ViewController1
- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"New Title" style:UIBarButtonItemStylePlain target:nil action:nil];
}
It's totally normal that you don't see any arrow in your back button. That's because you're creating a new bar button that you set its title and its style. But the style you've set for your bar button item won't give you what you wanted.
I suppose that you're using UINavigationController to navigate. If it's the case, you need to get a reference to navigationBar that UINavigationController displays on the screen. Then, you'll be able to change its color via tint color property. So,
[self.navigationController.navigationBar setTintColor:[UIColor redColor]];
would do what you want to achieve. Here is the image i obtained using the code i mentioned above.
If you're not using UINavigationController, the simplest solution is to provide an image for your back button which has already an arrow.
You should set backBarButtonItem instead of leftBarButtonItem. And remember to set it not in current view controller (where you wish it to be displayed) but in parent one (to which this button will return you).
Use this Code and
UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *backBtnImage = [UIImage imageNamed:#"BackBtn.png"] ;
[backBtn setBackgroundImage:backBtnImage forState:UIControlStateNormal];
[backBtn addTarget:self action:#selector(goback) forControlEvents:UIControlEventTouchUpInside];
backBtn.frame = CGRectMake(0, 0, 54, 30);
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithCustomView:backBtn] ;
self.navigationItem.leftBarButtonItem = backButton;
and for going to back use this method .
-(void)goback
{
[self.navigationController popViewControllerAnimated:YES];
}
This worked for me
UIImage *image = [[UIImage imageNamed:#"btn_back.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:#selector(backAction:)];
self.navigationItem.leftBarButtonItem = button;
- (IBAction)backAction:(id)sender
{
MainMenuViewController *mainMenuViewController = [[MainMenuViewController alloc] init];
[self.navigationController pushViewController:mainMenuViewController animated:YES];
}

picture appears as white space in button

I downloaded from a free icon DB a thumb up icon, its size is too large for a button and it had white background.I decided to open it in pixelmator resized the icon and removed the background. when opening it with preview it looks great but when its set to be the button's image in xcode it appears as a white circle.
here is the icon after edit (30x30 png)
and this is how it looks on the button
what should I do to fix this?
edit/ upadte:
I tried #yunas code and it works in the navigation bar not for the toolbar (didn't even show the button).
Trying this code:
UIImage* image = [UIImage imageNamed:#"imageName"];
UIBarButtonItem *likeBtn = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:#selector(action_clicked:)];
NSArray* toolbarItems = [NSArray arrayWithObjects:likeBtn,nil];
self.toolbarItems = toolbarItems;
self.navigationController.toolbarHidden = NO;
resulted again in a button with the white drawing
So I was wondering: Is it even possible to have colored buttons in the toolbar? maybe i'm trying the imposible...
edit/ upadte II - the solution: wrapping a UIButton inside a UIBarButtonItem
#interface StatusUIBarButtonItem : UIBarButtonItem
- (id) initWithStatus: (enum StatusEnum)p_statusEnum;
#end
#implementation StatusUIBarButtonItem
- (instancetype)initWithStatus:(enum StatusEnum)p_statusEnum
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[self getStatusImage] forState:UIControlStateNormal];
[button addTarget:self action:#selector(status_Clicked:) forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 20, 20)];
self = [super initWithCustomView:button];
if (self)
{
self.statusButton = button;
}
return self;
}
#end
then in the ViewController class:
-(void) viewDidLoad
{
StatusUIBarButtonItem* stausBtn = [[StatusUIBarButtonItem alloc] initWithStatus:self.status];
NSArray* toolbarItems = [NSArray arrayWithObjects: stausBtn, nil];
self.toolbarItems = toolbarItems;
self.navigationController.toolbarHidden = NO;
}
I hope this will help others that like me want colored images in the toolbar
UIImage *buttonImage = [UIImage imageNamed:#"imageName.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
button.adjustsImageWhenDisabled = NO;
button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
[button addTarget:self action:#selector(action:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = customBarItem;

vertically aligning UINavigationItems

I have customized the UINavigationBar's height to 100px and I'd like to add buttons onto this customized bar.
All is good except the button seems to want to sit on the bottom of the nav bar no matter what. I can't get it to align to the center or the top of the nav bar.
Here is the code; first I create a navigation controller in the app delegate and add one button on the right.
// set main navigation controller
temp *tempc = [[temp alloc] initWithNibName:#"temp" bundle:nil];
self.navigationController = [[UINavigationController alloc] initWithRootViewController:tempc];
UIBarButtonItem *navItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:nil action:nil];
[tempc.navigationItem setRightBarButtonItem:navItem];
[self.window addSubview:self.navigationController.view];
[self.window makeKeyAndVisible];
then I resize the navigation bar in the "temp" view controller like so:
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
CGRect frame = CGRectMake(0.0f, 0.0f, 320.0f, 100.0f);
[self.navigationController.navigationBar setFrame:frame];
[self.navigationController.navigationBar setAutoresizingMask:UIViewAutoresizingFlexibleBottomMargin];
}
I've also tried to add a custom view to the rightBarButtonItem but I can't get the added custom view to touch the top completely.
And the code for this unfortunate attempt:
// set main navigation controller
temp *tempc = [[temp alloc] initWithNibName:#"temp" bundle:nil];
self.navigationController = [[UINavigationController alloc] initWithRootViewController:tempc];
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 36.0f, 80.0f)];
[customView setBackgroundColor:[UIColor blueColor]];
UIButton *customButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[customButton setFrame:CGRectMake(0, 22.0f, 36.0f, 36.0f)];
[customButton setTitle:#"+" forState:UIControlStateNormal];
[customView addSubview:customButton];
UIBarButtonItem *customItem = [[UIBarButtonItem alloc] initWithCustomView:customView];
Does anyone know how to vertically align UIBarButtonItems on a UINavigationBar?
This will move page title and all buttons up 20 px:
[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:-20.0 forBarMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setBackgroundVerticalPositionAdjustment:-20.0 forBarMetrics:UIBarMetricsDefault];
The current accepted answer from alhcr (Option 1) does not work if you only have a rightBarButtonItem and no left. It is also making an assumption about the subview ordering of the UINavigationBar which is not guaranteed and could very well change in a future version of iOS. Here is a better way of customizing navigation button frames:
// UINavigationBar subclass
- (void)layoutSubviews {
[super layoutSubviews];
UINavigationItem *navigationItem = [self topItem];
for (UIView *subview in [self subviews]) {
if (subview == [[navigationItem rightBarButtonItem] customView]) {
CGRect newRightButtonRect = CGRectMake(...new rect...);
[subview setFrame:newRightButtonRect];
}
else if (subview == [[navigationItem backBarButtonItem] customView]) {
CGRect newBackButtonRect = CGRectMake(...new rect...);
[subview setFrame:newBackButtonRect];
}
}
}
Option 1:
create UINavigationBar subclass
inside this class override - (void)layoutSubviews where you will reposition UIBarButtonItems
in Interface Builder set UINavigationBar class to UINavigationBar subclass
Example:
inside subclass of UINavigationBar:
- (void)layoutSubviews {
int index = 0;
for ( UIButton *button in [self subviews] ) {
if(index == 1) {
[button setFrame:CGRectMake(5,40,60,40)]; //leftBarButtonItem
} else if(index == 2) {
[button setFrame:CGRectMake(275,40,40,40)]; //rightBarButtonItem
}
++index;
}
}
view controller:
- (void)viewDidLoad {
...
UIBarButtonItem *navItem1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:nil action:nil];
UIBarButtonItem *navItem2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:nil action:nil];
[self.navigationItem setRightBarButtonItem:navItem1];
[self.navigationItem setLeftBarButtonItem:navItem2];
CGRect frame = CGRectMake(0.0f, 0.0f, 320.0f, 100.0f);
[self.navigationController.navigationBar setFrame:frame];
...
}
Option 2 (inserting UIBarButtonItem doesn't work):
UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0,0,320,100)];
[self.view addSubview:navigationBar];
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button setFrame:CGRectMake(0,25,50,50)];
[navigationBar addSubview:button];
I found the solution of this problem by making adjustment in the Image Edge Insets of the custom button. I had the requirement in the app to increase the height of the navigation bar and after increasing the height makes the rightBarButtonItem and leftBarButtonItem images unpositioned problem.
Find the code below:-
UIImage *image = [[UIImage imageNamed:#"searchbar.png"];
UIButton* searchbutton = [UIButton buttonWithType:UIButtonTypeCustom];
[searchbutton addTarget:self action:#selector(searchBar:) forControlEvents:UIControlEventTouchUpInside];
searchbutton.frame = CGRectMake(0,0,22, 22);
[searchbutton setImage:image forState:UIControlStateNormal];
[searchbutton setImageEdgeInsets:UIEdgeInsetsMake(-50, 0,50, 0)];
// Make BarButton Item
UIBarButtonItem *navItem = [[UIBarButtonItem alloc] initWithCustomView:searchbutton];
self.navigationItem.rightBarButtonItem = navItem;

Add button to navigationbar programmatically

Hi I need to set the button on right side, in navigation bar, programatically , so that if I press the button I will perform some actions. I have created the navigation bar, programatically by;
navBar=[[UINavigationBar alloc]initWithFrame:CGRectMake(0,0,320,44) ];
Similarly, I need to add the button, on the right side of this navigation bar. For that I used,
1.
UIView* container = [[UIView alloc] init];
// create a button and add it to the container
UIButton* button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 130, 44.01)];
[container addSubview:button];
[button release];
// add another button
button = [[UIButton alloc] initWithFrame:CGRectMake(160, 0, 50, 44.01)];
[container addSubview:button];
[button release];
// now create a Bar button item
UIBarButtonItem* item = [[UIBarButtonItem alloc] initWithCustomView:container];
// set the nav bar's right button item
self.navigationItem.rightBarButtonItem = item;
[item release];
2.
UIImage *im;
im=[UIImage imageNamed:#"back.png"];
[button setImage:im forState:UIControlStateNormal];
[im release];
backButton = [[UIBarButtonItem alloc] initWithCustomView:button];
[backButton setImageInsets:UIEdgeInsetsMake(0, -10,5, 5)];
[self.navigationItem setRightBarButtonItem:backButton];
3.
UIBarButtonItem *refreshItem = [[UIBarButtonItem alloc] initWithTitle:#"button" style:UIBarButtonItemStylePlain target:self action:#selector(refreshLogsAction:)];
self.navigationItem.rightBarButtonItem = refreshItem;
[refreshItem release];
I tried all these ways, but none is displaying the button on the right hand side.
Inside my UIViewController derived class, I am using the following inside viewDidLoad:
UIBarButtonItem *flipButton = [[UIBarButtonItem alloc]
initWithTitle:#"Flip"
style:UIBarButtonItemStyleBordered
target:self
action:#selector(flipView:)];
self.navigationItem.rightBarButtonItem = flipButton;
[flipButton release];
This adds a button to the right hand side with the title Flip, which calls the method:
-(IBAction)flipView
This looks very much like you #3, but it is working within my code.
UIImage* image3 = [UIImage imageNamed:#"back_button.png"];
CGRect frameimg = CGRectMake(15,5, 25,25);
UIButton *someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:image3 forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(Back_btn:)
forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];
UIBarButtonItem *mailbutton =[[UIBarButtonItem alloc] initWithCustomView:someButton];
self.navigationItem.leftBarButtonItem =mailbutton;
[someButton release];
///// called event
-(IBAction)Back_btn:(id)sender
{
//Your code here
}
SWIFT:
var image3 = UIImage(named: "back_button.png")
var frameimg = CGRect(x: 15, y: 5, width: 25, height: 25)
var someButton = UIButton(frame: frameimg)
someButton.setBackgroundImage(image3, for: .normal)
someButton.addTarget(self, action: Selector("Back_btn:"), for: .touchUpInside)
someButton.showsTouchWhenHighlighted = true
var mailbutton = UIBarButtonItem(customView: someButton)
navigationItem?.leftBarButtonItem = mailbutton
func back_btn(_ sender: Any) {
//Your code here
}
To add search button on navigation bar use this code:
UIBarButtonItem *searchButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemSearch target:self action:#selector(toggleSearch:)];
self.navigationController.navigationBar.topItem.rightBarButtonItem = searchButton;
and implement following method:
- (IBAction)toggleSearch:(id)sender
{
// do something or handle Search Button Action.
}
How to add an add button to the navbar in swift:
self.navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .Add, target: self, action: "onAdd:")
onAdd:
func onAdd(sender: AnyObject) {
}
self.navigationItem.rightBarButtonItem=[[[UIBarButtonItem alloc]initWithTitle:#"Save" style:UIBarButtonItemStylePlain target:self action:#selector(saveAction:)]autorelease];
-(void)saveAction:(UIBarButtonItem *)sender{
//perform your action
}
Swift version, add this in viewDidLoad:
var doneButton = UIBarButtonItem(title: "Done", style: UIBarButtonItemStyle.Plain, target: self, action: "doneButton:")
navigationItem.rightBarButtonItem = doneButton
And this in your View Controller class
func doneButton(sender: UIBarButtonItem) {
println(111)
}
Use following code:
UIBarButtonItem *customBtn=[[UIBarButtonItem alloc] initWithTitle:#"Custom" style:UIBarButtonItemStylePlain target:self action:#selector(customBtnPressed)];
[self.navigationItem setRightBarButtonItem:customBtn];
Simple use native editBarButton like this
self.navigationItem.rightBarButtonItem = self.editButtonItem;
[self.navigationItem.rightBarButtonItem setAction:#selector(editBarBtnPressed)];
and then
- (void)editBarBtnPressed {
if ([infoTable isEditing]) {
[self.editButtonItem setTitle:#"Edit"];
[infoTable setEditing:NO animated:YES];
}
else {
[self.editButtonItem setTitle:#"Done"];
[infoTable setEditing:YES animated:YES];
}
}
Have fun...!!!
In ViewDidLoad method of ViewController.m
UIBarButtonItem *cancel = [[UIBarButtonItem alloc] initWithTitle:#"Cancel" style:UIBarButtonItemStyleBordered target:self action:#selector(back)];
[self.navigationItem setLeftBarButtonItem:cancel];
"(back)" selector is a method to dissmiss the current ViewController
Try this.It work for me.
Add button to navigation bar programmatically, Also we set image to navigation bar button,
Below is Code:-
UIBarButtonItem *Savebtn=[[UIBarButtonItem alloc]initWithImage:
[[UIImage imageNamed:#"bt_save.png"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
style:UIBarButtonItemStylePlain target:self action:#selector(SaveButtonClicked)];
self.navigationItem.rightBarButtonItem=Savebtn;
-(void)SaveButtonClicked
{
// Add save button code.
}
If you are not looking for a BarButtonItem but simple button on navigationBar then below code works:
UIButton *aButton = [UIButton buttonWithType:UIButtonTypeCustom];
[aButton setBackgroundImage:[UIImage imageNamed:#"NavBar.png"] forState:UIControlStateNormal];
[aButton addTarget:self
action:#selector(showButtonView:)
forControlEvents:UIControlEventTouchUpInside];
aButton.frame = CGRectMake(260.0, 10.0, 30.0, 30.0);
[self.navigationController.navigationBar addSubview:aButton];
Hello everyone !! I created the solution to the issue at hand where Two UIInterface orientations are wanted using the UIIMagePicker.. In my ViewController where I handle the segue to the UIImagePickerController
**I use a..
-(void) editButtonPressed:(id)sender {
BOOL editPressed = YES;
NSUserDefaults *boolDefaults = [NSUserDefaults standardUserDefaults];
[boolDefaults setBool:editPressed forKey:#"boolKey"];
[boolDefaults synchronize];
[self performSegueWithIdentifier:#"photoSegue" sender:nil];
}
**
Then in the AppDelegate Class I do the following.
- (NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
BOOL appDelBool;
NSUserDefaults *boolDefaults = [NSUserDefaults standardUserDefaults];
appDelBool = [boolDefaults boolForKey:#"boolKey"];
if (appDelBool == YES)
return (UIInterfaceOrientationMaskPortrait);
else
return UIInterfaceOrientationMaskLandscapeLeft;
}