为UIBarButtonItem设置图像 – 图像拉伸

当我尝试使用UIBarButtonItem的“initWithImage”来初始化一个导航栏的自定义图像时，它会在黑色的导航栏上显现出来，并被拉伸。 这是我创build它的方式：

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

这是它的样子：

任何想法，如果这是一个问题的形象？ 我从我买的一套图标中得到了它。

Answer 1

栏button项目上显示的图像是从源图像“派生”（它只使用渲染中的alpha通道值，但在你的图像中看起来都不错）。 它可能只是不正确的大小 – 你可能需要打开图像文件，并裁剪到正确的大小。

您也可以尝试查看是否可以使用设置imageInsets属性（由UIBarItem中的UIBarButtonIteminheritance）来resize，从而阻止它被拉伸。

酒吧项目图片上的Doco说：

显示在栏上的图像来源于该图像。 如果这张图片太大而无法放在栏上，则会缩放。 通常，工具栏和导航栏图像的大小是20 x 20点。

Answer 2

最好的方法是创build一个button，设置其背景图像，并设置其操作。 然后，可以使用此button作为自定义视图创build一个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 3

我知道这个问题已经有一个检查标记的anser。 但是今天我跑到这里来了，以为我会提供我的答案。 上面标记的答案对我有帮助，但是也花了一些额外的实验来弄清楚发生了什么。

button图像只在x轴收缩，而不是y。 这是因为它对于button来说太高，并且缩小了它的尺寸。 但是它并没有按比例缩小。 只在垂直。 所以看起来很紧张。 这实际上并没有延伸 – 这意味着它的扩大。 相反，高度是缩小的。 了解其中的差异，我认为了解它为什么会发生，以及如何解决这个问题非常重要。

我做了和OP一样的事情。 以为我支持视网膜我做了我的图标40×40。 矿是一个alpha通道的绿色复选标记。 它填充空白像素为40×40。 该应用程序resize，以适应button的可用高度。 但宽度保持不变。 所以它变成了40×30或40×20的范围。 我认为button可以处理一个高30的图标，但是这对于IMHO盒子来说有点太大了。

OP把button减小到30×30，这样就不会再挤压了。 但这不是最好的解决scheme。 因为当你这样做的时候，它实际上并不是一个视网膜button。 它缩小，然后吹回视网膜。

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

接下来发生在我身上的是那个button框太小了。 所以我用psd把我的canvas大小放大了，把png填充到80宽，使button稍微宽一些，可以放大。

Answer 4

当我为leftBarButtonItem设置背景图像时，我得到了与我的40×40图像相同的延伸问题

 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

对于那些在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]]; 

那么，即使您的tags.png图片是80×80，您也需要拥有80×80的[e-mail]。 只需将tags.png重命名为[e-mail]就可以将图像的大小调整为40×40，就像在iOS 11之前一样，不需要更改代码，或者只需将[e-mail]添加到项目中即可。

Answer 6

设置正确的图像大小：@ 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)