ios 更改 UINavigationBar 中 UIBarButtonItem 的宽度

Change width of a UIBarButtonItem in a UINavigationBar

提问by Darren

I am creating a UIBarButtonItem and adding it to my navigation bar like so:

我正在创建一个 UIBarButtonItem 并将其添加到我的导航栏，如下所示：

(void)viewDidLoad { 

   ...

   // Add the refresh button to the navigation bar
   UIButton *refreshButton = [UIButton buttonWithType:UIButtonTypeCustom];
   [refreshButton setFrame:CGRectMake(0,0,30,30)];
   [refreshButton setImage:[UIImage imageNamed:@"G_refresh_icon.png"] forState:UIControlStateNormal];
   [refreshButton addTarget:self action:@selector(refreshData) forControlEvents:UIControlEventTouchUpInside];
   UIBarButtonItem *refreshBarButton = [[[UIBarButtonItem alloc] initWithCustomView:refreshButton] autorelease];
   self.navigationItem.leftBarButtonItem = refreshBarButton;
}

It looks correct when I run, but I can select the bar button item by tapping the navigation bar anywhere from x = 0 to roughly 100. How can I adjust the selectable area to have a width of 30 px?

运行时看起来是正确的，但是我可以通过在 x = 0 到大约 100 之间的任何位置点击导航栏来选择栏按钮项。如何将可选区域调整为 30 像素的宽度？

采纳答案by Aaron

One approach you might consider is creating a UIBarButtonItemby calling initWithCustomView:. This is not ideal in that you don't get "selected" states out of the box AND you have to composite your bordered background (if want that look) with your button image, but with that you can more directly specify a frame for your toolbar item. If you're using text for your title instead of images you may still need add in a background image as a subview. Anyway, I'm having the same problem right now and this code works for me:

您可能考虑的一种方法是UIBarButtonItem通过调用initWithCustomView:. 这并不理想，因为您没有开箱即用的“选择”状态，并且您必须将带边框的背景（如果想要那种外观）与您的按钮图像合成，但是您可以更直接地为您的图片指定一个框架工具栏项。如果您在标题中使用文本而不是图像，您可能仍需要添加背景图像作为子视图。无论如何，我现在遇到了同样的问题，这段代码对我有用：

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"button-image.png"]];
imageView.frame = CGRectMake(0, 0, 43, 30);

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:imageView];

self.navigationItem.leftBarButtonItem = barButtonItem;

Right now this is the only way I know of restricting the auto-sizing of the UIBarButtonItems added to the UINavigationController's navigationItem.

现在，这是我所知道的限制UIBarButtonItem添加到UINavigationControllers的s的自动调整大小的唯一方法navigationItem。

Or try Maggie's solution, which is more thorough than mine.

或者试试Maggie的解决方案，它比我的更彻底。

回答by roxanneM

Since iOS 11, just setting frame for customViewand not UIBarButtonItemwon't work (like suggested in accepted answer). It seems like adding Autolayout to UIBarButtonItemoverrides the set frame. This postgave me the idea:

从 iOS 11 开始，仅设置框架 forcustomView和 notUIBarButtonItem将不起作用（如已接受的答案中建议的那样）。似乎添加自动布局来UIBarButtonItem覆盖设置的框架。 这篇文章给了我一个想法：

navigationItem.leftBarButtonItem?.customView = yourCustomButtonView
let desiredWidth = 35.0
let desiredHeight = 35.0

let widthConstraint = NSLayoutConstraint(item: yourCustomButtonView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: desiredWidth)
let heightConstraint = NSLayoutConstraint(item: yourCustomButtonView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: desiredHeight)

yourCustomButtonView.addConstraints([widthConstraint, heightConstraint])

Also note, that it is preferred that you use UIButtonas your CustomViewas you have to rely on it to trigger the action.

另请注意，最好使用UIButtonas your，CustomView因为您必须依赖它来触发操作。

回答by Max MacLeod

The key thing with this is to realise that you are changing the custom view's width, rather than the UIBarButtonitself.

关键是要意识到您正在更改自定义视图的宽度，而不是它UIBarButton本身。

The code is therefore:

因此代码是：

CGRect resizedFrame = myBarButtonItem.customView.frame;
resizedFrame.size.width = myNewWidth;
myBarButtonItem.customView.frame = resizedFrame;

You will also need to trigger the layout change:

您还需要触发布局更改：

[myNavigationBar setNeedsLayout];

All this goes without saying that the layout is being done with Auto Sizing and frames. Incursions into navigation bars with Auto Layout yielded no success. See my question Auto Layout with UINavigationBar and UIBarButtonItem.

所有这一切不言而喻，布局是通过自动调整大小和框架完成的。使用自动布局侵入导航栏没有成功。请参阅我的问题Auto Layout with UINavigationBar 和 UIBarButtonItem。

Sorry just realised that my code is almost identical to @oscartzombie. Not intentional! I'll leave this answer as I think it's worth adding the layout and other points, in addition to explaining without reference to Interface Bulder or images specifically.

抱歉刚刚意识到我的代码几乎与@oscartzombie 相同。不是故意的！我会留下这个答案，因为我认为值得添加布局和其他要点，此外还没有特别参考 Interface Bulder 或图像进行解释。

回答by odm

You can do it by dropping an image to the bar button item from the interface builder and changing the width of the custom view with this code:

您可以通过将图像从界面构建器拖放到栏按钮项并使用以下代码更改自定义视图的宽度来实现：

CGRect frame = self.navigationItem.leftBarButtonItem.customView.frame;
frame.size.width = 141;
self.navigationItem.leftBarButtonItem.customView.frame = frame;

回答by Abdullah Saeed

The following approach worked, see code to change width and height of the button and to add action item as well.

以下方法有效，请参阅更改按钮宽度和高度以及添加操作项的代码。

UIButton *imageButton = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 22, 22)];
[imageButton setBackgroundImage:[UIImage imageNamed:@"message_button"] forState:UIControlStateNormal];
[imageButton addTarget:self action:@selector(messageButtonTapped) forControlEvents:UIControlEventAllEvents];
UIBarButtonItem *leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:imageButton];
self.navigationItem.leftBarButtonItem = leftBarButtonItem;

Note: The target and action of the UIBarButtonItem does not apply to image view

注意：UIBarButtonItem 的目标和动作不适用于图像视图

回答by ACAkgul

None of those solutions worked for me and I figure out auto-resizing thing overrides dimensions that you wrote in code.

这些解决方案都不适合我，我发现自动调整大小会覆盖您在代码中编写的尺寸。

after creating button by UIButton way, write following code block:

通过 UIButton 方式创建按钮后，编写以下代码块：

[self.navigationItem.rightBarButtonItem.customView.widthAnchor constraintEqualToConstant:mWidth].active = YES;
[self.navigationItem.rightBarButtonItem.customView.heightAnchor constraintEqualToConstant:mHeight].active = YES;