如何在UIImageView的顶部添加交互式UILabel? [英] How to add interactive UILabels on top of a UIImageView?

问题描述

我需要在UIImageView顶部添加一些标签.可以通过点击标签来更改标签的文本.实现此目标的最佳方法是什么?我正在使用Swift编程语言.在stackoverflow上查找一些解决方案时，我发现了一些演练，这些演练使用String.drawInRect方法在矩形中绘制一些文本，然后将其放置在UIImageView上.但是这样，我认为我将无法更改文本，甚至无法识别它们上的触摸事件.请帮忙.

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.

更新

到目前为止，我的代码:

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.

推荐答案

在ImageView上添加标签是最好的方法.但您也可以通过在ImageView上添加button来做到这一点.

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

我创建了一个示例，其中在情节提要板上创建了ImageView，并在ViewController类中创建了它的出口，在viewDidLoad中，我创建了标签并将其添加到标签，并在标签中添加UITapGestureRecognizer.当用户点击标签时，我们更改了标签文本及其位置.

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)

}

更改标签文本和在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!!"

}

您可以从此处 InteractiveLabel

这篇关于如何在UIImageView的顶部添加交互式UILabel?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！