Adding textfeilds on top of drawing veiw image XCode SwiftUI - ios

Question

Essentially I would like to add text fields on top of my image.
Currently, my viewDidLoad() is currently set up as such.
-Image Background (UIImage)
--Drawing Canvas
I would like it to be set up as such so that it is not possible to draw over the text fields, as I realize it is possible to add text over the image itself
-Image Background (UIImage)
---Drawing Canvas
-----TextFeild Struct
I would assume I need to use UITextField but I keep on getting this error in my simulation.
(Fatal error: Unexpectedly found nil while implicitly unwrapping an
Optional value)
In addition to this error, I'm unable to edit the scaling of my image background. I tried everything turning the imageView to content mode, and modifying the image before adding the view (scaleAspectFit/scaleAspectFill), resizing the view the only thing that seemed to work was changing the resolution of the source image.
I would like to add text fields up top right
class DrawingCanvasViewController: UIViewController {
#IBOutlet weak var nameTextField: UITextField!
lazy var canvas: PKCanvasView = {
let view = PKCanvasView()
view.drawingPolicy = .anyInput
view.minimumZoomScale = 1
view.maximumZoomScale = 1
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
lazy var toolPicker: PKToolPicker = {
let toolPicker = PKToolPicker()
toolPicker.addObserver(self)
return toolPicker
}()
var drawingData = Data()
var drawingChanged: (Data) -> Void = {_ in}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(canvas)
canvas.backgroundColor = .clear
let iTest=UIImage(named: "Test2")
let imageView=UIImageView(image: iTest)
//This is what I have used for trying to resize my background image, although none of it seems to ever work
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFit
view.addSubview(imageView)
view.sendSubviewToBack(imageView)
//The fatal error it gives me is from these two lines below
// view.addSubview(nameTextField)
// view.bringSubviewToFront(nameTextField)
NSLayoutConstraint.activate([
canvas.leadingAnchor.constraint(equalTo: view.leadingAnchor),
canvas.trailingAnchor.constraint(equalTo: view.trailingAnchor),
canvas.topAnchor.constraint(equalTo: view.topAnchor),
canvas.bottomAnchor.constraint(equalTo: view.bottomAnchor)])
toolPicker.setVisible(true, forFirstResponder: canvas)
toolPicker.addObserver(canvas)
canvas.delegate = self
canvas.becomeFirstResponder()
if let drawing = try? PKDrawing(data: drawingData){
canvas.drawing = drawing
}
}
}
I'm new to Xcode, I did follow a tutorial to add the pencil kit UI although am currently unable to refind it, and I figured out how to add the background image from looking at apple documentation, Hence I may have simply missed an easier/better way to code my app.

Answer 1

what I'm seeing from your code is: that you added UITextField in your Xib/Storyboard file. Therefore you can remove the reference of UITextField in the Xib/Storyboard file with the controller and introduce UITextField programmatically. My solution below will only address the fatal error from the 2 lines:
view.addSubview(nameTextField)
view.bringSubviewToFront(nameTextField)
Then let me know other issues when you get this one working first. Please adjust the contrainst of nameTextField to have it visible.
class DrawingCanvasViewController: UIViewController {
// initialise text field
lazy var nameTextField: UITextField = {
let textField = UITextField()
textField.translatesAutoresizingMaskIntoConstraints = false
// Please setup delegate by yourself
return textField
}()
lazy var canvas: PKCanvasView = {
let view = PKCanvasView()
view.drawingPolicy = .anyInput
view.minimumZoomScale = 1
view.maximumZoomScale = 1
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
lazy var toolPicker: PKToolPicker = {
let toolPicker = PKToolPicker()
toolPicker.addObserver(self)
return toolPicker
}()
var drawingData = Data()
var drawingChanged: (Data) -> Void = {_ in}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(canvas)
canvas.backgroundColor = .clear
let iTest=UIImage(named: "Test2")
let imageView=UIImageView(image: iTest)
//This is what I have used for trying to resize my background image,
// although none of it seems to ever work
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.contentMode = .scaleAspectFit
view.addSubview(imageView)
view.sendSubviewToBack(imageView)
// since you already created the nameTextField as a lazy variable
// then you can add it here
view.addSubview(nameTextField)
view.bringSubviewToFront(nameTextField)
NSLayoutConstraint.activate([
canvas.leadingAnchor.constraint(equalTo: view.leadingAnchor),
canvas.trailingAnchor.constraint(equalTo: view.trailingAnchor),
canvas.topAnchor.constraint(equalTo: view.topAnchor),
canvas.bottomAnchor.constraint(equalTo: view.bottomAnchor)])
toolPicker.setVisible(true, forFirstResponder: canvas)
toolPicker.addObserver(canvas)
canvas.delegate = self
canvas.becomeFirstResponder()
if let drawing = try? PKDrawing(data: drawingData){
canvas.drawing = drawing
}
}
}