如何在UIImageView的顶部添加交互式UILabel？

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

UPDATE

我的代码到目前为止： 

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

到目前为止的结果是积极的，我有一个形象的标签上，它可以响应触摸事件。 现在我需要find标签的宽度，以便在需要时可以有效地将其放置在中间位置。 然后，我需要find一种方法来将标签放置在相对于图像左上angular的精确坐标处作为原点。

任何帮助这两个任务将非常感激。

在ImageView上添加标签是最好的方法。 但你也可以通过在ImageView上添加button来完成。

我创build了一个示例，我在Storyboard上创build了一个ImageView ，并在ViewController类中创build了它的sockets。在viewDidLoad我创build了一个标签，并将其添加到标签中，并添加了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项目

我使用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。 我花了一个小时来debugging为什么我的UIImageView看到手势！

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

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

我可以从其他相关的答案和意见看到几乎相同的东西。如果你熟悉使用cocoa豆荚，那么你会同意我的意见。总是，环顾自己，select最好的。如果你想让你的项目顺利，然后JLStickerTextView是你的朋友和它的路要走。它是免费的，优雅和更有活力的标签定制项目提供给每个人和关于这个项目最好的事情是写在方便的斯威夫特 。

Github链接 ： https ： //github.com/luiyezheng/JLStickerTextView

特征

  • 您可以同时将多个文本添加到StickerTextView
  • 多行文本支持
  • 旋转，用一根手指调整文本的大小
  • 设置文本的颜色，alpha，字体，alignment方式，TextShadow，lineSpacing ……
  • StickerTextView还处理在Swift中写入图像的文本的过程

注：在我个人的意见。这个代码是写在这个项目简单精湛，适当分类。

可用文本属性参考：

在这里输入图像说明

MainView从项目的屏幕截图：

在这里输入图像说明

从我个人的项目输出基于JLStickerTextView.I，希望你会考虑它。如果你需要更多的信息让我知道…

在这里输入图像说明

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

编辑（回应评论）：

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

如果你只想alignment你的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 
 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

github.com/khush004/StickerView/tree/master

这里是与swift 3.0兼容的无错误的JLStickerTextView的代码

Interesting Posts