ios 为 UIBarButtonItem 设置图像 - 图像被拉伸

setting image for UIBarButtonItem - image stretched

提问by Z S

When I try to use UIBarButtonItem's "initWithImage" to initialize a navigation bar custom image, it comes out washed-up and stretched against a black navigation bar. This is how I create it:

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

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

Here is what it looks like:

这是它的样子：

Any idea if it's a problem with the image? I got it from a set of icons I bought.

不知道是不是图片有问题？我是从我买的一组图标中得到的。

采纳答案by gamozzii

The displayed images on bar button items are 'derived' from the source image (it uses only the alpha channel values in rendering but that all looks ok in your image). Its possibly just not the right size - you might need to open the image file and crop it to the right size.

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

You could also try looking at whether setting the imageInsetsproperty (inherited by UIBarButtonItemfrom UIBarItem) can be used to adjust the size in a way to stop it getting stretched.

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

Doco on the bar item images says the following:

酒吧项目图片上的 Doco 说如下：

The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points.

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

回答by Jeff Schmitz

The best way to do this is to create a button, set its background image, and set its action. Then a UIBarButtonItem can be created using this button as the custom view. Here's my example code:

最好的方法是创建一个按钮，设置它的背景图像，并设置它的动作。然后可以使用此按钮作为自定义视图创建 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];

回答by badweasel

I know this question already has a checkmarked anser. But I ran in to this today and thought I would offer up my answer anyway. The check marked answer above did help me, but it also took some extra experimenting to figure out what was really happening.

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

The button image is being shrunk only in the x axis and not the y. this is because it is too tall for the button and it shrinks it down to fit. But it doesn't shrink it proportionally. Only on the vertical. So it appears stretched. It's not actually stretched - which implies a widening of it. Instead the height is shrunk. Knowing the difference I think is important to understanding why it's happening and how to fix it.

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

I did the same thing the OP did. Thinking that I am supporting retina I made my icon 40x40. Mine was a green checkmark with an alpha channel. It was padded with blank pixels to be 40x40. The app resized it to fit within the button's available height. But the width stayed the same. So it became somewhere in the range of 40x30 or 40x20. I think the button can handle an icon 30 high, but then it's a little too big for the box IMHO.

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

The OP reduced the button to 30x30 and that made it not squish any more. But that's not the best solution. Because it isn't actually a retina button when you do that. It's shrunk and then blown back up on the retina.

OP 将按钮缩小到 30x30，这使它不再挤压。但这不是最好的解决方案。因为当你这样做时它实际上不是一个视网膜按钮。它缩小，然后在视网膜上被吹回。

The correct answer is to name your 40 pixel tall version with the @2x and then make a half size (20 pixel tall) version and save it without the @2x. The width can be whatever. Then load with imageNamed: without specifying the @2x. It will use the appropriate png for a retina or non-retina device.

正确答案是用@2x 命名您的 40 像素高版本，然后制作一个半尺寸（20 像素高）版本并在没有@2x 的情况下保存它。宽度可以是任何。然后加载 imageNamed: 而不指定@2x。它将为视网膜或非视网膜设备使用适当的 png。

The next thing that happened to me was then the button frame was too small. So I upped my canvas size in psd to pad the png to 80 wide to make the button slightly wider and more tappable.

发生在我身上的下一件事是按钮框架太小了。所以我在 psd 中增加了画布大小，将 png 填充到 80 宽，使按钮稍微更宽，更易于点击。

回答by zeeawan

I got the same stretchedissue for my 40x40 image when I set the background image for leftBarButtonItem

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

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

self.navigationItem.leftBarButtonItem = backButton;

But my issue got resolvedwith the following code

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

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

self.navigationItem.leftBarButtonItem = backButton;

and same result if UIBarButtonItemStyleBorderedis used.

如果使用UIBarButtonItemStyleBordered，则结果相同。

回答by William Hu

Set correct image size: @1x = 22px, @2x = 44px @3x = 88px firstly.

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

Then

然后

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

or

或者

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

回答by whyoz

For those who have come across this toolbar item stretching issue in iOS 11 specifically, it appears that the @2x version of your image is now required to render its frame and or bounds.

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

So if you have code like this where you're adding a custom image UIBarButtonItem like this:

因此，如果您有这样的代码，您将在其中添加自定义图像 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]];

Then you will need to have a [email protected] that's 80x80, even if your tags.png image is 80x80. Simply renaming tags.png to [email protected] would resize the image to 40x40 as it did pre iOS 11 without changing code, or just add [email protected] to your project.

然后你需要有一个 80x80 的 [email protected]，即使你的 tags.png 图像是 80x80。只需将 tags.png 重命名为 [email protected] 即可将图像大小调整为 40x40，就像在 iOS 11 之前所做的那样，无需更改代码，或者只需将 [email protected] 添加到您的项目中。