设置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

我知道这个问题已经有一个勾选标记的anser。但是今天我参加了这个活动并认为无论如何我会提供我的答案。上面标记答案的检查对我有帮助，但它还需要进行一些额外的实验来弄清楚究竟发生了什么。

按钮图像仅在x轴而不是y中收缩。这是因为按钮太高了，它缩小了以适应。但它并没有按比例缩小。只在纵向上。所以看起来很紧张。它实际上并没有拉伸 - 这意味着它的扩大。相反，高度缩小了。知道差异，我认为了解它为什么会发生以及如何解决它是很重要的。

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

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

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

接下来发生在我身上的事情是按钮框架太小了。所以我在psd中增加了我的画布尺寸，将png填充到80宽，使按钮略宽，更适合。

Answer 4

当我为 leftBarButtonItem

设置背景图片时，我的40x40图像出现了相同的拉伸问题

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@2x.png，即使你的tags.png图像是80x80。只需将tags.png重命名为tags@2x.png，就可以将图像大小调整为40x40，就像在iOS 11之前更改代码一样，或者只需将tags@2x.png添加到项目中。