Make custom back button's clickable area smaller in Navigation controller - iphone

I've created a custom back button with the code below, however the clickable area is very big and goes well beyond the icon itself. Does anyone know how to set the clickable area, or make it the same size as the image?
Thanks
UIImage *buttonImage = [UIImage imageNamed:#"prefs"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
[button addTarget:self action: #selector(handleBackButton)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = customBarItem;
The clickable area is shown in red.
Thanks!

If you want to prevent the click other than the button then add the custom button to UIView then set that view as custom view to the barbuttonItem
Your code will become like this :
UIImage *buttonImage = [UIImage imageNamed:#"prefs"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
[button addTarget:self action: #selector(handleBackButton)
forControlEvents:UIControlEventTouchUpInside];
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height)];
[view addSubview:button];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:view];
self.navigationItem.leftBarButtonItem = customBarItem;
This should work as it worked for me.

#Prasad Devediga, swift version works greatly:
let btnName = UIButton()
btnName.setImage(UIImage(named: "settings_filled_25"), forState: .Normal)
btnName.frame = CGRectMake(0, 0, 30, 30)
btnName.addTarget(self, action: Selector("toggleRight"), forControlEvents: .TouchUpInside)
var rightView = UIView()
rightView.frame = CGRectMake(0, 0, 30, 30)
rightView.addSubview(btnName)
let rightBarButton = UIBarButtonItem()
rightBarButton.customView = rightView
self.navigationItem.rightBarButtonItem = rightBarButton

Related

Custom button Image not visible on navigation bar iOS 7.1

I had added custom button on my navigation bar. here is the code now my problem is that in iOS7 I am able to see back Button image with text, while in iOS 7.1 the image is not displaying only text is displaying.
-(void)addBackButton{
self.navigationItem.hidesBackButton = YES;
[backButtonView removeFromSuperview];
if (backButtonView) {
[backButtonView release];
backButtonView = nil;
}
backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0,6,70,30)];
NSString *strText = #"Back";
btnBack = [[UIButton alloc] initWithFrame:CGRectMake(2,0, 70, 31)];
[btnBack setTitle:strText forState:UIControlStateNormal];
btnBack.titleLabel.font = [UIFont fontWithName:#"HelveticaNeue-Medium" size:17];
btnBack.titleLabel.textColor = IOS7ColorBtnBackText;
[btnBack setImage:[UIImage imageNamed:#"Left_Arrow.png"] forState:UIControlStateNormal];
[btnBack addTarget:self action:#selector(btnBack:) forControlEvents:UIControlEventTouchUpInside];
[backButtonView addSubview:btnBack];
[btnBack release];
[self.navigationController.navigationBar addSubview:backButtonView];
}
Instead of adding it as subview in navigationView you can assign custom button to left or right button and this too works
UIButton *backbtn=[[UIButton alloc]initWithFrame:CGRectMake(20,5,42, 42)];
[backbtn setImage:[UIImage imageNamed:#"arrow.png"] forState:UIControlStateNormal];
[backbtn setTitle:#"Login" forState:UIControlStateNormal];
[backbtn addTarget:self action:#selector(didTapBackButton:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *barbtn=[[UIBarButtonItem alloc]initWithCustomView:backbtn];
self.navigationItem.leftBarButtonItem=barbtn;
[self.navigationItem setHidesBackButton:YES];
This do work, but you made mistake here
[self.navigationController.navigationBar addSubview:backButtonView];
///// Your code to create custom button goes here
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]
initWithCustomView:BackButton];
Create custom button and add it in your navigation left bar button item as a custom view as follows:
let btnShowMenu = UIButton()
let image: UIImage = UIImage(named: "requiredImageName")!
btnShowMenu.setImage(image, for: UIControlState.normal)
btnShowMenu.frame = CGRect(x: 0, y: 0, width: 15, height: 15)
btnShowMenu.addTarget(self, action: #selector(addAnAction(_:)), for: UIControlEvents.touchUpInside)
let customBarItem = UIBarButtonItem(customView: btnShowMenu)
self.navigationItem.leftBarButtonItem = customBarItem;

Adding a Custom Button to a UINavigationItem LeftBarButtonItem

Could anyone tell me why this code does not working?
self.backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[self.backButton setImage:[UIImage imageNamed:#"back_arrow.png"]
forState:UIControlStateNormal];
self.backButton.contentMode = UIViewContentModeCenter;
[self.backButton addTarget:self
action:#selector(backButtonAction:)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.backButton];
[navigationItem setLeftBarButtonItem:backButtonItem animated:NO];
navigationItem.hidesBackButton = YES;
Edit:
Nothing appears on the leftBarButtonItem. That's the problem.
From the docs:
"When creating a custom button—that is a button with the type UIButtonTypeCustom—the frame of the button is set to (0, 0, 0, 0) initially. Before adding the button to your interface, you should update the frame to a more appropriate value."
So you should see something if you set the frame in line 2, eg:
self.backButton.frame = CGRectMake(0, 0, 40, 20);
This should work
CGRect rect = CGRectMake(10, 0, 30, 30);
self.backButton = [[UIButton alloc] initWithFrame:rect];
[self.backButton setImage:[UIImage imageNamed:#"back_arrow.png"]
forState:UIControlStateNormal];
self.backButton.contentMode = UIViewContentModeCenter;
[self.backButton addTarget:self
action:#selector(backButtonAction:)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.backButton];
self.navigationItem.leftBarButtonItem = backButtonItem;
self.navigationItem.hidesBackButton = YES;

change back button of UINavigationBar

I have this code that changes the back button of my UINavigationBar
// Set the custom back button
UIImage *buttonImage = [UIImage imageNamed:#"backag.png"];
//create the button and assign the image
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:#"selback.png"] forState:UIControlStateHighlighted];
button.adjustsImageWhenDisabled = NO;
//set the frame of the button to the size of the image (see note below)
button.frame = CGRectMake(0, 0, 30, 30);
[button addTarget:self action:#selector(back) forControlEvents:UIControlEventTouchUpInside];
//create a UIBarButtonItem with the button as a custom view
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = customBarItem;
// Cleanup
[customBarItem release];
If I put it in the viewDidLoad method it works fine. However, when I load the next view the old style button shows up. To fix this I tried putting this code in the next view's viewDidLoad method, but then no button is visible.
Any ideas as to what might be causing this?
Thanks!
Apply same code in
-(void)viewDidAppear:(BOOL)animated
{
}
I used tis code in both view and it's worked fine...
// add following code in your both view's viewDidLoad method...
UIButton *leftButton1 = [UIButton buttonWithType:UIButtonTypeCustom];
[leftButton1 setImage:[UIImage imageNamed:#"Viewone.png"] forState:UIControlStateNormal];
leftButton1.frame = CGRectMake(0, 0, 30, 30);
[leftButton1 addTarget:self action:#selector(yourclickevent) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:leftButton1];
[leftButton1 release];
UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
[leftButton setImage:[UIImage imageNamed:#"ViewSecond.png"] forState:UIControlStateNormal];
leftButton.frame = CGRectMake(0, 0, 30, 30);
[leftButton addTarget:self action:#selector(yourclickevent) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:leftButton];
[leftButton release];
Hope,this will help you...enjoy..
You need to ensure you set the hidesBackButton property on the navigationItem:
// Setup custom back button
self.navigationItem.hidesBackButton = YES;

Can I change the position of navigationbar item?

Here is the snapshot:
And the code is here:
UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeCustom];
leftButton.frame = CGRectMake(0.0f, 0.0f, 46.0f, 32.0f);
[leftButton setBackgroundImage:[UIImage imageNamed:#"navi_register_up.png"] forState:UIControlStateNormal];
[leftButton addTarget:self action:#selector(doRegister) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *leftBarItem = [[UIBarButtonItem alloc] initWithCustomView:leftButton];
self.navigationItem.leftBarButtonItem = leftBarItem;
[leftBarItem release];
Is there any way to move the button up some px?
Thank you:)
You need to create a UIBarButtonItem with system item UIBarButtonSystemItemFixedSpace with -5 width which will remove 5 px padding. Then set leftBarButtonItems with both fixed space item and your back bar item like this -
UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
[negativeSpacer setWidth:-5];
self.navigationItem.leftBarButtonItems = [NSArray arrayWithObjects:negativeSpacer,leftBarItem,nil];
You can try this,
leftButton.imageEdgeInsets = UIEdgeInsetsMake(-2, 0, 0, 0);
Add a UIBarButtonSystemItemFlexibleSpace item in between the items you want to separate.
Here's a Swift 3 version of the most voted answer:
let soundButton = UIBarButtonItem(image:image , style: UIBarButtonItemStyle.plain, target: self, action: #selector(self.soundPressed))
let negativeSpacer = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
negativeSpacer.width = -5
self.navigationItem.rightBarButtonItems = [negativeSpacer,soundButton]
The height of a standard bar button is 29pt. Do yourself a favor and just shrink leftbutton's height and navi_register_up.png's height instead.
You can use this code,I think this will be helpful to you.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0,0,50,32);
[button setBackgroundImage:[UIImage imageNamed:#"btn_back.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(BackBtnClicked) forControlEvents:UIControlEventTouchUpInside];
UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 32)];
backButtonView.bounds = CGRectOffset(backButtonView.bounds, -1, -4);
[backButtonView addSubview:button];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
//barButtonItem.imageInsets = UIEdgeInsetsMake(-6, 20, 30, 0);
[self.navigationItem setLeftBarButtonItem:barButtonItem];
I had a similar issue and found an option that sufficed in the storyboard. Just click on the navbar item and you should see the x/y position options.

How can i offset UIButton image inside UIBarButtonItem on navBar?

Here is the code i am using to insert a custom UIBarButtonItem as the leftButton on my navbar. The issue is that the button is too close to the left edge and i cant figure out how to indent it a little without using another image with padding on the left?
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
btn.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
[btn setBackgroundImage:[UIImage imageNamed:#"image.png"] forState:UIControlStateNormal];
self.myBtn = btn;
[btn release];
UIBarButtonItem *barBtn = [[UIBarButtonItem alloc] initWithCustomView:self.myBtn];
self.myBarBtn = barBtn;
self.myBarBtn.imageInsets = UIEdgeInsetsMake(0, 5, 0, 0);
[self.navigationItem setLeftBarButtonItem:self.myBarBtn animated:YES];
[barBtn release];
I've tried adjusting the frame, edgeInsets, all without any luck. The barButtonItem is still too close to the left edge. Is there any way to offset the image for the button?
Thx
UIImage *buttonImage = [UIImage imageNamed:#"Close.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
button.imageEdgeInsets = UIEdgeInsetsMake(0, -40, 0, 0);
button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
[button addTarget:self action:#selector(donePressed:) forControlEvents:UIControlEventTouchUpInside];
//create a UIBarButtonItem with the button as a custom view
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = customBarItem;
there is the custom left or right button with swift language
let buttonEdit: UIButton = UIButton.buttonWithType(UIButtonType.Custom) as UIButton
buttonEdit.frame = CGRectMake(0, 0, 40, 40)
buttonEdit.setImage(UIImage(named:"nav-right-Y.png"), forState: UIControlState.Normal)
buttonEdit.addTarget(self, action: "rightNavItemEditClick", forControlEvents: UIControlEvents.TouchUpInside)
var rightBarButtonItemEdit: UIBarButtonItem = UIBarButtonItem(customView: buttonEdit)
self.navigationItem.rightBarButtonItem = rightBarButtonItemEdit