Is there a way to have custom UIBarButtonItems in a Toolbar that go against the HIG?

Question

These are the Human Interface Guidelines for UIToolBar Icons, and Bar Button Icons.

I want something that doesn't exactly follow the HIG.

Basically I want a solid rounded and flat colored UIButton, with text overtop. (However, I don't want text to be apart of the image for obvious reasons).

Can this be accomplished?

Can you draw a UIBarButtonItem with .cornerradius = 5.0. I believe that'sUIButton only.

Or can you use a masked png image as your UIBarButtonItem, apply a tintcolor to change the images mask, and some overlay text on top?

Or would you have to fake/mimic creating aUIToolbar, and just create a 44 pixel lightGreyUIView at the bottom of yourView?

How can this be accomplished, and would it be rejected for violating HIG?

Answer 1

You can always go with the UIToolBar & have the UIBarButtonItem added to that. Since UIBarButtonItem is inherited from UIBarItem & then to NSObject, you have minimal features to modify.

Use the following code to initiate your items in UIToolBar This way you will have your custom UIButton as a UIToolBarItem.

To change the button background color for different state, you may have to hold the button state toggles in an array, and change the color depending on state

Here is the fresh code for that:

UIToolbar *toolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0,55, self.view.bounds.size.width, 55)];
toolbar.tintColor = [UIColor redColor];
[self.view addSubview:toolbar];

NSMutableArray *tempArray = [[NSMutableArray alloc]init];
buttonStateArray = [[NSMutableArray alloc]init];
for(int i =0; i < 3; i++){
    UIButton *tempButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 100, 30)];
    tempButton.backgroundColor = [UIColor redColor];
    tempButton.layer.cornerRadius = 8;
    tempButton.layer.borderWidth = 2;
    tempButton.tag = i;
    tempButton.layer.borderColor = [UIColor blackColor].CGColor;
    [tempButton setTitle:[NSString stringWithFormat:@"Hello %d", i] forState:UIControlStateNormal];
    [tempButton addTarget:self action:@selector(displayTapped:) forControlEvents:UIControlEventTouchUpInside];
    [tempArray addObject:[[UIBarButtonItem alloc]initWithCustomView:tempButton]];

    [buttonStateArray addObject:[NSNumber numberWithBool:NO]];
}

[toolbar setItems:tempArray];

Now the target method of the button

-(void)displayTapped:(UIButton *)sender{
BOOL state = [[buttonStateArray objectAtIndex:sender.tag] boolValue];
[buttonStateArray replaceObjectAtIndex:sender.tag withObject:[NSNumber numberWithBool:!state]];
if(!state){
    sender.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
}else {
    sender.backgroundColor = [UIColor redColor];
}

}

Updated Screen here