stackView 内容SF-Symbols失真

问题描述

我想复制 Apple Map App 按钮,如下所示:

Screenshot

这是目前的代码:

class CustomView: UIImageView {
init(frame: CGRect,corners: CACornerMask,systemName: String) {
    super.init(frame: frame)
    self.createBorders(corners: corners)
    self.createImage(systemName: systemName)
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func createBorders(corners: CACornerMask) {
    self.contentMode = .scaleAspectFill
    self.clipsToBounds = false
    self.layer.cornerRadius = 20
    self.layer.maskedCorners = corners
    self.layer.masksToBounds = false
    self.layer.shadowOffset = .zero
    self.layer.shadowColor = UIColor.gray.cgColor
    self.layer.shadowRadius = 20
    self.layer.shadowOpacity = 0.2
    self.backgroundColor = .white
    let shadowAmount: CGFloat = 2
    let rect = CGRect(x: 0,y: 2,width: self.bounds.width + shadowAmount * 0.1,height: self.bounds.height + shadowAmount * 0.1)
    self.layer.shadowPath = UIBezierPath(rect: rect).cgPath

}

func createImage(systemName: String) {
    let image = UIImage(systemName: systemName)!
    let renderer = UIGraphicsImageRenderer(bounds: self.frame)
    let renderedImage = renderer.image { (_) in
        image.draw(in: frame.insetBy(dx: 30,dy: 30))
    }

像这样使用它:

let size = CGSize(width: 100,height: 100)
let frame = CGRect(origin: CGPoint(x: 100,y: 100),size: size)

let infoView = CustomView(frame: frame,corners: [.layerMinXMinYCorner,.layerMaxXMinYCorner],systemName: "info.circle")
let locationView = CustomView(frame: frame,corners: [],systemName: "location")
let twoDView = CustomView(frame: frame,corners: [.layerMinXMaxYCorner,.layerMaxXMaxYCorner],systemName: "view.2d")
let binocularsView = CustomView(frame: frame,.layerMinXMaxYCorner,.layerMaxXMinYCorner,systemName: "binoculars.fill")

let stackView = UIStackView(arrangedSubviews: [infoView,locationView,twoDView,binocularsView])
stackView.frame = CGRect(origin: CGPoint(x: 100,size: CGSize(width: 100,height: 400))
stackView.distribution = .fillEqually
stackView.axis = .vertical
stackView.setCustomSpacing(20,after: twoDView)
view.addSubview(stackView)

它看起来像这样:

MY Screenshot

AND:stackView 的每个图标之间没有细线:/

感谢您的帮助!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)