Как добавить интерактивные UILabels поверх UIImageView?

Question

Мне нужно добавить несколько ярлыков сверху UIImageView. Текст меток можно изменить, нажав на них. Каков наилучший способ достичь этого? Я использую язык программирования Swift. Подняв некоторые решения в stackoverflow, я нашел пару походов, которые используют метод 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) 
} 

Пока результаты положительны у меня есть изображение с меткой на верхней части его, которая может реагировать на события нажатия. Теперь мне нужно найти ширину метки, чтобы я мог эффективно разместить ее в центре по мере необходимости. Затем мне нужно найти способ поместить метки в точную координату относительно верхнего левого угла изображения в качестве источника.

Любая помощь в этих двух задачах будет чрезвычайно оценена.

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

Вы можете использовать ярлык и добавить распознаватель жестов, из которого вы можете установить действие.

EDIT (в ответ на комментарий OP):

В основном вы положили UILabel на верхней части карты, установить жест распознаватель на нем, а также установить скрытый UITextField в таком же положении, как этикетки. Таким образом, когда вы нажимаете на него, вы указываете в своем методе распознавания жестов, что пользовательский интерфейс должен указывать ярлык как скрытое и текстовое поле как видимое. Когда вы закончите (редактирование), просто сохраните изменения и обновите пользовательский интерфейс.

Answer 3

Если вы просто хотите выровнять по центру ваши 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 4

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

Ouput:

sender.view .frame

▿ Дополнительный ▿ Некоторые: CGRect ▿ Происхождение: CGPoint - х: 0,0 - у: 0,0 {...} ▿ размер: CGSize - ширина: 335,0 - высота: 28.0

Answer 5

Я могу видеть из другие ответы и комментарии, связанные друг с другом практически такими же. Если вы знакомы с использованием Cocoa pods, тогда вы согласитесь с моим мнением. Всегда смотрите на себя и выбирайте лучшее. Если вы хотите, чтобы ваш проект прошел гладко и устойчиво, тогда JLStickerTextView - ваш друг и его путь. Это бесплатный, элегантный и более яркий проект по настройке ярлыков для всех, и самое лучшее в этом проекте написано в удобном виде Swift.

Github Ссылка: https://github.com/luiyezheng/JLStickerTextView

Особенности

• Вы можете добавить несколько текста в StickerTextView в то же время
• Multiple линия текста поддержка
• Поворот, изменение размера текста с один палец
• Установите Colo г, альфа, шрифт, выравнивание, TextShadow, LineSpacing ...... текста
• StickerTextView также управлять процессом рендеринга текста на изображениях Написанных в Swift

Примечания:, мой личное мнение. Послушайте, код был написан в этих проектах просто превосходный и правильно классифицированный.

Доступные Атрибуты текста Ссылка:

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) Не забудьте установить isUserInteractionEnabled ваш UIImageView, чтобы верно. Мне потребовался час, чтобы отладить, почему мой UIImageView видел жесты!

(2) Метод hitTest() работает для CALayer и всех подклассов. Просто не забудьте сделать слой достаточно большим, чтобы работать на толстых пальцах.

(3) Вы также можете использовать жесты панорамирования и зажима для перемещения, поворота и изменения размера целевого слоя.

Answer 7

github.com/khush004/StickerView/tree/master

здесь код JLStickerTextView который является безошибочным с совместимостью стремительной 3.0