SF Symbols not loading into UIImageView - ios

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

Give your imageViews tint color will resolve the issue
leftArrow.tintColor = .blue
leftArrow.tintColor = .blue

Answer 2

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: