Question

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

更新

到目前为止我的代码：

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)
}

到目前为止，结果是积极的我有一个图像，顶部有标签，可以响应触摸事件。现在我需要找到标签的宽度，这样我就可以在需要时有效地将它放在中心位置。然后我需要找到一种方法将标签放在相对于图像左上角的精确坐标作为原点。

对这两项任务的任何帮助都将非常感激。

Answer 1

在ImageView上添加标签是最好的方法。但您也可以在button上添加ImageView。

我创建了一个示例，我在故事板上创建了ImageView并在ViewController类中创建了它的插座，并在viewDidLoad我创建了一个标签并将其添加到标签并添加UITapGestureRecognizer到标签。当用户点击标签时，我们更改了标签文字及其位置。

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

下载项目

Answer 2

我可以从其他答案和评论中看到彼此几乎相同的东西。如果你熟悉使用Cocoa pods那么你会同意我的意见。总是，只要环顾四周，挑选最好的。如果你想要你的项目顺畅而稳定然后 JLStickerTextView 是你的朋友和它的方式。它是免费的，优雅的，更有活力的标签定制项目，每个人都可以使用，这个项目的最好的东西是有用的的夫特

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

功能

您可以同时向StickerTextView添加多个文本

多行文字支持

用一根手指旋转，调整文本大小

设置文本的颜色，字母，字体，对齐方式，TextShadow，lineSpacing ......

StickerTextView还处理在Image上呈现文本的过程写在Swift

注意： In，我的个人意见。但是，这些代码编写的代码非常精湛，分类合理。

Avaliable Text Attributes参考：

项目的MainView截图：

基于JLStickerTextView.I的个人项目输出，希望您能考虑一下。如果您需要更多信息，请告诉我......

Answer 3

您可以使用标签并添加手势识别器，您可以从中设置操作。

编辑（回应OP评论）：

基本上你将UILabel放在卡片上，在其上设置手势识别器，并将隐藏的UITextField设置在与标签相同的位置。这样，当您点击它时，您在手势识别器方法中指定UI必须将标签设置为隐藏，将文本字段设置为可见。完成后（结束编辑），只需保存更改并更新用户界面。

Answer 4

如果您只想将UILabel和UIImageView居中对齐，可以使用AutoLayout约束。

NSLayoutConstraint(item: label, attribute: .CenterX, relatedBy: .Equal, toItem: imageView, attribute: .CenterX, multiplier: 1, constant: 0).active = true

NSLayoutConstraint(item: label, attribute: .CenterY, relatedBy: .Equal, toItem: imageView, attribute: .CenterY, multiplier: 1, constant: 0).active = true

Answer 5

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

输出：

<强> sender.view？.frame

▿可选 ▿部分：CGRect ▿原产地：CGPoint - x：0.0 - y：0.0 {...} ▿尺寸：CGSize - 宽度：335.0 - 身高：28.0

Answer 6

我使用CALayers，手势识别器和图层的hitTest方法。示例代码如下：

class ImageView: UIImageView {

    let tapGesture = UITapGestureRecognizer()

    let redLayer = CATextLayer()
    var redHitCounter:Int = 0
    let greenLayer = CATextLayer()
    var greenHitCounter:Int = 0

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUpClickableLayers()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUpClickableLayers()
    }

    private func setUpClickableLayers() {

        self.isUserInteractionEnabled = true

        tapGesture.numberOfTapsRequired = 1
        tapGesture.addTarget(self, action: #selector(changeText))
        self.addGestureRecognizer(tapGesture)

        redLayer.frame = CGRect(x: 40, y: 40, width: 100, height: 40)
        redLayer.backgroundColor = UIColor.red.cgColor
        redLayer.string = String(redHitCounter)
        redLayer.alignmentMode = kCAAlignmentCenter
        self.layer.addSublayer(redLayer)

        greenLayer.frame = CGRect(x: 40, y: 140, width: 100, height: 40)
        greenLayer.backgroundColor = UIColor.green.cgColor
        greenLayer.string = String(redHitCounter)
        greenLayer.alignmentMode = kCAAlignmentCenter
        self.layer.addSublayer(greenLayer)
    }

    internal func changeText(_ recognizer:UITapGestureRecognizer) {
        let p = recognizer.location(in: self)
        if (redLayer.hitTest(p) != nil) {
            redHitCounter += 1
            redLayer.string = String(redHitCounter)
        } else if (greenLayer.hitTest(p) != nil) {
            greenHitCounter += 1
            greenLayer.string = String(greenHitCounter)
        }
    }
}

一些注意事项：

（1）记得将UIImageView的isUserInteractionEnabled设置为true。我花了一个小时来调试我的UIImageView看到手势的原因！

（2）hitTest（）方法适用于CALayer和所有子类。只要记住使图层足够大，以便在肥胖的手指上工作。

（3）您还可以使用平移和捏合手势来移动，旋转和调整目标图层的大小。

Answer 7

github.com/khush004/StickerView/tree/master

这里是JLStickerTextView的代码，它与swift 3.0的兼容性没有错误

如何在UIImageView上添加交互式UILabel？

7 个答案: