Wrong UIImageView dimensions on navigationItem

Question

I am trying to add an image on navigation bar but the dimensions are wrong.

UIImageView* menuButton=[[UIImageView alloc]initWithFrame:CGRectMake(4, 7, 20, 20)];
    menuButton.image=[UIImage imageNamed: Model.icon.MapList];
    UIBarButtonItem *accountBarItem = [[UIBarButtonItem alloc] initWithCustomView:menuButton];
    self.navigationItem.leftBarButtonItem = accountBarItem;

It seams that I don't have any control on the dimensions of the image, because when I change the values of initWithFrame nothing changes.

Also this problem appears only on iPhones greater than iPhone 5 model.

What am I missing?

Check below link it might be useful to you https://stackoverflow.com/a/5419719 — Rajesh Dharani, Sep 24 '18 at 09:56
Please check the below link, https://stackoverflow.com/questions/22607674/ios-navigation-bar-item-image-size — uzair shahzad, Sep 24 '18 at 11:41

score 1 · Answer 1 · answered Sep 24 '18 at 14:10

You can just use simple button and set image for it.

UIButton *b = [UIButton buttonWithType:UIButtonTypeCustom];
[b setFrame:CGRectMake(0.0f, 0.0f, 25.0f, 25.0f)];
[b addTarget:self action:@selector(randomMsg) forControlEvents:UIControlEventTouchUpInside];
[b setImage:[UIImage imageNamed: Model.icon.MapList] forState:UIControlStateNormal];

UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:b];

self.navigationItem.leftBarButtonItem = item;

If you have wrong aspect ratio , you can use

[[b imageView] setContentMode: UIViewContentModeScaleAspectFit];

score 1 · Answer 2 · answered Sep 24 '18 at 23:38

I'd recommend adding a border to your image view so you can see what's going on.

Here's what you're currently experiencing (using the imageView directly as the custom view of the bar button item):

- (void)_addImageViewToLeftButtonItemWithoutOuterView {
    UIImageView *profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Homer.jpg"]];
    [profileImageView setFrame:CGRectMake(0, 0, 40, 40)];
    profileImageView.layer.cornerRadius = 20.0f;
    profileImageView.layer.masksToBounds = YES;
    profileImageView.clipsToBounds = YES;
    profileImageView.layer.borderColor = [UIColor blackColor].CGColor;
    profileImageView.layer.borderWidth = 1.0f;
    UIBarButtonItem *rbi = [[UIBarButtonItem alloc] initWithCustomView:profileImageView];
    self.navigationItem.leftBarButtonItem = rbi;
}

This is what it looks like without aspect fit:

And with aspect fit set:

And this is what I believe you want:

- (void)_addImageViewToLeftButtonItemWithOuterView {
    UIView *profileView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
    profileView.layer.borderColor = [[UIColor redColor] CGColor];
    profileView.layer.borderWidth = 2.0f;
    UIImageView *profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Homer.jpg"]];
    profileImageView.contentMode = UIViewContentModeScaleAspectFit;
    [profileImageView setFrame:CGRectMake(0, 0, 40, 40)];
    profileImageView.layer.cornerRadius = 20.0f;
    profileImageView.layer.masksToBounds = YES;
    profileImageView.clipsToBounds = YES;
    profileImageView.layer.borderColor = [UIColor blackColor].CGColor;
    profileImageView.layer.borderWidth = 1.0f;
    [profileView addSubview:profileImageView];
    UIBarButtonItem *lbi = [[UIBarButtonItem alloc] initWithCustomView:profileView];
    self.navigationItem.leftBarButtonItem = lbi;
}

Which results in this:

As you probably noticed, the sorta trick here is that you don't want to add the image view directly as the custom view within initWithCustomView of the UIBarButtonItem. Instead you want to use an outer view to hold the imageView, then you can adjust the frame of your subview to move it around.

Here's one more example if you wanted the image further to the right (obviously you won't want the border for the outer image view, but I've just left it there for demonstration purposes):

- (void)_addImageViewToLeftButtonItemWithOuterView {
    // adjust this to 80 width (it always starts at the origin of the bar button item
    UIView *profileView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 40)];
    profileView.layer.borderColor = [[UIColor redColor] CGColor];
    profileView.layer.borderWidth = 2.0f;
    UIImageView *profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Homer.jpg"]];
    profileImageView.contentMode = UIViewContentModeScaleAspectFit;
    // and adjust this to be offset by 40 (move it to the right some)
    [profileImageView setFrame:CGRectMake(40, 0, 40, 40)];
    profileImageView.layer.cornerRadius = 20.0f;
    profileImageView.layer.masksToBounds = YES;
    profileImageView.clipsToBounds = YES;
    profileImageView.layer.borderColor = [UIColor blackColor].CGColor;
    profileImageView.layer.borderWidth = 1.0f;
    [profileView addSubview:profileImageView];
    UIBarButtonItem *lbi = [[UIBarButtonItem alloc] initWithCustomView:profileView];
    self.navigationItem.leftBarButtonItem = lbi;
}

Wrong UIImageView dimensions on navigationItem

2 Answers2