使用 SVG 图像时，如何设置作为 UIBarButtonItem 的自定义视图添加的 Button 的宽度和高度？

Question

我有一张矢量图，下载自 phosphor-icons:

我下载了 .svg 版本的图标。当您在图像编辑器中打开此矢量文件时，您会看到它有 192x192 尺寸。我猜这与矢量文件无关，但是...

我有这个代码：

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 32, height: 32))

button.imageView?.contentMode  = .scaleAspectFit
button.backgroundColor = .yellow
button.setImage(UIImage(named: "alien"), for: .normal)
button.setTitle(nil, for: .normal)
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
let item = UIBarButtonItem(customView: button)

navigationItem.setRightBarButtonItems([item], animated: true)

现在的问题是，如果我使用这个原始 svg 图像 (192x192)，按钮会缩小，看起来像这样：

但我不希望此按钮具有这些尺寸，而是那些设置为：

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 32, height: 32))

现在，如果我转到图像编辑器，并将此矢量文件的大小更改为 22x22（它仍然是 svg 文件），它会显示如下：

我想要的样子。

问题是，我认为 Xcode 会根据设备的像素密度从这个 svg 生成所需的 png 文件。因此，在这种情况下，比方说，在使用 @3x 图像的较新设备上，在编译时，由于我的按钮被定义为 32x32 点，因此将创建 96px X 96px 图像并将其用作 @3x 图片.

此外，我认为无论物理 .svg 文件的“尺寸”是多少，我都认为这会像描述的那样工作，因为它是一个向量，它应该 up/down 根据视图指示缩放。我哪里错了，以及如何使这个按钮看起来与第二张图片相同，无论实际尺寸是多少。svg 尺寸？

编辑：

在 Attributes Inspector 中，为此资产，我设置了 Preserve Vector Data 并选择了 Single Scale 选项。

Answer 1

添加按钮作为条形按钮项的 customView 时，UIKit 将自动使用 auto-layout。

所以，你的初始化 UIButton(frame: CGRect(x: 0, y: 0, width: 32, height: 32)) 没有任何效果。

我从您链接到的网站上抓取了“alien.svg”并使用了它 un-edited，设置如下：

然后，使用此代码（在 viewDidLoad() 中）：

    let button = UIButton()
    
    button.backgroundColor = .yellow
    button.setImage(UIImage(named: "alien"), for: .normal)
    button.setTitle(nil, for: .normal)

    // adding the button as a custom bar button item view
    //  automatically uses auto-layout
    button.widthAnchor.constraint(equalToConstant: 32).isActive = true
    button.heightAnchor.constraint(equalTo: button.widthAnchor).isActive = true
    
    button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)

    let item = UIBarButtonItem(customView: button)

    // you can use either
    //navigationItem.rightBarButtonItem = item
    
    // or
    navigationItem.setRightBarButtonItems([item], animated: true)

我们得到这个结果：

Answer 2

另一种不使用自动布局约束实现此目的的方法，就像您评论的那样，是对 customview

使用 UIView()

   let view = UIView(frame: button.frame)
   view.addSubview(button)

   let item = UIBarButtonItem(customView: view)
   self.navigationItem.setRightBarButtonItems([item], animated: true)

使用 SVG 图像时，如何设置作为 UIBarButtonItem 的自定义视图添加的 Button 的宽度和高度？

How to set width and heigh of UIButton that is added as custom view of UIBarButtonItem when using SVG images?

svg

uibutton

uibarbuttonitem

ios

swift