how do i achieve this on navigationBar

Question

i want design my navigationBar like following figure, how can i achieve this.is it possible on navigationBar or i don't need navigationBar. Topics & settings must be buttons, because i want to navigate to another viewController

Answer 1

i did this ,see below code

//IvisionApps Button
    UIButton *ivisionButton= [UIButton buttonWithType:UIButtonTypeCustom];
    UIImage *ivisionButtonImage = [UIImage imageNamed:@"ivisionapps"];
    UIImage *ivisionButtonImagePressed = [UIImage imageNamed:@"ivisionappsSelected"];
    [ivisionButton setBackgroundImage:ivisionButtonImage forState:UIControlStateNormal];
    [ivisionButton setBackgroundImage:ivisionButtonImagePressed forState:UIControlStateHighlighted];
     [ivisionButton addTarget:self action:@selector(goIVisionApp) forControlEvents:UIControlEventTouchUpInside];
    ivisionButton.frame = CGRectMake(-8, -20, 106, 38);
    UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(-8, -20, 106, 38)];
    backButtonView.bounds = CGRectOffset(backButtonView.bounds, -14, -7);
    [backButtonView addSubview:ivisionButton];
    UIBarButtonItem *backBarButton = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
    self.navigationItem.rightBarButtonItem = backBarButton;



    //Auxilaries Button

    UIButton *auxiliariesButton= [UIButton buttonWithType:UIButtonTypeCustom];
    UIImage *auxiliariesButtonImage = [UIImage imageNamed:@"Auxiliaries"];
    UIImage *auxiliariesButtonImagePressed = [UIImage imageNamed:@"AuxiliariesSelected"];
    [auxiliariesButton setBackgroundImage:auxiliariesButtonImage forState:UIControlStateNormal];
    [auxiliariesButton setBackgroundImage:auxiliariesButtonImagePressed forState:UIControlStateHighlighted];
    [auxiliariesButton addTarget:self action:@selector(goBack) forControlEvents:UIControlEventTouchUpInside];
    auxiliariesButton.frame = CGRectMake(-19, -20, 106, 38);
    UIView *auxiliariesButtonView = [[UIView alloc] initWithFrame:CGRectMake(-19, -20, 106, 38)];
    auxiliariesButtonView.bounds = CGRectOffset(auxiliariesButtonView.bounds, -14, -7);
    [auxiliariesButtonView addSubview:auxiliariesButton];
    UIBarButtonItem *auxiliariesBarButton = [[UIBarButtonItem alloc] initWithCustomView:auxiliariesButtonView];
    self.navigationItem.leftBarButtonItem = auxiliariesBarButton;

    //hide backBarButton of NavigationItem
    [self.navigationItem setHidesBackButton:YES];

Answer 2

Create custom Navigation Bar with custom Delegate for that.. i used this see example bellow..

create CustomNavBar.h file like bellow...

//  Created by Paras on 03/12/11.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "CustomNavBarDelegate.h"

@interface CustomNavBar : UIView {

    NSObject<CustomNavBarDelegate> *delegate;

    NSString *strCatOrLoc;

    UIButton *btnBack;
    UIButton *btnLeft;

    UIImageView *imgRightImage;

    UILabel *lbl;

    UIImageView *imgTitle;
}
@property (nonatomic, retain) UIButton *btnBack;
@property (nonatomic, assign) NSObject<CustomNavBarDelegate> *delegate;
-(void)onclickBack:(id)sender;
- (id) initWithFrame: (CGRect)rect;
-(void)setImage:(UIImage*)img NavTitle:(NSString *)title;
-(void)setTitleImage:(UIImage*)img rightImage:(UIImage *)imgRight;
-(void)setwithoutlogo:(UIImage*)img NavTitle:(NSString *)title;


@end

now see the code of CustomNavBar.m file bellow...

//  Created by Paras on 03/12/11.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//

#import "CustomNavBar.h"
#import <QuartzCore/QuartzCore.h>
#import "AppDelegate.h"

@implementation CustomNavBar

@synthesize delegate;
@synthesize btnBack;
#pragma mark -
#pragma mark init methods
- (id) initWithFrame: (CGRect)rect {

    if (self == [super initWithFrame:rect]) {

        //[self setBackgroundColor:[UIColor colorWithRed:241.0f/255.0f green:241.0f/255.0f blue:237.0f/255.0f alpha:1.0f]];
//        [self setBackgroundColor:[UIColor whiteColor]];

        btnBack = [UIButton buttonWithType:UIButtonTypeCustom];
        btnBack.frame = CGRectMake(10.0, 8.0, 50.0, 28.0);
        [btnBack addTarget:self 
                    action:@selector(onclickBack:)
          forControlEvents:UIControlEventTouchDown];

        btnBack.layer.masksToBounds = YES;
        btnBack.layer.cornerRadius = 8.0;
        btnBack.layer.borderWidth = 0.5;
        btnBack.layer.borderColor = [[UIColor blackColor] CGColor];
        //btnBack.titleLabel.textColor = [UIColor blackColor];
//        btnBack.titleLabel.text = @"Back";
        [btnBack.titleLabel setFont:Arial13];
        [btnBack setTitle:@"" forState:UIControlStateNormal];
        [btnBack setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
//        [btnBack setBackgroundColor:[UIColor colorWithRed:241.0f/255.0f green:241.0f/255.0f blue:237.0f/255.0f alpha:1.0f]];
        [btnBack setBackgroundColor:[UIColor clearColor]];
        [self addSubview:btnBack];

        btnLeft = [UIButton buttonWithType:UIButtonTypeCustom];
        btnLeft.frame = CGRectMake(280.0, 8.0, 310.0, 28.0);
        [btnLeft addTarget:self 
                    action:@selector(onclickLeft:)
          forControlEvents:UIControlEventTouchDown];
        [btnLeft setBackgroundColor:[UIColor clearColor]];
        [self addSubview:btnLeft];

    }
    return self;
}

-(void)setImage:(UIImage*)img NavTitle:(NSString *)title {

    imgRightImage = [[UIImageView alloc] initWithFrame:CGRectMake(0.0,0.0,320.0,44.0)];
    imgRightImage.contentMode = UIViewContentModeScaleAspectFill;
    imgRightImage.clipsToBounds = YES;
    imgRightImage.layer.masksToBounds = YES;
//    imgRightImage.layer.cornerRadius = 11.0;
//    imgRightImage.layer.borderWidth = 0.5;
    [imgRightImage setImage:img];
    [imgRightImage setBackgroundColor:[UIColor clearColor]];
    [self addSubview:imgRightImage];
    [imgRightImage release];
}

-(void)setwithoutlogo:(UIImage*)img NavTitle:(NSString *)title {

    imgRightImage = [[UIImageView alloc] initWithFrame:CGRectMake(275.0,2.0,40.0,40.0)];
    imgRightImage.contentMode = UIViewContentModeScaleAspectFill;
    imgRightImage.clipsToBounds = YES;
    imgRightImage.layer.masksToBounds = YES;
    //    imgRightImage.layer.cornerRadius = 11.0;
    //    imgRightImage.layer.borderWidth = 0.5;
    //[imgRightImage setImage:img];
    [imgRightImage setBackgroundColor:[UIColor clearColor]];
    [self addSubview:imgRightImage];
    [imgRightImage release];

    lbl = [[UILabel alloc] initWithFrame:CGRectMake(70.0, 7.0, 180, 30.0)];
    //    lbl.font = [UIFont fontWithName:@"Arial" size:20.0];
    lbl.font = Arial16;
    lbl.numberOfLines = 1;
    lbl.tag = 11;
    lbl.backgroundColor = [UIColor clearColor];
    lbl.textColor = [UIColor blackColor];
    lbl.textAlignment = UITextAlignmentCenter;
    lbl.text = title;
    [self addSubview:lbl];
}


-(void)setTitleImage:(UIImage*)img rightImage:(UIImage *)imgRight {

    imgRightImage = [[UIImageView alloc] initWithFrame:CGRectMake(275.0,2.0,40.0,40.0)];
    imgRightImage.contentMode = UIViewContentModeScaleAspectFill;
    imgRightImage.clipsToBounds = YES;
    imgRightImage.layer.masksToBounds = YES;
    [imgRightImage setImage:imgRight];
    [imgRightImage setBackgroundColor:[UIColor clearColor]];
    [self addSubview:imgRightImage];
    [imgRightImage release];

    imgTitle = [[UIImageView alloc] initWithFrame:CGRectMake(68.0,3.0,200.0,38.0)];
    imgTitle.contentMode = UIViewContentModeScaleToFill;

    [imgTitle setBackgroundColor:[UIColor clearColor]];
    [imgTitle setImage:img];
    [self addSubview:imgTitle];
    [imgTitle release];
}
-(void)onclickLeft:(id)sender{
    NSLog(@">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Nav LeftClick");
    [delegate btnleft_clicked:self];
}
-(void)onclickBack:(id)sender {

    NSLog(@">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Nav BackClick");
    [delegate popViewController:self];
}

#pragma mark -
#pragma mark
- (void)dealloc {
    //[array release];
    [super dealloc];
}

@end

and after that create Delegate class file like bellow..

@class CustomNavBar;

@protocol CustomNavBarDelegate


@required

- (void)popViewController:(CustomNavBar *)navBar;
-(void)btnleft_clicked:(CustomNavBar *)navBar1;

@end

after use this code in your classes ..For Example..

in .h file import it and then use like bellow..

#import "CustomNavBarDelegate.h"
@class CustomNavBar;
@interface ViewController : UIViewController<CustomNavBarDelegate>
{
    CustomNavBar *navBar;
}
- (void)popViewController:(CustomNavBar *)navBar1;
@end

and in .m file define that delegate method and create and add navigation like bellow...

- (void)viewDidLoad
{
    navBar = [[CustomNavBar alloc] initWithFrame:CGRectMake(0, 0, 322, 44)];
    [navBar setDelegate:self];
    [self.view addSubview:navBar];
    [navBar setImage:[UIImage imageNamed:@"yourImageName"] NavTitle:@"yourTitle"];
}
- (void)popViewController:(CustomNavBar *)navBar1 {

    //  NSLog(@">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> delegate called");
    [self.navigationController popViewControllerAnimated:YES];
}
-(void)btnleft_clicked:(CustomNavBar *)navBar1{
    NSLog(@"\n\n btn Left Clicked InviteFriendsView");
}

NOTE: This is just an example , here implement your logic with your requirement.

Here you can also add 3rd button in middle and also define the method for called it in Delegate and also in this another .m file..

i hope this helpful for you...

Answer 3

I don't know whether it is possible on navigation bar.

• I saw a similar one using tabbar: Center Button in Tab Bar for iOS

• And you can achieve the same thing using : ALToolbar

• Also check KLHorizontalselect