更改 UINavigationBar 中 UIBarButtonItem 的宽度答案

【问题标题】：Change width of a UIBarButtonItem in a UINavigationBar更改 UINavigationBar 中 UIBarButtonItem 的宽度
【发布时间】：2012-06-14 21:04:50
【问题描述】：

我正在创建一个 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;
}

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

【问题讨论】：

恐怕我认为没有办法调整可选择区域。但是有一个问题，为什么您希望宽度为 30 像素？ iOS 人机界面指南指出，可点击的 UI 元素的最小尺寸为 44 x 44 磅。 developer.apple.com/library/ios/#documentation/UserExperience/…
嗯，好的，感谢您提供指向指南的链接。不过可选区域这么宽似乎有点奇怪。
@AbdSaniAbdJalal 我们可以更改故事板中barbuttonitem 的宽度吗？

标签： ios uinavigationbar uibarbuttonitem uinavigationitem

【解决方案1】：

从 iOS 11 开始，只为customView 而不是UIBarButtonItem 设置框架将不起作用（如accepted answer 中的建议）。似乎将自动布局添加到 UIBarButtonItem 会覆盖设置的框架。 This post 给了我这个主意：

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])

另请注意，您最好使用UIButton 作为您的CustomView，因为您必须依靠它来触发操作。

【讨论】：

令人惊讶的是，导航栏默认使用自动布局来放置项目，这里的信息非常有用。
谢谢！重要的是要知道操纵框架不再什么都不做

【解决方案2】：

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

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;

目前，这是我知道的唯一一种限制 UIBarButtonItems 添加到 UINavigationController 的 navigationItem 的自动调整大小的方法。

或try Maggie's solution, which is more thorough than mine。

【讨论】：

仅当我使用 UIButton 作为 customView 而不是 UIImageView 时才有效
此解决方案将不起作用，因为它根本没有按钮操作。请改用UIButton。

【解决方案3】：

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

因此代码是：

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

您还需要触发布局更改：

[myNavigationBar setNeedsLayout];

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

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

【讨论】：

我的自定义 UIBarButtonItem 的大小有问题，解决方案是在我的视图控制器的 -(void)viewDidLoad 方法中调用 [self.navigationController.navigationBar setNeedsLayout];。

【解决方案4】：

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

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

【讨论】：

当我在界面生成器中设置条形按钮项的图像属性时，我的 customView 为 nil。

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

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;

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

【讨论】：