在 StoryBoard 中为 UIBarButton 显示图像而不是文本

Posted 2023-03-22

【中文标题】在 StoryBoard 中为 UIBarButton 显示图像而不是文本

【英文标题】：Display image instead of text for UIBarButton within StoryBoard

【发布时间】：2018-12-12 14:56:13

【问题描述】：

我正在创建一个带有导航栏的 ViewController。在此栏中，我添加了一个 UIBarButton，我将在其上附加一个 segue 以转到另一个 ViewController。 我希望这个按钮是一个图像而不是简单的文本，所以我尝试进入 Attributes Inspector 部分并为我的按钮添加一个图像。结果很糟糕：

此时您可能会想，我想要一个正确的图像（比如小一点，我的在 xcassets 下，高度和宽度为 25 像素）。

通过使用这个，我设法以编程方式获得了更好的东西：

hpSettingsBtn.image = UIImage(named: "settings")

但仍然不是我想要的。

有什么想法吗？

我也尝试了使用自定义视图的功能，但我的按钮不再可点击。

class HomePageViewController: UIViewController 
    @IBOutlet weak var hpSettingsBtn: UIBarButtonItem!

    override func viewDidLoad() 
        super.viewDidLoad()
        let button = createSettingsBtn()
        hpSettingsBtn.customView = button
    

    func createSettingsBtn() -> UIButton 
        //create a new button
        let button = UIButton(type: .custom)
        //set image for button
        button.setImage(UIImage(named: "settings"), for: .normal)
        //set frame
        button.frame = CGRect(x: 0, y: 0, width: 25, height: 25)

        button.widthAnchor.constraint(equalToConstant: 25).isActive = true
        button.heightAnchor.constraint(equalToConstant: 25).isActive = true

        return button
    

如果我使用这段代码，没有 UIBarButton（通过在我的代码中创建它并将它自己附加到导航栏），那么我不知道是否可以使用 segue（因为按钮没有出现在故事板上）。

【问题讨论】：

我会为其父控制器中的按钮创建一个插座。当该控制器确实加载时，您可以调用 self.button.setImage(_:, _:)

【参考方案1】：

首先创建一个从第一个 viewController 到第二个 viewController 的 segue，并为该 segue 设置一个标识符。

eg : segue1 //segue identifier

然后创建自定义按钮

func makeSettingsBtn() 
    //create a new button
    let button = UIButton(type: .custom)
    //set image for button
    button.setImage(UIImage(named: "settings"), for: .normal)
    //set frame
    button.frame = CGRect(x: 0, y: 0, width: 25, height: 25)

    button.widthAnchor.constraint(equalToConstant: 25).isActive = true
    button.heightAnchor.constraint(equalToConstant: 25).isActive = true

    //Add target
    button.addTarget(self, action: #selector(self.btnClick(_:)), for: .touchUpInside)

    let barButton = UIBarButtonItem(customView: button)
    self.navigationItem.rightBarButtonItem = barButton

按钮操作方法

@objc func btnClick(_ sender:UIButton) 
    self.performSegueWithIdentifier("segue1", sender: self)

【讨论】：

谢谢，即使我仍然不明白为什么我不能通过情节提要使用图像，这就是我想要的。

出现问题是因为从 ios 11 UIBarButtonItem 使用自动布局而不是处理框架。这就是为什么如果你使用 Xcode 9，你应该为这个图像按钮添加宽度约束。（即 widthAnchor 和 heightAnchor）

【参考方案2】：

您可以通过转到情节提要中的标尺查看选项卡来更改情节提要中条形项目的图像插图，如图所示。希望对你有帮助

【讨论】：

我尝试了这个，但没有发生真正好的事情。我刚刚看到我的图像被放大甚至消失了。

嗯，这很奇怪。您为哪些输入填写了哪些值？

我尝试了不同的，主要使用左右（当然），使用 0 到 20 之间的值，然后用 50- 100 - 200 进行测试，......我有我的图像占据很大位置的“虚拟”（我猜）矩形的中心，我无法缩短它（我的图像不包含这个矩形）。