How to add interactive UILabels on top of a UIImageView?

Question

I need to add few labels on top of an UIImageView. The labels' text can be changed by tapping on them. What is the best way to achieve this? I am using Swift programming language. Looking up some solutions on stackoverflow, I found a couple of walkthroughs that use String.drawInRect method to draw some text in a rectangle which is then placed on the UIImageView. But like this I don't think I will be able to change the text, or even recognize a touch event on them. Please help.

UPDATE

My code so far:

override func viewDidLoad() {
    super.viewDidLoad()
    let img = UIImage(named: "Image")
    let imgView = UIImageView(image: img)

    self.view.addSubview(imgView)

    var myLabel = UILabel()
    myLabel.text = "Hello There"
    myLabel.textColor = UIColor.redColor()
    myLabel.font = UIFont(name: "Marker Felt", size: 20)
    myLabel.accessibilityIdentifier = "this is good!"
    myLabel.frame = CGRect(x: img!.size.width/2 /* - myLable.width / 2 ? */, y: 0, width: img!.size.width, height: 40)
    imgView.addSubview(myLabel)
    imgView.userInteractionEnabled = true
    myLabel.userInteractionEnabled = true
    let tapGesture = UITapGestureRecognizer(target: self, action: "handlePanGesture:")
    myLabel.addGestureRecognizer(tapGesture)
}

func handlePanGesture(sender: UITapGestureRecognizer) {
    var senderView = sender.view as! UILabel
    print(senderView.text)
    senderView.text = "look how i changed!"
    print(senderView.accessibilityIdentifier)
}

So far the results are positive I have an image with the label on top of it that can respond to touch events. Now I need to find the label's width so that I can effectively place it in the center when required. Then I need to find a way to place the labels at exact coordinates relative to the image's top left corner as origin.

Any help in these two tasks will be hugely appreciated.

Answer 1

Adding label on ImageView is best approach. but you can also do it by adding button on ImageView.

I created a example where i created a ImageView on storyboard and create its outlet in ViewController class and in viewDidLoad i created a label and add it to label and add UITapGestureRecognizer to label. when user taps label we changed the label text and it's position.

class ViewController: UIViewController {

 @IBOutlet weak var winterImageView: UIImageView!

 override func viewDidLoad() {
  super.viewDidLoad()

  let label = UILabel(frame: CGRect(x: 10, y: 0, width: self.winterImageView.frame.width - 10, height: 30))
  label.textColor = UIColor.redColor()

  label.userInteractionEnabled = true
  let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.handleTap(_:)))
  label.addGestureRecognizer(tapGesture)
  label.text = "Is Winter is coming, My Friend?"
  self.winterImageView.addSubview(label)

}

Change label text and position in handleTap

 /// handle tap here 
 func handleTap(sender: UITapGestureRecognizer) {

  let senderView = sender.view as! UILabel
senderView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint(item: senderView, attribute: .CenterX, relatedBy: .Equal, toItem: self.winterImageView, attribute: .CenterX, multiplier: 1, constant: 0).active = true

NSLayoutConstraint(item: senderView, attribute: .CenterY, relatedBy: .Equal, toItem: self.winterImageView, attribute: .CenterY, multiplier: 1, constant: 0).active = true
 print(senderView.text)
senderView.text = "Yes!!! Winter is coming, My Friend!!"

}

You can download project from here InteractiveLabel