为 UIBarButtonItem 设置图像 - 图像拉伸

Question

当我尝试使用 UIBarButtonItem 的“initWithImage”来初始化导航栏自定义图像时，它会被冲破并拉伸到黑色导航栏上。这就是我创建它的方式：

UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"gear.png"] style:UIBarButtonItemStyleBordered target:self action:@selector(showSetting:)];

它看起来像这样：

知道这是否是问题图像？我是从我买的一组图标中得到的。

Answer 1

执行此操作的最佳方法是创建一个按钮，设置其背景图像并设置其操作。然后可以使用此按钮作为自定义视图来创建 UIBarButtonItem。这是我的示例代码：

 UIButton *settingsView = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 61, 30)];
[settingsView addTarget:self action:@selector(SettingsClicked) forControlEvents:UIControlEventTouchUpInside];
[settingsView setBackgroundImage:[UIImage imageNamed:@"settings"] forState:UIControlStateNormal];
UIBarButtonItem *settingsButton = [[UIBarButtonItem alloc] initWithCustomView:settingsView];
[self.navigationItem setRightBarButtonItem:settingsButton];

Answer 2

栏按钮项目上显示的图像是从源图像“派生”的（它在渲染中仅使用 Alpha 通道值，但在图像中一切看起来都正常）。它可能只是尺寸不正确 - 您可能需要打开图像文件并将其裁剪为正确的尺寸。

您还可以尝试查看是否可以使用设置 imageInsets 属性（由 UIBarButtonItem 从 UIBarItem 继承）来调整大小阻止它被拉伸。

Doco 在栏项目图像上说明了以下内容：

栏上显示的图像源自此图像。如果该图像太大而无法放在条上，则会缩放以适合该图像。通常，工具栏和导航栏图像的大小为 20 x 20 点。

Answer 3

我知道这个问题已经有一个勾选的答案。但我今天遇到了这个问题，并认为无论如何我都会提供我的答案。上面勾选的答案确实对我有帮助，但也需要一些额外的实验才能弄清楚到底发生了什么。

按钮图像仅在 x 轴而非 y 轴上缩小。这是因为它对于按钮来说太高了，所以它会缩小以适应。但它并没有按比例缩小。仅在垂直方向上。所以显得很拉长。它实际上并没有被拉伸——这意味着它被加宽了。相反，高度缩小了。我认为了解差异对于理解为什么会发生以及如何解决它很重要。

我做了与OP相同的事情。考虑到我支持视网膜，我将图标设置为 40x40。我的是一个带有 Alpha 通道的绿色复选标记。它用空白像素填充为 40x40。该应用程序调整了它的大小以适合按钮的可用高度。但宽度保持不变。所以它变成了 40x30 或 40x20 范围内的某个地方。我认为按钮可以处理 30 高的图标，但恕我直言，对于盒子来说有点太大了。

OP 将按钮缩小到 30x30，这样它就不会再被压扁了。但这不是最好的解决方案。因为当你这样做时，它实际上并不是一个视网膜按钮。它先缩小，然后又在视网膜上放大。

正确的答案是用 @2x 命名 40 像素高的版本，然后制作半尺寸（20 像素高）的版本并保存，不带 @2x。宽度可以是任意的。然后使用 imageNamed: 加载，而不指定@2x。它将针对视网膜或非视网膜设备使用适当的 png。

接下来发生在我身上的事情是按钮框架太小了。因此，我提高了 psd 中的画布大小，将 png 填充到 80 宽，使按钮稍宽且更易于点击。

Answer 4

当我将背景图像设置为 < 时，我的 40x40 图像也遇到了同样的拉伸问题strong>leftBarButtonItem

UIBarButtonItem *backButton = [UIBarButtonItem new];
[backButton setBackButtonBackgroundImage:[UIImage imageNamed:@"back_icon"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

self.navigationItem.leftBarButtonItem = backButton;

但我的问题通过以下代码解决了

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_icon"] style:UIBarButtonItemStylePlain target:self action:@selector(handleBack:)];

self.navigationItem.leftBarButtonItem = backButton;

如果使用 UIBarButtonItemStyleBordered 则结果相同。

Answer 5

首先设置正确的图像尺寸：@1x = 22px，@2x = 44px @3x = 88px。

然后

let leftBarButtonItem = UIBarButtonItem(image: yourUIImage, style: .plain, target: self, action: #selector(action))
leftBarButtonItem.tintColor = UIColor.red
navigationItem.leftBarButtonItem = leftBarButtonItem

或者

let btn = UIButton(type: .custom)
btn.addTarget(self, action: #selector(contactMe), for: .touchUpInside)
btn.setImage(#imageLiteral(resourceName: "open"), for: .normal)

Answer 6

对于那些在 iOS 11 中遇到过此工具栏项目拉伸问题的人来说，现在似乎需要 @2x 版本的图像来渲染其框架和/或边界。

因此，如果您有这样的代码，您要添加这样的自定义图像 UIBarButtonItem：

UIButton *tagsBtn = [UIButton buttonWithType:UIButtonTypeCustom];
tagsBtn.bounds = CGRectMake( 0, 0, 40, 40);
[tagsBtn setImage:[UIImage imageNamed:@"tags.png"] forState:UIControlStateNormal];
tags = [[UIBarButtonItem alloc] initWithCustomView:tagsBtn];
[tagsBtn addTarget:self action:@selector(tags:) forControlEvents:UIControlEventTouchUpInside];

[bottomToolbar setItems:[NSArray arrayWithObjects:flexibleSpace,tags,flexibleSpace,nil]];

那么您将需要有一个 [电子邮件受保护] 即 80x80，即使您的 Tags.png 图片是 80x80。只需将 Tags.png 重命名为 [email protected] 即可将图像大小调整为 40x40就像 iOS 11 之前一样，无需更改代码，或者只需添加 [电子邮件受保护] 到您的项目。