【问题标题】：Why is custom navigation bar button image stretched?为什么自定义导航栏按钮图像被拉伸？
【发布时间】：2018-01-12 21:45:04
【问题描述】：

我尝试添加带有自定义图像的导航栏按钮。但是，无论我使用什么方法，图像总是显得拉伸。

方法一：

    let barbuttonitem = UIBarButtonItem(image: UIImage(named: "apps_small"), style: .plain, target: self, action: nil)
    navigationItem.leftBarButtonItem = barbuttonitem

看起来像这样：

方法二：

    let button = UIButton(type: .custom)
    button.setImage(UIImage(named: "apps_small"), for: .normal)
    button.addTarget(self, action: #selector(TeachingRootViewController.appsTouched), for: .touchUpInside)
    button.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
    button.bounds = CGRect(x: 0, y: 0, width: 10, height: 10)
    navigationItem.leftBarButtonItem = UIBarButtonItem(customView: button)

看起来像这样：

方法三：

    let button = UIButton(type: .custom)
    button.setImage(UIImage(named: "apps_small"), for: .normal)
    button.setTitle("Button", for: .normal)
    button.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
    button.bounds = CGRect(x: 0, y: 0, width: 10, height: 10)
    button.imageEdgeInsets = .init(top: 5, left: 5, bottom: 5, right: 300)
    navigationItem.leftBarButtonItem = UIBarButtonItem(customView: button)
    navigationItem.leftBarButtonItem?.imageInsets = .init(top: 5, left: 5, bottom: 5, right: 300)

看起来像这样：

如你所见，标题不见了。

在 UI Hierarchy 中，如下所示：

按钮似乎占据了导航栏中的所有空间。

但是，带有系统项的按钮没有问题：

有谁知道这个问题的原因吗？我想我的想法已经用完了。

【问题讨论】：

你解决了这个问题吗？

标签： ios image button uinavigationbar uinavigationitem

【解决方案1】：

以上答案是一种解决方法，而不是正确的修复方法。正确答案是您应该生成正确尺寸的照片

资产@1x: 22x22px
asset@2x: 44x44px
asset@3x: 66x66px

【讨论】：

【解决方案2】：

尝试将其添加为 subView 而不是将其设置为 leftBarButtonItem

var leftButton = UIButton(frame:CGRect(x: 0, y: 0, width: 10, height: 10))
var background = UIImageView(image: UIImage(named: "apps_small"))
background.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
leftButton.addSubview(background)
self.navigationController.navigationBar.addSubview(leftButton)

【讨论】：

感谢您的回复！但是它不会编译......编译器抱怨“'UINavigationItem'类型的值没有成员'addSubview'”。 UIBarButtonItem 也没有“addSubview”。
我没有创建 UIBarButtonItem .. 我会编辑它以使用 navController.. 所以你可以再试一次
@imxieyi 你能用 UIButton 和 UINavigationBar 作为我提供的代码再试一次吗？
好的...它有效...虽然这个解决方案对我来说有点奇怪...我仍然想知道为什么我以前的方法损坏...

【解决方案3】：

根据我的经验，您遇到了这个问题，因为您为所有 resolution 1X, 2X and 3X 添加了大尺寸图片。你需要将其缩小到更适合导航栏的大小。

解决方案：1

您需要将其缩小到更适合导航栏的大小。请查看UINavigationBar的图片尺寸

asset@1X 尺寸：24X24

asset@2X 尺寸：48X48

asset@3X 尺寸：72X72

解决方案：2

如果您想使用相同的图像，则需要在代码中进行以下更改。

您只需要在UIView 中添加UIImageView 然后就可以了按预期工作。

代码：

    let containerView = UIControl(frame: CGRect.init(x: 0, y: 0, width: 30, height: 30))
    containerView.addTarget(self, action: #selector(handleSearch), for: .touchUpInside)
    let imageSearch = UIImageView(frame: CGRect.init(x: 0, y: 0, width: 30, height: 30))
    imageSearch.image = UIImage(named: "search")
    containerView.addSubview(imageSearch)                
    let searchBarButtonItem = UIBarButtonItem(customView: containerView)
    navigationItem.rightBarButtonItem = searchBarButtonItem

【讨论】：