How to create this toolbar programmatically

Question

I am really having a hard time creating a UIToolBar programmatically(no xib file). This is what I would like to create.

But till now, I feel I have not approached it in the right way. I have tried adding a barbuttonitem to it, but I cant create the effect as shown in the png. How should I go about it. Help needed.

Edit: I have added a bigger image

Could you add a larger image? It's hard to see what we're actually looking at and what you're trying to accomplish. To me this looks like a UINavigationBar with a title set. — runmad, May 08 '12 at 14:36
I tried adding barbuttonitem to the toolbar, but couldn't create the effect as shown in the image. — Xavi Valero, May 10 '12 at 15:24
@Xavi Valero, I'm confused by your image, I see the nav bar at the bottom, but it looks like you are circling the table view. I'm not sure if that's what you intended but the part that is circled is a table view section in a Table View set to grouped. — matto0, May 14 '12 at 01:58
@matto0...ignore the circled part. I just had this image to post. I am only concerned about the bottom bar — Xavi Valero, May 14 '12 at 04:31

score 3 · Accepted Answer · answered May 14 '12 at 06:48

UIBarButtonItem *spaceItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[self.navigationController.toolbar setBarStyle:UIBarStyleBlackOpaque];
UIBarButtonItem *customItem = [[UIBarButtonItem alloc] initWithTitle:@"toolbar title" style:UIBarButtonItemStylePlain    target:self     action:@selector(onToolbarTapped:)];
NSArray *toolbarItems = [NSArray arrayWithObjects:spaceItem, customItem, spaceItem, nil];

[self setToolbarItems:toolbarItems animated:NO];

score 2 · Answer 2 · answered May 14 '12 at 06:56

Create your toolbar with CGRECT to put it where you want

UIToolbar *myToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(x, y, width, height)];

You can customize it with background image, title, text color, background color, ...

Next create your button

UIBarButtonItem *theButton = [UIBarButtonItem alloc] initWithTitle:@"button title" style:UIBarButtonItemStylePlain    target:self     action:@selector(selector:)];

Add it to yout toolbar :

NSArray *buttons = [NSArray arrayWithObjects: theButton, nil];
[myToolbar setItems:buttons animated:NO]

add your toolbar to the current view

[self.view addSubview:mytoolbar]

Just typed not tested, hope it'll help

Warif Akhand Rishi · Answer 3 · 2012-05-12T04:11:27.317

ToolBar and buttons have custom images

- (void)viewDidLoad {
    [super viewDidLoad];

    UIToolbar *myToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 44, 320, 44)];
    [myToolbar insertSubview:[[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"toolbar_40.png"]] autorelease] atIndex:0];

    UIBarButtonItem *barButtonDone = [self createImageButtonItemWithNoTitle:@"button_down.png" target:self action:@selector(closeMe:)];
    UIBarButtonItem *barButtonShare = [self createImageButtonItemWithNoTitle:@"button_share.png" target:self action:@selector(actionShareButton:)];
    UIBarButtonItem *barButtonFlexibleGap = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]autorelease];
    myToolbar.items = [NSArray arrayWithObjects:barButtonDone,barButtonFlexibleGap,barButtonShare,nil];

    [self.view addSubview:myToolbar];
    [myToolbar release];
}

-(void)closeMe:(id)sender
{
    NSLog(@"closeMe");
}

-(void)actionShareButton:(id)sender
{   
    NSLog(@"actionShareButton");
}

-(UIBarButtonItem *)createImageButtonItemWithNoTitle:(NSString *)imagePath target:(id)tgt action:(SEL)a
{
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

    UIImage *buttonImage = [[UIImage imageNamed:@"button_slice.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:0];
    UIImage *buttonPressedImage = [[UIImage imageNamed:@"button_slice_over.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:0];

    CGRect buttonFrame = [button frame];
    buttonFrame.size.width = 32;
    buttonFrame.size.height = 32;
    [button setFrame:buttonFrame];

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 32, 32)];
    imageView.image = [UIImage imageNamed:imagePath];
    [button addSubview:imageView];
    [imageView release];

    [button setBackgroundImage:buttonImage forState:UIControlStateNormal];
    [button setBackgroundImage:buttonPressedImage forState:UIControlStateHighlighted];

    [button addTarget:tgt action:a forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

    return [buttonItem autorelease];

}

These png files need to be added

toolbar_40.png for toolbar image
button_down.png for button image
button_share.png for button image
button_slice.png for button background
button_slice_over.png for button background (pressed)

I just need to create the toolbar as shown in the image. I don't have to add multiple barbuttonitems in the toolbar. — Xavi Valero, May 12 '12 at 09:31
"[myToolbar insertSubview:[[[..." This Line of code is inserting a image on the toolbar. If your image (toolbar_40.png) has text on it and gradient (as shown in the image), you should get your desire toolbar. — Warif Akhand Rishi, May 12 '12 at 13:31
Isn't there another way, than adding an image. I don't have an image that looks that matches the image shown — Xavi Valero, May 13 '12 at 12:32

score 0 · Answer 4 · answered May 08 '12 at 14:37

0

UIToolbar *toolbar = [UIToolbar new];
toolbar.barStyle = UIBarStyleBlackTranslucent;
toolbar.backgroundColor = [UIColor clearColor];

Then add a UIBarButtonItem to toolbar.

answered May 08 '12 at 14:37

Adam Johnson

2,198
1
17
23

score 0 · Answer 5 · answered May 14 '12 at 04:31

UIToolbar *myToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 44, 320, 44)];
myToolbar.barStyle = UIBarStyleBlack;

UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
myLabel.text = @"Sperre aufheben";
myLabel.textColor = [UIColor whiteColor];
myLabel.textAlignment = UITextAlignmentCenter;
myLabel.backgroundColor = [UIColor clearColor];

[myToolbar  addSubview:myLabel];
[self.view addSubview:myToolbar];

[myLabel release];
[myToolbar release];

score 0 · Answer 6 · edited Sep 02 '13 at 14:42

Seems like a better fit for a nav bar (at least if you are keeping with the spirit of what you are doing: IE adding a title to the bottom of the screen)

Anyway I created a simple test project and this is what I did to get the functionality pictured, you may have to insert it into the view/controller differently but it gets what you want relatively easy and doesn't use the button bar

- (void)viewDidLoad {

    [super viewDidLoad];

    UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height - 44, 320, 44)];
    [navBar setBarStyle:UIBarStyleBlack];

    UINavigationItem *title = [[UINavigationItem alloc] initWithTitle:@"Your Title"];
    NSArray *array = [[NSArray alloc] initWithObjects:title, nil];

    [navBar setItems:array];

    [self.view addSubview:navBar];
}

How to create this toolbar programmatically

6 Answers6

Linked

Related