SF Symbols not loading into UIImageView

Question

I am creating an app for tracking health information, and I would like to use the two arrow images from SF Symbols. Unfortunately, no matter what I try, these symbols will not show up. I have already tested the code with an image from the Assets folder, which seems to work with no problem in the UIImageViews I have created. It is only when I attempt to use UIImage(systemName: ) that I am having problems.

        self.calendarView = UIView(frame: CGRect(x: 0, y: self.getCurrentY(), width: UIScreen.main.bounds.width, height: 60))
        self.calendarView?.backgroundColor = .white
        self.calendarView?.layer.borderColor = UIColor.black.cgColor
        self.calendarView?.layer.borderWidth = 1

        self.currentDate = UILabel(frame: CGRect(x: self.calendarView!.bounds.width / 4, y: self.calendarView!.bounds.height / 2 - 20, width: self.calendarView!.bounds.width / 2, height: 40))
        self.currentDate!.text = "5/6/20"
        self.currentDate!.textColor = .black
        self.currentDate!.layer.borderColor = UIColor.black.cgColor
        self.currentDate?.layer.borderWidth = 1
        self.currentDate?.textAlignment = .center
        self.calendarView?.addSubview(currentDate!)

        //let testImage = UIImage(named: "logotest.jpg")!
        let image1 = UIImage(systemName: "arrow.left")!.withTintColor(.blue)
        let image2 = UIImage(systemName: "arrow.right")!.withTintColor(.blue)

        self.leftArrow = UIImageView(image: image1)
        self.rightArrow = UIImageView(image: image2)

        self.leftArrow?.frame = CGRect(x: 10, y: 10, width: 40, height: 40)
        self.rightArrow?.frame = CGRect(x: UIScreen.main.bounds.width - 50, y: 10, width: 40, height: 40)

        self.leftArrow?.layer.borderWidth = 1
        self.rightArrow?.layer.borderWidth = 1

        self.calendarView!.addSubview(self.leftArrow!)
        self.calendarView!.addSubview(self.rightArrow!)
        self.contentView.addSubview(self.calendarView!)

What seems even stranger is that when I enter a breakpoint, the images actually show! I've attached a picture of this as well. Any help I can get with this is appreciated. Thanks!

Answer 1

1) You should be using constraints / auto-layout instead of explicit frames.

2) You should use if let and guard let to avoid all those ! and ?

Try it like this:

class ViewController: UIViewController {

    var leftArrow: UIImageView!
    var rightArrow: UIImageView!
    var calendarView: UIView!
    var currentDate: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        //self.calendarView = UIView(frame: CGRect(x: 0, y: self.getCurrentY(), width: UIScreen.main.bounds.width, height: 60))
        self.calendarView = UIView()
        self.calendarView.backgroundColor = .white
        self.calendarView.layer.borderColor = UIColor.black.cgColor
        self.calendarView.layer.borderWidth = 1

        //self.currentDate = UILabel(frame: CGRect(x: self.calendarView!.bounds.width / 4, y: self.calendarView!.bounds.height / 2 - 20, width: self.calendarView!.bounds.width / 2, height: 40))
        self.currentDate = UILabel()
        self.currentDate.text = "5/6/20"
        self.currentDate.textColor = .black
        self.currentDate.layer.borderColor = UIColor.black.cgColor
        self.currentDate.layer.borderWidth = 1
        self.currentDate.textAlignment = .center

        //let testImage = UIImage(named: "logotest.jpg")!
        guard let imgLeft = UIImage(systemName: "arrow.left"),
            let imgRight = UIImage(systemName: "arrow.right") else {
                fatalError("Could not create arrow images!")
        }

        let image1 = imgLeft.withTintColor(.blue)
        let image2 = imgRight.withTintColor(.blue)

        self.leftArrow = UIImageView(image: image1)
        self.rightArrow = UIImageView(image: image2)

        //self.leftArrow.frame = CGRect(x: 10, y: 10, width: 40, height: 40)
        //self.rightArrow.frame = CGRect(x: UIScreen.main.bounds.width - 50, y: 10, width: 40, height: 40)

        self.leftArrow.layer.borderWidth = 1
        self.rightArrow.layer.borderWidth = 1

        self.calendarView.addSubview(currentDate)
        self.calendarView.addSubview(self.leftArrow)
        self.calendarView.addSubview(self.rightArrow)

        //self.contentView.addSubview(self.calendarView)
        self.view.addSubview(self.calendarView)

        [calendarView, currentDate, leftArrow, rightArrow].forEach {
            $0?.translatesAutoresizingMaskIntoConstraints = false
        }

        // respect safe area
        let g = view.safeAreaLayoutGuide

        NSLayoutConstraint.activate([

            // calendarView to view (safe area) Top / Leading / Trailing
            //  Height: 60
            calendarView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
            calendarView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
            calendarView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
            calendarView.heightAnchor.constraint(equalToConstant: 60.0),

            // currentDate label to calendarView centerX & centerY
            //  Width: 1/2 of calendarView width
            //  Height: 40
            currentDate.centerXAnchor.constraint(equalTo: calendarView.centerXAnchor),
            currentDate.centerYAnchor.constraint(equalTo: calendarView.centerYAnchor),
            currentDate.heightAnchor.constraint(equalToConstant: 40.0),
            currentDate.widthAnchor.constraint(equalTo: calendarView.widthAnchor, multiplier: 0.5),

            // leftArrow to calendarView Leading: 10 Width: 40 Height: 40 centerY
            leftArrow.leadingAnchor.constraint(equalTo: calendarView.leadingAnchor, constant: 10.0),
            leftArrow.widthAnchor.constraint(equalToConstant: 40.0),
            leftArrow.heightAnchor.constraint(equalToConstant: 40.0),
            leftArrow.centerYAnchor.constraint(equalTo: calendarView.centerYAnchor),

            // rightArrow to calendarView Trailing: -10 Width: 40 Height: 40 centerY
            rightArrow.trailingAnchor.constraint(equalTo: calendarView.trailingAnchor, constant: -10.0),
            rightArrow.widthAnchor.constraint(equalToConstant: 40.0),
            rightArrow.heightAnchor.constraint(equalToConstant: 40.0),
            rightArrow.centerYAnchor.constraint(equalTo: calendarView.centerYAnchor),

        ])

    }
}

Output:

and, with auto-layout and constraints, it auto-sizes when needed - such as on device rotation:

Answer 2

Give your imageViews tint color will resolve the issue

leftArrow.tintColor = .blue 
leftArrow.tintColor = .blue