How to add interactive UILabels on top of a UIImageView?

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)

}

enter image description here

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!!"

}

enter image description here

You can download project from here InteractiveLabel


I can see from the other answers and comments related to one another virtually same stuff.If you familiar using Cocoa pods then you will agree with my opinion.Always,Just look around yourself and pick the best.If you want your project goes smooth and steady then JLStickerTextView is your friend and its way to go.It's free,elegant and more vibrant label customisation project available to everyone and the best thing about this project is written in handy Swift.

Github Link: https://github.com/luiyezheng/JLStickerTextView

Features

  • You can add multiple Text to StickerTextView at the same time
  • Multiple line Text support
  • Rotate, resize the text with one finger
  • Set the Color, alpha, font, alignment, TextShadow, lineSpacing...... of the text
  • StickerTextView also handle the process of rendering text on Image Written in Swift

Note: In, My personal opinion.Way, the code been written in this projects simply superb and properly categorised.

Avaliable Text Attributes Reference:

enter image description here

MainView Screenshot from the project:

enter image description here

Output from my personal project based on JLStickerTextView.I, hope you will consider it.If you need any more information let me know...

enter image description here


github.com/khush004/StickerView/tree/master

here is code of JLStickerTextView which is error free with compatibility of swift 3.0