UIBarButtonItem 形状不正确

Posted 2023-03-22

【中文标题】UIBarButtonItem 形状不正确

【英文标题】：UIBarButtonItem not in correct shape

【发布时间】：2019-03-03 00:09:03

【问题描述】：

我想在导航栏的右上角创建一个收藏按钮。我想使用星形图标，所以我创建了一个 UIButton 并将其嵌入到 UIBarButtonItem 中。但是，即使我手动设置它的大小，条形按钮也是超宽的。

另外一个问题是我这里使用的图片其实是苹果ios编程入门教程中的白星。但是，它在屏幕上显示为一颗蓝星。我不知道为什么。

let button = UIButton(type: .system)
button.frame = CGRect(x: 0, y: 0, width: 34, height: 34)
button.setImage(UIImage(named: "filledStar"), for: .normal)
button.addTarget(self, action: #selector(bookmarkCourse(_:)), for: .touchUpInside)

let barButtonItem = UIBarButtonItem(customView: button)
navigationItem.rightBarButtonItem = barButtonItem

【问题讨论】：

您的 UIButton 必须是 .custom，而不是 .normal。另外，您的filledStar 图像尺寸是多少？您应该使用缩放到正确尺寸的资源：推荐尺寸为 72px × 72px (24pt × 24pt @3x)、48px × 48px (24pt × 24pt @2x)。如果你这样做，你也可以删除框架大小。

【参考方案1】：

首先将您的UIButton 配置为自定义按钮：

let button = UIButton(type: .custom)

其次，您的图片资源很可能过大。我这样做的方法是按照 Apple 的指导上传重新缩放的图像。然后，您还可以删除设置帧大小的代码行。

导航栏和工具栏图标大小 使用以下大小 准备自定义导航栏和工具栏图标时的指导，但是 根据需要进行调整以创造平衡。

目标尺寸 72px × 72px (24pt × 24pt @3x) 48px × 48px (24pt × 24pt @2x) 最大尺寸 84px × 84px (28pt × 28pt @3x)56px × 56px (28pt × 28pt @2x)

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/

【讨论】：

我尝试重新缩放图像并且它有效。我想这就是问题所在。谢谢！

【参考方案2】：

您可能不想将UIBarButtonItem 与自定义视图一起使用。创建栏按钮时只需传递实际图像：

let image = UIImage(named: "filledStar")
UIBarButtonItem(image: image, style: .plain, target: self, action: #selector(bookmarkCourse(_:))

关于颜色，这是因为您的条形按钮项目的色调颜色。默认是您看到的蓝色。此外，请注意根据@rbaldwin 的评论正确扩展您的资产。