Storyboard 与代码混合使用时，SF Symbols 图标大小不受控？解决方案详解！

2024-07-09 13:39:54

你是否也曾为了 SF Symbols 图标大小失控而抓狂？明明在代码中设置了 pointSize，但图标大小依然固执地受 Storyboard 中 UIImageView 框架大小的限制，仿佛在跟你唱反调。

别担心，你不是一个人！本文将带你抽丝剥茧，揭开这个问题背后的真相，并奉上两种行之有效的解决方案，让你彻底告别图标大小失控的烦恼，从此在 SF Symbols 的世界里自由驰骋！

根源：Storyboard 默认设置的“罪魁祸首”

SF Symbols 的强大之处在于其灵活性，开发者可以通过代码或 Storyboard 随心所欲地配置图标样式，包括大小、颜色、粗细等。然而，这种灵活性也为我们埋下了一个小小的“坑”。

当 Storyboard 与代码混合使用时，Storyboard 中 UIImageView 的默认 Content Mode 设置为 "Scale To Fill"，这意味着图片会被无情地拉伸或压缩以填满整个 ImageView 框架。即使你在代码中通过 preferredSymbolConfiguration 苦心孤诣地设置了 pointSize，Storyboard 的默认 Content Mode 也会无视你的努力，我行我素地覆盖你的设置，最终导致图标大小无法按照预期显示。

解决方案一：代码优先，掌控全局

既然 Storyboard 的默认设置是罪魁祸首，那么最直接的解决方案就是绕过它，完全通过代码来创建和配置 UIImageView。

移除 Storyboard 中的 UIImageView : 首先，我们需要果断地删除 Storyboard 中与 SF Symbols 图标关联的 UIImageView 组件，眼不见心不烦。
代码创建 UIImageView : 然后，在 ViewController 的代码中，像迎接新生命一样创建一个全新的 UIImageView 实例。
设置 SF Symbols 配置 : 使用 UIImage.SymbolConfiguration 创建配置，就像为你的图标量身定制一套服装，设置 pointSize 和其他样式属性，让它展现出最完美的姿态。
设置 UIImageView 的 Image : 将配置好的 SF Symbols 图片郑重地赋值给 UIImageView 的 image 属性。
添加约束或布局 : 最后，根据需要，使用 Auto Layout 或手动计算坐标，将 UIImageView 添加到视图层次结构中，并设置其位置和大小，让它在你的 App 中找到属于自己的位置。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建 UIImageView
        let symbolImageView = UIImageView()

        // 设置 SF Symbols 配置
        let config = UIImage.SymbolConfiguration(pointSize: 50, weight: .light)
        symbolImageView.image = UIImage(systemName: "calendar", withConfiguration: config)

        // 添加到视图并设置约束（示例）
        view.addSubview(symbolImageView)
        symbolImageView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            symbolImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            symbolImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

通过代码创建和配置 UIImageView，你就像一位掌控全局的指挥家，完全掌控了图标的大小和位置，再也不用担心 Storyboard 默认设置的干扰了。

解决方案二：Storyboard 与代码协同工作

如果你对 Storyboard 情有独钟，更倾向于在其中设计界面，同时又希望保留代码的灵活性，那么可以选择一种更温和的解决方案：

设置 Content Mode : 在 Storyboard 中选中 UIImageView，将其 Content Mode 属性设置为 "Center" 或 "Aspect Fit"，就像给图片松了松绑，阻止它自动填充整个 ImageView 框架。
代码设置 pointSize : 在 ViewController 的代码中，获取 Storyboard 中 UIImageView 的引用，并设置其 preferredSymbolConfiguration 属性，指定 pointSize 和其他样式属性。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var symbolImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = UIImage.SymbolConfiguration(pointSize: 50, weight: .light)
        symbolImageView.preferredSymbolConfiguration = config
    }
}

通过修改 Content Mode 并结合代码设置 preferredSymbolConfiguration，你就像一位外交官，让 Storyboard 和代码握手言和，协同工作，最终实现对 SF Symbols 图标大小的精确控制。

总结：两种方案，任君选择

在 Xcode 中使用 SF Symbols 时，了解 Storyboard 和代码之间的微妙关系至关重要。

如果你追求极致的掌控力，可以选择 代码优先 的方案，将一切尽在掌握。
如果你更偏爱 Storyboard 的便利性，可以选择 Storyboard 与代码协同工作 的方案，在两者之间找到平衡。

选择适合你的解决方案，你就能轻松驾驭 SF Symbols，打造出精美绝伦的应用界面！

常见问题解答

问：除了 pointSize，我还能通过 UIImage.SymbolConfiguration 配置哪些样式属性？

答 : UIImage.SymbolConfiguration 还提供了 weight（字重）、 scale（缩放）、 paletteColors（调色板颜色）等属性，可以对 SF Symbols 图标进行更精细的调整。
问：如果我想在不同的屏幕尺寸下显示不同大小的图标，该怎么办？

答 : 你可以使用 UIImage.SymbolConfiguration 的 font 属性，并结合 UIFontMetrics 类来根据动态类型和其他环境因素调整图标大小。
问：除了使用 UIImageView，还有其他方法可以使用 SF Symbols 吗？

答 : 你可以直接将 SF Symbols 用作按钮或标签的图像，或者将它们渲染为 AttributedString 中的附件图像。
问：SF Symbols 支持哪些 iOS 版本？

答 : SF Symbols 在 iOS 13 及更高版本中可用。
问：如何查找可用的 SF Symbols 图标？

答 : 你可以在 Xcode 中使用 SF Symbols 应用程序浏览和搜索可用的图标，或者访问 Apple 开发者网站上的 SF Symbols 文档。