Align UIBarButtonItem Title to prevent overlapping of other Buttons?

Question

I want to create a header toolbar like shown in the image below. It is from the web view of the Twitter app.

enter image description here

I created a UIToolbar and put it at the top. Then I inserted the Buttons left and right and changed the Identifier to get the correct symbols.

My problem is the text in the middle. I create a UIBarButtonItem and placed it between the buttons. Here is my Problem.

How to I achieve that the UIBarButtonItem title does not overlap the left and the right button when the title is to long?

In my case:

enter image description here

How do I achieve that the title gets ... at the end if it gets to long?
How can I set the sub title?
How can I achieve that the button is not clickable, i.e., has color black?

Edit Using the answer from @Viral Savaj: Here is what it looks like:

enter image description here

score 1 · Answer 1 · answered Apr 23 '15 at 20:34

1

To test if the title is too long, you should use character counting. Let myHeaderBarString represent your string for the title. You will probably have to adjust this number to find the right length before it gets truncated.

if count(myHeaderBarString) > 40 {

myHeaderBarString = myHeaderBarString.substringToIndex(40)
 myHeaderBarString.append("...") 

}

For a subtitle, you should insert a new view with a UILabel inside it.

answered Apr 23 '15 at 20:34

scott

1,194
7
18

This is no good, since you'd only be tailoring the look for one aspect ratio and screen size. – Colin Basnett Dec 21 '16 at 18:20
this is a quick solution, the best one would be to relate it to screen width and font size. – scott Dec 21 '16 at 18:21

score 0 · Accepted Answer · edited May 23 '17 at 12:33

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 *crossBarButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
[crossBarButton setTitle:@"X" forState:UIControlStateNormal];

//Center view with two buttons and seprator for them
UILabel *topTitle =  [[UILabel alloc] initWithFrame: CGRectMake(50,0, self.view.bounds.size.width-100, 22)];
topTitle.text = @"text"; 
topTitle.font = [UIFont systemFontOfSize:25];
topTitle.lineBreakMode = NSLineBreakByCharWrapping;


UILabel *subTitle =  [[UILabel alloc] initWithFrame: CGRectMake(50,20, self.view.bounds.size.width-100, 18)];
subTitle.text = @"subtext"; 
subTitle.font = [UIFont systemFontOfSize:18];
subTitle.lineBreakMode = NSLineBreakByCharWrapping;

//Right button with seprator before that
UIButton *uploadBarButton = [[UIButton alloc] initWithFrame:CGRectMake(self.view.frame.size.width-50, 0, 44, 44)];
[uploadBarButton setTitle:@"U" forState:UIControlStateNormal];


[navTitle1 addSubview:crossBarButton];
[navTitle1 addSubview:topTitle];
[navTitle1 addSubview:subTitle];
[navTitle1 addSubview:uploadBarButton];
self.navigationItem.titleView = navTitle1;

You can refer THIS for more detail.

How can I achieve that the button is not clickable, i.e., has color black? — , Apr 23 '15 at 20:59
@stephan1001 regarding which button you are talking, If you are talking about `crossBarButton`,`uploadBarButton`, then you can set `[crossBarButton setEnabled:NO];` and set color of that button by `[crossBarButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];` — Viral Savaj, Apr 24 '15 at 03:19
Should I use a NavigationBar, a ToolBar or a custom UIView for my purpose? — , Apr 24 '15 at 18:59
@stephan1001 Just Embed NavigationController to your ViewController, from menu "Editor->Embed In->Navigation Control", then Put this code in ViewController's viewdidload method And It works. — Viral Savaj, Apr 25 '15 at 05:07
I will accept your answer there are just a few more questions please see my last edit. 1) Why does the navTitle1 has a margin left and right? 2) How do I get the header semi transparent? — , Apr 25 '15 at 11:59

score 0 · Answer 3 · answered Feb 23 '16 at 10:10

Use BarButtonItem.customView, it works.

let button = UIButton(frame: CGRectMake(0,0,200,40))

button.titleLabel?.adjustsFontSizeToFitWidth = true

button.setTitle("gogogogogogogogoogogogogogogogogogoogo", forState: .Normal)

button.setTitleColor(UIColor.blackColor(), forState: .Normal)

button.addTarget(self, action: "showMessage:", forControlEvents: .TouchUpInside)

let rightBarButtonItem = UIBarButtonItem()

rightBarButtonItem.customView = button

self.navigationItem.rightBarButtonItem = rightBarButtonItem

Align UIBarButtonItem Title to prevent overlapping of other Buttons?

3 Answers3