iOS - Create a huge amount of UIImageViews without freezing the UI - ios

Question

I have to render create a huge amount(~10000) of UIImage objects, which are later added to a map using MapBox. The image are created by rendering a UILabel to an UIImage (sadly, the label can not directly be rendered on the map in the right font).
I imagined that, because I am not adding the views to the hierarchy until they are rendered on the map, I could create the views on a background thread in order to not have the UI freeze. However, this seems not to be possible.
My question is, is there a way to create a huge amount of UIImage objects by rendering a UILabel to an image without freezing the UI? Thanks for any help!
My code to render a UIView to an image is as follows:
private func render(_ view: UIView) -> UIImage? {
UIGraphicsBeginImageContext(view.frame.size)
guard let currentContext = UIGraphicsGetCurrentContext() else {return nil}
view.layer.render(in: currentContext)
return UIGraphicsGetImageFromCurrentImageContext()
}
And an example of a label I render to an image:
bigItemList.forEach { item in
// work to process the item..
// I have to call the rendering om the main thread, which causes the UI to freeze
DispatchQueue.main.async {
addImage(createLabel(text: label))
}
}
func createLabel(text: String?) -> UIImage? {
let label = UILabel()
label.textAlignment = .center
label.font = .boldSystemFont(ofSize: 14)
label.textColor = .mainBlue
label.text = text
label.sizeToFit()
label render(depthLabel)
}

Answer 1

UILabel is not safe to access on any non-main thread. The tool you want here is CATextLayer which will do all the same things (with a slightly clunkier syntax) while being thread-safe. For example:
func createLabel(text: String) -> UIImage? {
let label = CATextLayer()
let uiFont = UIFont.boldSystemFont(ofSize: 14)
label.font = CGFont(uiFont.fontName as CFString)
label.fontSize = 14
label.foregroundColor = UIColor.blue.cgColor
label.string = text
label.bounds = CGRect(origin: .zero, size: label.preferredFrameSize())
let renderer = UIGraphicsImageRenderer(size: label.bounds.size)
return renderer.image { context in
label.render(in: context.cgContext)
}
}
This is safe to run on any queue.

Answer 2

You most probably are already in main queue. Try execuring the loop in another one:
DispatchQueue.init(label: "Other queue").async {
bigItemList.forEach { item in
// work to process the item..
// I have to call the rendering om the main thread, which causes the UI to freeze
DispatchQueue.main.async {
addImage(createLabel(text: label))
}
}
}
EDIT: If it is already in another queue, you are also missing the UIGraphicsEndImageContext() call into render:
private func render(_ view: UIView) -> UIImage? {
UIGraphicsBeginImageContext(view.frame.size)
guard let currentContext = UIGraphicsGetCurrentContext() else {return nil}
view.layer.render(in: currentContext)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return img
}
EDIT: Another thing I see is that label allocation is the most time consuming in your loop. Try allocating it once since it's reusable:
let label = UILabel()
func createLabel(text: String?) -> UIImage? {
label.textAlignment = .center
...
...
}