CODEWITHSUNDEEP
iosuser-interfaceinterface-builderxcode-storyboard
user4788711
user4788711

Reputation:

Align UIBarButtonItem Title to prevent overlapping of other Buttons?

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.

In my case:

enter image description here

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

enter image description here

Upvotes: 0

Views: 2233

Answers (3)

Rain
Rain

Reputation: 320

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

Upvotes: 0

Viral Savaj
Viral Savaj

Reputation: 3389

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.

Upvotes: 0

scott
scott

Reputation: 1194

  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.

Upvotes: 2

Related Questions