Custom view button in navigation bar has unwanted top margin - ios

I'm creating a custom view, which needs to be clickable, hence the button, and need to be in the left at the navigation bar (so, I replace the leftBarButtonItem).
If I add my custom view, to a UIBarButtonItem with - (id)initWithCustomView:(UIView *)customView;, the placement is exactly what I want, but I can't "click" on it. If I add my custom view as an UIButton subView, and use the button in the UIBarButtonItem - (id)initWithCustomView:(UIView *)customView; I can click on it, but now my cusotm view has a topmargin of aproximately 26 points, exceeding the navigationBar height.
This has the correct position, but can't click on it
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 44)];
....
UIBarButtonItem *customButton = [[UIBarButtonItem alloc] initWithCustomView:customView];
self.navigationItem.leftBarButtonItem = customButton;
This has the wrong position, but can click on it
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 44)];
....
UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addSubview:customView];
[button addTarget:self action:#selector(userProfile) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.leftBarButtonItem = customButton;
Hope I have made myself clear. I'm really clueless with this. I've tried forcing imageEdgeInsets in the UIButton, modifying the frame "y" origin making it negative... but nothing works.
EDIT: #kschaeffer solution works. Just needed to set the button frame the same as the customView frame.
This no longer works in iOs 7
In this case, it gets an unwanted left margin, and stops being clickable (no touch event gets recorded for the button as far as I see)

Try to set the customButton frame the same as the custom view. This actually works for me.
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 120, 44)];
UIButton *customButton = [[UIButton alloc] initWithFrame:customView.bounds];
[customButton addTarget:target action:#selector(userProfile) forControlEvents:UIControlEventTouchUpInside];
[customView addSubview:customButton];
UIBarButtonItem *customItem = [[UIBarButtonItem alloc] initWithCustomView:customView];
self.navigationItem.rightBarButtonItem = customItem;

Related

UIBarButtonItem not clickable after changing position

I'm using Xcode 8.0.
I add a custom left barbutton to my NavBar:
UIImage * imageNormal = [UIImage imageNamed:#"InfoIcon"];
UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:#selector(testPressed ) forControlEvents:UIControlEventTouchUpInside];
[button setBackgroundImage:imageNormal forState:UIControlStateNormal];
// set the frame of the button
button.frame = CGRectMake(0, 0, imageNormal.size.width, imageNormal.size.height);
UIView * view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, imageNormal.size.width, imageNormal.size.height)];
[view addSubview:button];
// set the barbuttonitem to be the view
UIBarButtonItem * barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:view];
self.navigationItem.leftBarButtonItem = barButtonItem;
Here what I got:
unfortunately my button is not centered because the Nav bar has a custom image higher than the standard. But if I press the info Icon it works.
If I change the icon position with this line of code:
button.frame = CGRectMake(0, -30, imageNormal.size.width, imageNormal.size.height);
I got the right positioning:
But in this case the bar button is not anymore clickable, and I don't get why this is happening.
As workaround I attach a gesture to the view:
UITapGestureRecognizer *_tapOnVideoRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self.revealViewController action:#selector(revealToggle:)];
[view addGestureRecognizer:_tapOnVideoRecognizer];
it works, but the tap is on the view and not on the button so that the changing status of the button when pressed is not working.
#JakubKnejzlik from https://stackoverflow.com/a/12554715/1320479
suggests:
This can be fixed by subclassing the wrapper view (superview of button, custom view of uibarbuttonitem) and overriding the hittest method to return button accordingly.
But I have no idea how to do it

Changing vertical position of UIBarButtonItem on iOS 8.2

Here is my navigation bar
I had a problem about changing vertical position of Settings UIBarButtonItem on my navigation bar. I would like to move the button item "Settings" down
Here is my code
UIBarButtonItem *settingsItem = [[UIBarButtonItem alloc] initWithTitle:#"Settings" style:UIBarButtonItemStylePlain target:self action:nil];
self.navItem.rightBarButtonItem = settingsItem;
[[UIBarButtonItem appearance] setTitlePositionAdjustment:UIOffsetMake(0,-10) forBarMetrics:UIBarMetricsDefault];
I had tried it again and again. It seemed that it's not work
Could anyone suggest me how to move the button item "Settings" down ?
You can easily add a Custom Button to your NavigationBarItem, Here is the way,
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; //create custom Button
[button setTitle:#"Settings" forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont systemFontOfSize:14.0]];
[button setTitleColor:[UIColor colorWithRed:179.0/255.0 green:40.0/255.0 blue:18.0/255.0 alpha:1] forState:UIControlStateNormal];
button.frame = CGRectMake(0, 0, 50, 20); //Button frame
[button addTarget:self action:#selector(yourCustomSelectorHere) forControlEvents:UIControlEventTouchUpInside]; //Add action method to the button here
UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 63, 33)];
backButtonView.bounds = CGRectOffset(backButtonView.bounds, -14, -7);
[backButtonView addSubview:button];
UIBarButtonItem *barBtnItem = [[UIBarButtonItem alloc]initWithCustomView: backButtonView]; //set button as UIBarButtonItem
self.navigationItem.rightBarButtonItem = barBtnItem; //set barBtnItem to rightBarButtonItem
By changing backButtonView.bounds values you can change the origin of the Button
Cited from apple's documentation on UIAppearance protocol
iOS applies appearance changes when a view enters a window, it doesn’t
change the appearance of a view that’s already in a window.
So if your code of setting UIBarButtonItem's appearance is after the navigationItem assignment code. It won't work

How to customize UINavigationBar

I'm struggling in custom UINavigationBar. The reason i want to customize is because there is same action that can be occur in different view controller. I post some images as an example.
As you can see from the images above. I think you get what i mean. I have been trying and searching, but i don't get the answer i wanted. Furthermore, i have tried using UIView to accomplish this, it worked, but i don't think it is correct way to do this. Therefore, i need help from you guys to lead me to the right path. :) :) Thank you.
You can set custom title view to the navigation bar like this way.
//To hide default back button
self.navigationItem.hidesBackButton=YES;
//Title View for Navigation
UIView *navTitle1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];
[navTitle1 setBackgroundColor:[UIColor lightGrayColor]];
//Left View button and separator
UIButton *backBarButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 50, 44)];
[backBarButton setTitle:#"Back" forState:UIControlStateNormal];
UIView *ttlview1 = [[UIView alloc] initWithFrame:CGRectMake(51, 0, 1, 44)];
[ttlview1 setBackgroundColor:[UIColor darkGrayColor]];
//Center view with two buttons and seprator for them
UIView *middleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 121, 44)];
[middleView setBackgroundColor:[UIColor clearColor]];
[middleView setCenter:navTitle1.center];
UIButton *postBarButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 44)];
[postBarButton setTitle:#"Post" forState:UIControlStateNormal];
UIView *ttlview2 = [[UIView alloc] initWithFrame:CGRectMake(middleView.frame.size.width/2, 0, 1, 44)];
[ttlview2 setBackgroundColor:[UIColor darkGrayColor]];
UIButton *memeBarButton = [[UIButton alloc] initWithFrame:CGRectMake((middleView.frame.size.width/2)+1, 0, 60, 44)];
[memeBarButton setTitle:#"Meme" forState:UIControlStateNormal];
[middleView addSubview:ttlview2];
[middleView addSubview:postBarButton];
[middleView addSubview:memeBarButton];
//Right button with seprator before that
UIView *ttlview3 = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width-71, 0, 1, 44)];
[ttlview3 setBackgroundColor:[UIColor darkGrayColor]];
You can refer THIS for more detail.
You can create 2 custom UIBarButtonItem from 2 views, using this document:
From Apple documentation:
Initializes a new item using the specified custom view.
- (id)initWithCustomView:(UIView *)customView
Parameters customView: A custom view representing the item.
Return Value Newly initialized item with the specified properties.
Left bar item: 1 view contains 3 buttons: Project, Kiara Paradize, Artist Impression.
Right bar item: 1 view contains 4 buttons: Sign up | Login (Profile button when user logged in) | Hamburger menu
Then:
self.navigationItem.leftBarButtonItem = UIBarButtonItem from left
Custom View
self.navigationItem.rightBarButtonItem = UIBarButtonItem from right Custom View

how can I change the horizontal position of BarButtonItem

I can change the y of custom bar button item with setBackgroundVerticalPositionAdjustment, but how can I change the horizontalposition ?
[viewController.navigationItem.rightBarButtonItem setBackgroundVerticalPositionAdjustment:50 forBarMetrics:UIBarMetricsDefault];
You can create bar button with custom view, and in that view you can create your own layout. It can be just simple UIButton, and you can set edgeInsets in UIButton.
see Customization of UINavigationBar and the back button
f.e.
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setBackgroundImage:[UIImage imageNamed:#"chk_back.png"] forState:UIControlStateNormal];
[btn addTarget:self action:#selector(BackBtn) forControlEvents:UIControlEventTouchUpInside];
UIView *customView = [[[UIView alloc] initWithFrame:CGRectMake(0,0, 50, 38)] autorelease];
btn.frame = CGRectMake(10, 3, 30, 32); // where you can set your insets
[customView addSubview:btn];
UIBarButtonItem *barBtn = [[UIBarButtonItem alloc] initWithCustomView:customView];
Or you can add some fixedSpace in Bar after or befor your bar item
UIBarButtonItem *fixedSpace = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
target:nil
action:nil];
[fixedSpace setWidth:20];
You can change the imageInsets of rightBarButtonItem.
For example:
[viewController.navigationItem.rightBarButtonItem setImageInsets:UIEdgeInsetsMake(0, 0, 0, 50)];

Create UIBarButtonItem with back button style

I'm looking for a way to create programmatically an UIBarButtonItem that looks like a back button of UINavigationBar.
Apparently seems like that the back button appears only after a push on the UINavigationController.
So I'm able to insert only a button with the "cancel" style. But my goal is to create a button with the "New Item" style.
Ideas ?
the short answer is you cannot do it.
you can save an image and you can put the image to that position, but the back button is managed by private part of the UINavigationBar.
I think you need to use image. and then set the image be the buttons backgroundImage. such as :
navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
UINavigationItem *navigationItem = [[[UINavigationItem alloc] initWithTitle:#"Detail"] autorelease];
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 70, 30)];
[button setImage:[UIImage imageNamed:#"plain.png"] forState:UIControlStateNormal];
[button addTarget:self action:#selector(buttonClicked:)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc]
initWithCustomView:button];
navigationItem.leftBarButtonItem = buttonItem;
[buttonItem release];
[button release];
[navigationBar pushNavigationItem:navigationItem animated:NO];
[self.view addSubview:navigationBar];
Take a look on this answer : Creating a left-arrow button (like UINavigationBar's "back" style) on a UIToolbar
It gives you a psd file with image that you need.
It works for me:
[self.navigationItem.leftBarButtonItem setTitle:#"Back"];
(custom text with back arrow)

Resources