Adjust vertical position of UIBarButtonItem title inside UIToolbar

Question

Is it possible to adjust the title of a UIBarButtonItem inside an UIToolbar?

I've tried the following lines of code without success:

UIBarButtonItem.appearance().setTitlePositionAdjustment(UIOffset(horizontal: 30, vertical: 30), forBarMetrics: UIBarMetrics.Default)

And this one:

self.setTitlePositionAdjustment(UIOffset(horizontal: 30, vertical: 30), forBarMetrics: UIBarMetrics.Compact)

Masurium

What exactly didn't wort? – Allegorical

Adjusting the title's position vertically – Masurium

Have you tried setTitleEdgeInsets to change the title position, try to use this one, hope this will solve your issue. – Salisbarry

setTitleEdgeInsets is not a property on UIBarButtonItem – Masurium

Indeed. Anybody found a way? iOS 9? – Oxendine

Answer 1

Offset an UIBarButtonItem (Text!) inside a UIToolBar vertically seems not to work with Xcode 7 (Beta 6).

You are right, according to the docs, this should do it: UIBarButtonItem.appearance().setTitlePositionAdjustment

either globally in AppDelegate:

UIBarButtonItem.appearance().setTitlePositionAdjustment(UIOffset(horizontal: 30, vertical: 30), forBarMetrics: UIBarMetrics.Default)

or locally with the item outlet itself:

(Swift)

self.myBarItem.setTitlePositionAdjustment(UIOffset(horizontal: 30, vertical: 30), forBarMetrics: UIBarMetrics.Default)

(Obj C)

[self.myBarItem setTitlePositionAdjustment:UIOffsetMake(30, 30) forBarMetrics: UIBarMetricsDefault];

Is this a bug with Appearance?

Olav

horizontal work but vertical does not make any changes do you know why? – Bivouac

I had the same same problem. When I changed toolbar height to 44, the barbuttonitems became vertically central. Hope it helps someone. – Coparcenary

Answer 2

Change the baselineOffset of the text.

let doneButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(self.someFunction))
let attributes = [NSAttributedString.Key.baselineOffset: NSNumber(value: -3)]
doneButton.setTitleTextAttributes(attributes, for: .normal)

A negative baselineOffset will shift the title text down, a positive value will shift it up. 0 is the default value.

I tested this on iOS 11.

Crosslink

Answer 3

I was frustrated with this too so I subclassed UIBarButtonItem to work as expected. Taking from this answer I came up with this:

@interface TitleAdjustingBarButtonItem(){
    UIView*   _parentView;
    UIButton* _button;
}

@end

@implementation TitleAdjustingBarButtonItem

-(id) initWithTitle:(NSString *)title style:(UIBarButtonItemStyle)style target:(id)target action:(SEL)action{
    _button = [[UIButton alloc] init];
    [_button setTitle:title forState:UIControlStateNormal];

    [_button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];

    [_button sizeToFit];

    _parentView = [[UIView alloc] initWithFrame:_button.bounds];

    [_parentView addSubview:_button];

    return [super initWithCustomView:_parentView];
}

#pragma mark - property setters -

-(void) setTitlePositionAdjustment:(UIOffset)adjustment forBarMetrics:(UIBarMetrics)barMetrics{
    [_button sizeToFit];
    _parentView.bounds = CGRectMake(0.0, 0.0, _button.bounds.size.width - (adjustment.horizontal * 2.0), _button.bounds.size.height - (adjustment.vertical * 2.0));
}

Admittedly it does not account for the different bar metrics but for default metrics I've gotten this to work pretty well.

Volny

Answer 4

I found a workaround. I was trying to change the position of the back button title in the navigation bar. The title seems to be fixed in the lower left corner of it. So I changed the position of the whole navigation bar and adjusted its size accordingly so it would seem to be the same size in the view.

    let xDisplacement: CGFloat = -25 // Adjust horizontal position
    let yDisplacement: CGFloat = 9 // Adjust vertical position
    let h = (self.viewIfLoaded?.frame.size.height)!/12 //Set your height in reference to the size of the view
    let w = (self.viewIfLoaded?.frame.size.height)!//Set your width in reference to the size of the view 
//Change placement adjusting size for change.
    self.navigationController?.navigationBar.frame = CGRect(x: xDisplacement, y: yDisplacement, width: w-xDisplacement, height: h-yDisplacement)

In my case the background is transparent so the adjusting doesn't really make a difference. Also I was trying to move the title left. I think that is the only situation where de adjusting is useful.

Anyway, just a workaround, but I hope it helps.

Total noob here, feedback appreciated.

Hidalgo

Answer 5

Suggestion for this: Use UIButton inside of UIBarButtonItem.

I have a toolbar that has two taller buttons in it on either side (Up Button and Down Button in the screenshot) and when the user initiates an action I show two buttons in the toolbar that only have text on them. When I originally put them on the toolbar as UIBarButtonItem objects, they sat very low on the toolbar and nothing I tried would get them to sit higher. Their position made it hard for the user to press them on iPadPro devices because the bar at the bottom of the device was kind of blocking them.

I found that if I dragged a UIButton to the toolbar, IB would automatically put those inside a UIBarButtonItem as the view, and they were centered vertically in the toolbar. I was then able to adjust the content Insets for the UIButton like I normally would and the change was reflected properly. (Since I was only looking to get them centered vertically, merely using UIButtons worked for me). Remember that any IBActions you hook up should be hooked up to the UIButtons.

I did this with XCode 10.1 and swift 4.

Affiance