SF符号与ScaleSpectFill无法正常工作

Question

我注意到SF符号与scaleaspectfill的真正效果不佳。

例如，给定一个圆形方面填充uiimageView用薄边框填充，将其图像设置为uiimage（systemName：“ person.crop.circle.fill”）看起来如下。请注意，图像不会一直延伸到边缘。

将图像设置为uiimage（SystemName：“ person.fill”）看起来像这样。不知何故，它会弄乱自动布局高度约束（即使将ContentMode设置为Center）也是如此。

我的解决方法是将SF符号导出为PNG并将其加载到Xcode中，但这当然不是理想的。我是否错误地使用SF符号？

Answer 1

当我们使用 SF 符号创建 UIImage 时，它​​会获得矢量支持，并且图像的行为更像是字体字符而不是图像。

如果我们暂时跳过cornerRadius，会更容易理解。

例如，如果我将标签文本设置为 O 并为其指定黄色背景，则它将如下所示：

角色未到达边缘边界框。

因此，当我们使用： let thisImage = UIImage(systemName: "person.crop.circle.fill") 并设置图像视图的图像时，我们得到：

作为我们看到，所有 4 个侧面都有“填充”。

要“删除”填充，我们可以将 CGImage 背景转换为 UIImage ......但我们需要记住一些事情。

因此，有 6 个示例 - 每个示例都是此“基本”控制器的子类：

class MyBaseVC: UIViewController {

    let imgViewA = UIImageView()
    let imgViewB = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        [imgViewA, imgViewB].forEach { v in
            // use AspectFill
            v.contentMode = .scaleAspectFill
            // background color so we can see the framing
            v.backgroundColor = .systemYellow
            v.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview(v)
        }
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            
            imgViewA.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
            imgViewA.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            imgViewA.widthAnchor.constraint(equalToConstant: 160.0),
            imgViewA.heightAnchor.constraint(equalTo: imgViewA.widthAnchor),
            
            imgViewB.topAnchor.constraint(equalTo: imgViewA.bottomAnchor, constant: 20.0),
            imgViewB.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            imgViewB.widthAnchor.constraint(equalToConstant: 160.0),
            imgViewB.heightAnchor.constraint(equalTo: imgViewB.widthAnchor),
            
        ])
        
    }
    
}

第一个示例仅显示带有空黄色背景图像视图的布局：

class Example1VC: MyBaseVC {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

它看起来像这样：

第二个示例创建一个图像来自“person.crop.circle.fill”并设置第一个图像视图：

class Example2VC: MyBaseVC {
    override func viewDidLoad() {
        super.viewDidLoad()

        let nm = "person.crop.circle.fill"
        
        // create UIImage from SF Symbol at "default" size
        guard let imgA = UIImage(systemName: nm)?.withTintColor(.lightGray, renderingMode: .alwaysOriginal) else {
            fatalError("Could not load SF Symbol: \(nm)!")
        }
        print("imgA size:", imgA.size)
        imgViewA.image = imgA
    }
}

输出：

到目前为止，没有您还没见过的内容。

该代码还将生成的图像大小输出到调试控制台...在本例中，imgA size: (20.0, 19.0)

因此，我们将该图像保存为 20x19 png 并将其加载到第二个图像视图：

class Example3VC: MyBaseVC {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let nm = "person.crop.circle.fill"
        
        // create UIImage from SF Symbol at "default" size
        guard let imgA = UIImage(systemName: nm)?.withTintColor(.lightGray, renderingMode: .alwaysOriginal) else {
            fatalError("Could not load SF Symbol: \(nm)!")
        }

        guard let imgB = UIImage(named: "imgA20x19") else {
            fatalError("Could not load imgA20x19")
        }
        
        print("imgA:", imgA.size, "imgB:", imgB.size)
        
        imgViewA.image = imgA
        imgViewB.image = imgB
    }
}

正如预期的那样，因为它现在是位图而不是矢量数据，所以它变得难以接受的模糊......而且，我们仍然没有达到边缘：

因此，对于第四个示例，我们将使用生成的 SF Symbol 图像中的 .cgImage 支持数据来有效地“即时”创建位图版本：

class Example4VC: MyBaseVC {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let nm = "person.crop.circle.fill"

        // create UIImage from SF Symbol at "default" size
        guard let imgA = UIImage(systemName: nm)?.withTintColor(.lightGray, renderingMode: .alwaysOriginal) else {
            fatalError("Could not load SF Symbol: \(nm)!")
        }
        
        // get a cgRef from imgA
        guard let cgRef = imgA.cgImage else {
            fatalError("Could not get cgImage!")
        }
        // create imgB from the cgRef
        let imgB = UIImage(cgImage: cgRef, scale: imgA.scale, orientation: imgA.imageOrientation)
            .withTintColor(.lightGray, renderingMode: .alwaysOriginal)
        
        print("imgA:", imgA.size, "imgB:", imgB.size)
        
        imgViewA.image = imgA
        imgViewB.image = imgB
    }
}

<一个href="https://i.sstatic.net/sQoZo.png" rel="nofollow noreferrer">

越来越近...图像现在到达边缘，但仍然模糊。

为了解决这个问题，我们在生成初始 SF 符号图像时将使用“点”配置：

class Example5VC: MyBaseVC {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let nm = "person.crop.circle.fill"
        
        // create UIImage from SF Symbol at "160-pts" size
        let cfg = UIImage.SymbolConfiguration(pointSize: 160.0)
        guard let imgA = UIImage(systemName: nm, withConfiguration: cfg)?.withTintColor(.lightGray, renderingMode: .alwaysOriginal) else {
            fatalError("Could not load SF Symbol: \(nm)!")
        }
        
        // get a cgRef from imgA
        guard let cgRef = imgA.cgImage else {
            fatalError("Could not get cgImage!")
        }
        // create imgB from the cgRef
        let imgB = UIImage(cgImage: cgRef, scale: imgA.scale, orientation: imgA.imageOrientation)
            .withTintColor(.lightGray, renderingMode: .alwaysOriginal)
        
        print("imgA:", imgA.size, "imgB:", imgB.size)
        
        imgViewA.image = imgA
        imgViewB.image = imgB
    }
}

调试大小输出显示 imgB: (159.5, 159.5) （因此，非常接近 160x160 大小图像视图），它看起来像这样：

我们现在有了清晰的渲染，没有“填充”......我们可以添加角半径和边框：

class Example6VC: MyBaseVC {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let nm = "person.crop.circle.fill"
        
        // create UIImage from SF Symbol at "160-pts" size
        let cfg = UIImage.SymbolConfiguration(pointSize: 160.0)
        guard let imgA = UIImage(systemName: nm, withConfiguration: cfg)?.withTintColor(.lightGray, renderingMode: .alwaysOriginal) else {
            fatalError("Could not load SF Symbol: \(nm)!")
        }
        
        // get a cgRef from imgA
        guard let cgRef = imgA.cgImage else {
            fatalError("Could not get cgImage!")
        }
        // create imgB from the cgRef
        let imgB = UIImage(cgImage: cgRef, scale: imgA.scale, orientation: imgA.imageOrientation)
            .withTintColor(.lightGray, renderingMode: .alwaysOriginal)
        
        print("imgA:", imgA.size, "imgB:", imgB.size)
        
        imgViewA.image = imgA
        imgViewB.image = imgB
        
        [imgViewA, imgViewB].forEach { v in
            v.layer.cornerRadius = 80
            v.layer.borderColor = UIColor.red.cgColor
            v.layer.borderWidth = 1
        }
    }
    
}

示例 6 结果：

正如您在帖子中提到的，您会注意到顶部图像视图并不完全是圆形的 - 也就是说，它以某种方式失去了 1:1 的比例。

这是使用 SF 符号作为图像的一个奇怪的副作用，我早已放弃尝试理解它。无论约束如何，不同的符号都会导致图像视图改变大小。

您可以在此处查看一些讨论：https://stackoverflow.com/a/66293917/6257435