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

Question

我需要在 UIImageView 上添加一些标签。标签的文本可以通过点击它们来更改。实现这一目标的最佳方法是什么？我正在使用 Swift 编程语言。在 Whosebug 上查找一些解决方案，我发现了一些使用 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

您可以使用标签并添加可以设置动作的手势识别器。

编辑（回复 OP 评论）：

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

Answer 2

如果你只想居中对齐你的 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 3

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 4

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

上添加 button 来实现

我创建了一个示例，其中我在故事板上创建了一个 ImageView 并在 ViewController class 中创建了它的出口，在 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 5

我可以从彼此相关的其他答案和评论中看出几乎相同 stuff.If 你熟悉使用 Cocoa pods 那么你会同意我的 opinion.Always,环顾四周，选择 best.If 你希望你的项目顺利进行的 JLStickerTextView 是你的朋友，它是通往 go.It 的自由、优雅和每个人都可以使用更有活力的标签定制项目，这个项目最好的地方是写在手边 Swift.

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

特征

您可以同时向 StickerTextView 添加多个 Text
多行文本支持
用一根手指旋转、调整文本大小
设置文字的Color、alpha、font、alignment、TextShadow、lineSpacing……
StickerTextView 还处理在图像上呈现文本的过程写在Swift

注意：在我个人opinion.Way中，这个项目中编写的代码非常棒并且分类正确。

可用文本属性参考：

项目的 MainView 屏幕截图：

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

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？

How to add interactive UILabels on top of a UIImageView?

interactive

uiimageview

uilabel

ios

swift