Search code examples
iosxcodexcode4

How can I create Custom-Navigation Bar


I'm trying to create a custom bottom navbar, but I don't want it to be a rectangular style. I just want one big circle (it's gonna be an image) that a user can click on as a button.

I know I can customize the way the bottom bar looks like, but I am not sure how to add the image in the center and make it overflow the original boundaries of the bar. For now I have something like this

UIBarButtonItem *item3 = [[UIBarButtonItem alloc]
                          initWithBarButtonSystemItem:UIBarButtonSystemItemOrganize
                          target:self
                          action:nil];

NSArray *items = [NSArray arrayWithObjects:item1, flexibleSpace, item2, flexibleSpace, item3, nil];

self.toolbarItems = items;`

Here is a picture for illustration. Thanks! enter image description here


Solution

  • Making an Custom Navigation Bar takes a lot of work so in instead you could make an custom button over the image and when the user clicks on it will change the image or the action (user "taps" on the image alert pops up :):

    ViewController.h

    #import <UIKit/UIKit.h>
    
    @interface ViewController : UIViewController {
        IBOutlet UIImageView *onlyImageVIew;
        BOOL firstImage;
    }
    @property (nonatomic, retain) UIImageView *onlyImageVIew;
    -(IBAction)buttonClicked;
    @end
    

    ViewController.m

    @implementation ViewController
    @synthesize firstImage, secondImage;
    
    - (IBAction)buttonClicked {
        if (firstImage == YES) {
            onlyImageView.image = [UIImage imageNamed:@"yourImage.png"];
            firstImage == NO
        }
        else {
            onlyImageView.image = [UIImage imageNamed:@"yourSecondImage.png"];
            firstImage == YES
        }
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        // when view loaded, load the first image only.
        firstImage = YES;
        onlyImageView.image = [UIImage imageNamed:@"yourLaunchImage.png"];
    }