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

Мне нужно добавить несколько ярлыков поверх 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) } 

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

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

6 Solutions collect form web for “Как добавить интерактивные UILabels поверх UIImageView?”

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

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

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

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

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

Особенности

  • Вы можете одновременно добавить несколько текстовых файлов в StickerTextView
  • Поддержка нескольких строк текста
  • Повернуть, изменить размер текста одним пальцем
  • Установите цвет, альфа, шрифт, выравнивание, TextShadow, lineSpacing …… текста
  • StickerTextView также обрабатывает процесс визуализации текста в изображении, написанном в Swift

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

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

введите описание изображения здесь

MainView Скриншот из проекта:

введите описание изображения здесь

Вывод моего личного проекта на основе JLStickerTextView.I, надеюсь, вы его рассмотрите. Если вам нужна дополнительная информация, дайте мне знать …

введите описание изображения здесь

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

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

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

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

Ouput:

sender.view? .frame

▿ Дополнительно ▿ Некоторые: CGRect ▿ origin: CGPoint – x: 0.0 – y: 0.0 {…} ▿ размер: CGSize – ширина: 335,0 – высота: 28,0

  • Поверните UIlabel, чтобы сделать его вертикальным
  • Как найти фактическое количество строк UILabel?
  • swift: программно создает фиксированную ширину UILabel, которая изменяется по вертикали в соответствии с длиной текста
  • Получить разрыв строки в UILabel из-за Autolayout
  • Как выровнять текст UILabel снизу?
  • Сбой приложения Iphone по строке: UIKit`-
  • Word Wrap не работает для UILabel
  • Могу ли я использовать шрифты Tally в UILabel?
  • Цвет текста усекающихся хвостов UILabel
  • Выровнять два текста UILabel
  • Как получить высоту RTLabel
  • PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.