如何在 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.

更新

到目前为止我的代码:

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中更改标签文本和位置

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

}

您可以从这里下载项目InteractiveLabel

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