CODEWITHSUNDEEP
iosuinavigationcontrolleruibarbuttonitem
addzo
addzo

Reputation: 867

navigationItem setRightBarButtonItems spacing too wide

enter image description here

I'm trying to decrease the distance between these two bar button items.

I'm using 

navigationItem setRightBarButtonItems

to set the two button items but they are too far apart.

I've tried adding negative space, I've tried adding a spacer after it, fixed space, flexible space. Don't see anything in the docs that says you can't change the spacing but I can't find how.

Thanks for the help in advance.

EDIT AFTER ANSWER:

Siu Chung Chan's answer was exactly correct but since I didn't quite get it at first I thought I would share the code that made me realize that he was exactly right.

If you were to put it all in one block this is what his (very correct) answer would look like:

UIView *filterBtnView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
UIButton *filterBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
[filterBtn addTarget:self action:@selector(someMethod) forControlEvents:UIControlEventTouchUpInside];
[filterBtn setBackgroundImage:[UIImage imageNamed:@“someicon”] forState:UIControlStateNormal];
[filterBtnView addSubview:filterBtn];
UIBarButtonItem *btnFilter = [[UIBarButtonItem alloc] initWithCustomView:filterBtnView];

UIView *selectBtnView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
UIButton *selectBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
[selectBtn setBackgroundImage:[UIImage imageNamed:@“someothericon”] forState:UIControlStateNormal];
[selectBtn addTarget:self action:@selector(someOtherMethod:) forControlEvents:UIControlEventTouchUpInside];
[selectBtnView addSubview:selectBtn];
UIBarButtonItem *btnSelect = [[UIBarButtonItem alloc] initWithCustomView:selectBtnView];

[self.navigationItem setRightBarButtonItems:@[btnFilter, btnSelect] animated:YES];

To me, the beauty of this is that it gives a peek into how some of the views are actually set up by Apple to be biased for how they wanted to use them only. So if you want to do highly customized UIs you have to do a lot of UIView manipulation to get around their (perhaps) unintended barriers.

Moral of the story: If a view is not lining up right for you try recreating the view from the UIView level up and then adding it to the view that you want to display it in.

Thanks again Siu Chung Chan!

Upvotes: 8

Views: 2124

Answers (3)

David
David

Reputation: 1071

- (void)addTwoRightBarButtonItems 
{
    UIButton *reloadBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    reloadBtn.frame = CGRectMake(0.0, 0.0, 45.0, 44.0);
    [reloadBtn setImage:[UIImage imageNamed:@"reload_icon"] forState:UIControlStateNormal];men
    reloadBtn.imageEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0);
   // reloadBtn.backgroundColor = [UIColor redColor];

    UIButton *menuBtn = [UIButton buttonWithType:UIButtonTypeSystem];
    menuBtn.frame = CGRectMake(45.0, 0.0, 45.0, 44.0);
    UIImage *image = [[UIImage imageNamed:@"menu_icon"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    [menuBtn setImage:image forState:UIControlStateNormal];
    //menuBtn.backgroundColor = [UIColor greenColor];

    UILabel *badgeLbl = [[UILabel alloc]initWithFrame:CGRectMake(25, 8, 18, 18)];
    badgeLbl.layer.cornerRadius = 9;
    [badgeLbl.layer setMasksToBounds:YES];
    badgeLbl.backgroundColor = [UIColor colorWithRed:255.0/255.0 green:197.0/255.0 blue:0.0 alpha:1.0];
    badgeLbl.textColor = [UIColor colorWithRed:136.0/255.0 green:94.0/255.0 blue:16.0/255.0 alpha:1.0];
    badgeLbl.font = [UIFont fontWithName:@"Lato-Bold" size:9.f];
    badgeLbl.textAlignment = NSTextAlignmentCenter;
    badgeLbl.hidden = YES;
    [menuBtn addSubview:_lblBadge];

    UIBarButtonItem *offset = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
    offset.width = -10.0;

    UIView *v = [[UIView alloc]initWithFrame:(CGRect){.size.width = 90.0,.size.height = 44.0}];
    [v addSubview:reloadBtn];
    [v addSubview:menuBtn];

    UIBarButtonItem *reloadItem = [[UIBarButtonItem alloc] initWithCustomView:v];

    [self.navigationItem setRightBarButtonItems:@[offset,reloadItem]]; //
}

enter image description here

Upvotes: 0

Jimmie
Jimmie

Reputation: 71

The solution you provided works great. If you want to simplify it you can actually use the UIButton as the custom view directly without embedding it in a UIView.

I found that the distance between my new buttons is actually a bit less than the standard apple distance so I used your example with the UIButton embedded in the UIView but changed the frame of the UIView to be slightly bigger.

UIView *filterBtnView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 45, 35)];

Upvotes: 0

Siu Chung Chan
Siu Chung Chan

Reputation: 1686

I have did this before.

You have to create your own UIView for the button. cause the default uibarbuttonitem with have some padding one left and right side.

ViewIconBtn* searchViewIconBtn = [[ViewIconBtn alloc] initWithImage:[UIImage imageNamed:@"searchIcon.png"]];
[searchViewIconBtn.btn addTarget:self action:@selector(toSearch) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem* btnSearch = [[UIBarButtonItem alloc] initWithCustomView:searchViewIconBtn];

UIBarButtonItem *space15 = [NegativeSpacer negativeSpacerWithWidth:15];
    [self.navigationItem setRightBarButtonItems:[NSArray arrayWithObjects:space15,btnWishList,btnPost,btnSearch, nil]];

btnWishList,btnPost,btnSearch are both the ViewIconBtn class. in my project, I created 3 nav buttons on the right side.

the UIBarButtonItem space15 is used to adjust the padding between the boundary and the right-most barbutton.

Upvotes: 5

Related Questions