Tap on a part of text of UILabel
Solution 1
#swift 4.2
Please find the solution here for getting specific text action
of Label
.
-
Label declaration
@IBOutlet weak var lblTerms: UILabel!
-
Set attributed text to the label
let text = "Please agree for Terms & Conditions." lblTerms.text = text self.lblTerms.textColor = UIColor.white let underlineAttriString = NSMutableAttributedString(string: text) let range1 = (text as NSString).range(of: "Terms & Conditions.") underlineAttriString.addAttribute(NSAttributedString.Key.underlineStyle, value: NSUnderlineStyle.single.rawValue, range: range1) underlineAttriString.addAttribute(NSAttributedString.Key.font, value: UIFont.init(name: Theme.Font.Regular, size: Theme.Font.size.lblSize)!, range: range1) underlineAttriString.addAttribute(NSAttributedString.Key.foregroundColor, value: Theme.color.primaryGreen, range: range1) lblTerms.attributedText = underlineAttriString lblTerms.isUserInteractionEnabled = true lblTerms.addGestureRecognizer(UITapGestureRecognizer(target:self, action: #selector(tapLabel(gesture:))))
It looks like the above image.
-
Add the
tapLabel
action method to the controller@IBAction func tapLabel(gesture: UITapGestureRecognizer) { let termsRange = (text as NSString).range(of: "Terms & Conditions") // comment for now //let privacyRange = (text as NSString).range(of: "Privacy Policy") if gesture.didTapAttributedTextInLabel(label: lblTerms, inRange: termsRange) { print("Tapped terms") } else if gesture.didTapAttributedTextInLabel(label: lblTerms, inRange: privacyRange) { print("Tapped privacy") } else { print("Tapped none") } }
-
Add
UITapGestureRecognizer
extensionextension UITapGestureRecognizer { func didTapAttributedTextInLabel(label: UILabel, inRange targetRange: NSRange) -> Bool { // Create instances of NSLayoutManager, NSTextContainer and NSTextStorage let layoutManager = NSLayoutManager() let textContainer = NSTextContainer(size: CGSize.zero) let textStorage = NSTextStorage(attributedString: label.attributedText!) // Configure layoutManager and textStorage layoutManager.addTextContainer(textContainer) textStorage.addLayoutManager(layoutManager) // Configure textContainer textContainer.lineFragmentPadding = 0.0 textContainer.lineBreakMode = label.lineBreakMode textContainer.maximumNumberOfLines = label.numberOfLines let labelSize = label.bounds.size textContainer.size = labelSize // Find the tapped character location and compare it to the specified range let locationOfTouchInLabel = self.location(in: label) let textBoundingBox = layoutManager.usedRect(for: textContainer) //let textContainerOffset = CGPointMake((labelSize.width - textBoundingBox.size.width) * 0.5 - textBoundingBox.origin.x, //(labelSize.height - textBoundingBox.size.height) * 0.5 - textBoundingBox.origin.y); let textContainerOffset = CGPoint(x: (labelSize.width - textBoundingBox.size.width) * 0.5 - textBoundingBox.origin.x, y: (labelSize.height - textBoundingBox.size.height) * 0.5 - textBoundingBox.origin.y) //let locationOfTouchInTextContainer = CGPointMake(locationOfTouchInLabel.x - textContainerOffset.x, // locationOfTouchInLabel.y - textContainerOffset.y); let locationOfTouchInTextContainer = CGPoint(x: locationOfTouchInLabel.x - textContainerOffset.x, y: locationOfTouchInLabel.y - textContainerOffset.y) let indexOfCharacter = layoutManager.characterIndex(for: locationOfTouchInTextContainer, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil) return NSLocationInRange(indexOfCharacter, targetRange) } }
Make sure to do:
lblTerms.isUserInteractionEnabled = true
Solution 2
After having several issues with this kind of stuff, using a lot of different librairies, etc... I found an interesting solution: http://samwize.com/2016/03/04/how-to-create-multiple-tappable-links-in-a-uilabel/
It's about to extend UITapGestureRegonizer and detect if the tap is in the range of the string when triggered.
Here is the updated Swift 4 version of this extension:
extension UITapGestureRecognizer {
func didTapAttributedTextInLabel(label: UILabel, inRange targetRange: NSRange) -> Bool {
// Create instances of NSLayoutManager, NSTextContainer and NSTextStorage
let layoutManager = NSLayoutManager()
let textContainer = NSTextContainer(size: CGSize.zero)
let textStorage = NSTextStorage(attributedString: label.attributedText!)
// Configure layoutManager and textStorage
layoutManager.addTextContainer(textContainer)
textStorage.addLayoutManager(layoutManager)
// Configure textContainer
textContainer.lineFragmentPadding = 0.0
textContainer.lineBreakMode = label.lineBreakMode
textContainer.maximumNumberOfLines = label.numberOfLines
let labelSize = label.bounds.size
textContainer.size = labelSize
// Find the tapped character location and compare it to the specified range
let locationOfTouchInLabel = self.location(in: label)
let textBoundingBox = layoutManager.usedRect(for: textContainer)
let textContainerOffset = CGPoint(x: (labelSize.width - textBoundingBox.size.width) * 0.5 - textBoundingBox.origin.x, y: (labelSize.height - textBoundingBox.size.height) * 0.5 - textBoundingBox.origin.y)
let locationOfTouchInTextContainer = CGPoint(x: locationOfTouchInLabel.x - textContainerOffset.x, y: locationOfTouchInLabel.y - textContainerOffset.y)
let indexOfCharacter = layoutManager.characterIndex(for: locationOfTouchInTextContainer, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
return NSLocationInRange(indexOfCharacter, targetRange)
}
}
To simplify range conversion, you also need this Range extension
extension Range where Bound == String.Index {
var nsRange:NSRange {
return NSRange(location: self.lowerBound.encodedOffset,
length: self.upperBound.encodedOffset -
self.lowerBound.encodedOffset)
}
}
Once you have this extension, you can add a tap gesture to your label:
let tap = UITapGestureRecognizer(target: self, action: #selector(tapLabel(tap:)))
self.yourLabel.addGestureRecognizer(tap)
self.yourLabel.isUserInteractionEnabled = true
Here is the function to handle the tap:
@objc func tapLabel(tap: UITapGestureRecognizer) {
guard let range = self.yourLabel.text?.range(of: "Substring to detect")?.nsRange else {
return
}
if tap.didTapAttributedTextInLabel(label: self.yourLabel, inRange: range) {
// Substring tapped
}
}
Solution 3
To enable multiline tappable & don't want to subclass the UILabel then:
- Write Extension function for UITapGestureRecognizer
extension UITapGestureRecognizer {
func didTapAttributedTextInLabel(label: UILabel, inRange targetRange: NSRange) -> Bool {
guard let attributedText = label.attributedText else { return false }
let mutableStr = NSMutableAttributedString.init(attributedString: attributedText)
mutableStr.addAttributes([NSAttributedString.Key.font : label.font!], range: NSRange.init(location: 0, length: attributedText.length))
// If the label have text alignment. Delete this code if label have a default (left) aligment. Possible to add the attribute in previous adding.
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
mutableStr.addAttributes([NSAttributedString.Key.paragraphStyle : paragraphStyle], range: NSRange(location: 0, length: attributedText.length))
// Create instances of NSLayoutManager, NSTextContainer and NSTextStorage
let layoutManager = NSLayoutManager()
let textContainer = NSTextContainer(size: CGSize.zero)
let textStorage = NSTextStorage(attributedString: mutableStr)
// Configure layoutManager and textStorage
layoutManager.addTextContainer(textContainer)
textStorage.addLayoutManager(layoutManager)
// Configure textContainer
textContainer.lineFragmentPadding = 0.0
textContainer.lineBreakMode = label.lineBreakMode
textContainer.maximumNumberOfLines = label.numberOfLines
let labelSize = label.bounds.size
textContainer.size = labelSize
// Find the tapped character location and compare it to the specified range
let locationOfTouchInLabel = self.location(in: label)
let textBoundingBox = layoutManager.usedRect(for: textContainer)
let textContainerOffset = CGPoint(x: (labelSize.width - textBoundingBox.size.width) * 0.5 - textBoundingBox.origin.x,
y: (labelSize.height - textBoundingBox.size.height) * 0.5 - textBoundingBox.origin.y);
let locationOfTouchInTextContainer = CGPoint(x: locationOfTouchInLabel.x - textContainerOffset.x,
y: locationOfTouchInLabel.y - textContainerOffset.y);
let indexOfCharacter = layoutManager.characterIndex(for: locationOfTouchInTextContainer, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
return NSLocationInRange(indexOfCharacter, targetRange)
}
}
- Configure your UILable
label.text = "For any type of query please call us on +9186XXX-XXXXX or mail us at [email protected]"
label.isUserInteractionEnabled = true
label.lineBreakMode = .byWordWrapping
let tapGesture = UITapGestureRecognizer.init(target: self, action: #selector(tappedOnLabel(_:)))
tapGesture.numberOfTouchesRequired = 1
label.addGestureRecognizer(tapGesture)
- Add the gesture recogniser selector function:
@objc func tappedOnLabel(_ gesture: UITapGestureRecognizer) {
guard let text = label.text else { return }
let numberRange = (text as NSString).range(of: "+9186XXX-XXXXX")
let emailRange = (text as NSString).range(of: "[email protected]")
if gesture.didTapAttributedTextInLabel(label: self.label, inRange: numberRange) {
print("number tapped")
} else if gesture.didTapAttributedTextInLabel(label: self.label, inRange: emailRange) {
print("Email tapped")
}
}
Solution 4
This is a real easy alternative for anyone who is willing to use a textView. I realize this question is about a UILabel but if you read the comments on some of the answers they don't work for some people and some of them are very code heavy which isn't very good for beginners. You can do this in 11 simple steps if your willing to swap out a UILabel for a UITextView.
You can use NSMutableAttributedString
and a UITextView
. The UITextView has a delegate method: func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange) -> Bool { ... }
. Once you set the part of the string that you want to make tappable the delegate method will activate it.
The 11 steps are listed below in the comments above each piece of code.
// 1st **BE SURE TO INCLUDE** UITextViewDelegate to the view controller's class
class VewController: UIViewController, UITextViewDelegate {
// 2nd use a programmatic textView or use the textView from your storyboard
lazy var yourTextView: UITextView = {
let textView = UITextView()
textView.textAlignment = .center
textView.isEditable = false
textView.showsVerticalScrollIndicator = false
// *** If your text is only 1 line then uncomment these out ***
/*
textView.isScrollEnabled = false
textView.sizeToFit()
*/
return textView
}()
override func viewDidLoad() {
super.viewDidLoad()
// 3rd in viewDidLoad set the textView's delegate
yourTextView.delegate = self
// 4th create the first piece of the string you don't want to be tappable
let regularText = NSMutableAttributedString(string: "any text ", attributes: [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 17), NSAttributedStringKey.foregroundColor: UIColor.black])
// 5th create the second part of the string that you do want to be tappable. I used a blue color just so it can stand out.
let tappableText = NSMutableAttributedString(string: "READ MORE")
tappableText.addAttribute(NSAttributedString.Key.font, value: UIFont.systemFont(ofSize: 17), range: NSMakeRange(0, tappableText.length))
tappableText.addAttribute(NSAttributedString.Key.foregroundColor, value: UIColor.blue, range: NSMakeRange(0, tappableText.length))
// 6th this ISN'T NECESSARY but this is how you add an underline to the tappable part. I also used a blue color so it can match the tappableText and set the value to 1 for the line height. The length of the underline is based on the tappableText's length using NSMakeRange(0, tappableText.length)
tappableText.addAttribute(NSAttributedString.Key.underlineStyle, value: 1, range: NSMakeRange(0, tappableText.length))
tappableText.addAttribute(NSAttributedString.Key.underlineColor, value: UIColor.blue, range: NSMakeRange(0, tappableText.length))
// 7th this is the important part that connects the tappable link to the delegate method in step 11
// use NSAttributedString.Key.link and the value "makeMeTappable" to link the NSAttributedString.Key.link to the method. FYI "makeMeTappable" is a name I choose for clarity, you can use anything like "anythingYouCanThinkOf"
tappableText.addAttribute(NSAttributedString.Key.link, value: "makeMeTappable", range: NSMakeRange(0, tappableText.length))
// 8th *** important append the tappableText to the regularText ***
regularText.append(tappableText)
// 9th set the regularText to the textView's attributedText property
yourTextView.attributedText = regularText
// *** If your text is only 1 line and you are using a PROGRAMMATIC textView you will need to set the height like so (or whichever method you use). If the textView is in storyboard then set the height there ***
/*
let height = yourTextView.intrinsicContentSize.height
yourTextView.heightAnchor.constraint(equalToConstant: height).isActive = true
*/
}
// 10th add the textView's delegate method that activates urls. Make sure to return false for the tappable part
func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange) -> Bool {
// 11th use the value from the 7th step to trigger the url inside this method
if URL.absoluteString == "makeMeTappable" {
// in this situation I'm using the tappableText to present a view controller but it can be used for whatever you trying to do
let someVC = SomeController()
let navVC = UINavigationController(rootViewController: someVC)
present(navVC, animated: true, completion: nil)
return false // *** IMPORTANT return false for this to actually work ***
}
return true
}
}
Solution 5
For multi-line labels you have to set the textStorage font or the incorrect range will be returned
guard let attributedString = self.attributedText else { return }
let mutableAttribString = NSMutableAttributedString(attributedString: attributedString)
mutableAttribString.addAttributes([NSAttributedString.Key.font: myFont], range: NSRange(location: 0, length: attributedString.length))
let textStorage = NSTextStorage(attributedString: mutableAttribString)
There are a lot of answers to this question. However, there are many people complaining that the tap fails for multi-line labels and that is correct for most answers on this page. The incorrect range for the tap is returned because the textStorage
doesn't have the correct font.
let textStorage = NSTextStorage(attributedString: label.attributedText!)
You can fix this quickly by adding the correct font to your textStorage
instance:
guard let attributedString = self.attributedText else { return -1 }
let mutableAttribString = NSMutableAttributedString(attributedString: attributedString)
mutableAttribString.addAttributes([NSAttributedString.Key.font: myFont], range: NSRange(location: 0, length: attributedString.length))
let textStorage = NSTextStorage(attributedString: mutableAttribString)
Putting it all together you get something like this:
protocol AtMentionsLabelTapDelegate: class {
func labelWasTappedForUsername(_ username: String)
}
class AtMentionsLabel: UILabel {
private var tapGesture: UITapGestureRecognizer = UITapGestureRecognizer()
weak var tapDelegate: AtMentionsLabelTapDelegate?
var mentions: [String] = [] // usernames to style
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() {
isUserInteractionEnabled = true
lineBreakMode = .byWordWrapping
tapGesture = UITapGestureRecognizer()
tapGesture.addTarget(self, action: #selector(handleLabelTap(recognizer:)))
tapGesture.numberOfTapsRequired = 1
tapGesture.isEnabled = true
addGestureRecognizer(tapGesture)
}
@objc func handleLabelTap(recognizer: UITapGestureRecognizer) {
let tapLocation = recognizer.location(in: self)
let tapIndex = indexOfAttributedTextCharacterAtPoint(point: tapLocation)
for username in mentions {
if let ranges = self.attributedText?.rangesOf(subString: username) {
for range in ranges {
if tapIndex > range.location && tapIndex < range.location + range.length {
tapDelegate?.labelWasTappedForUsername(username)
return
}
}
}
}
}
func indexOfAttributedTextCharacterAtPoint(point: CGPoint) -> Int {
guard let attributedString = self.attributedText else { return -1 }
let mutableAttribString = NSMutableAttributedString(attributedString: attributedString)
// Add font so the correct range is returned for multi-line labels
mutableAttribString.addAttributes([NSAttributedString.Key.font: font], range: NSRange(location: 0, length: attributedString.length))
let textStorage = NSTextStorage(attributedString: mutableAttribString)
let layoutManager = NSLayoutManager()
textStorage.addLayoutManager(layoutManager)
let textContainer = NSTextContainer(size: frame.size)
textContainer.lineFragmentPadding = 0
textContainer.maximumNumberOfLines = numberOfLines
textContainer.lineBreakMode = lineBreakMode
layoutManager.addTextContainer(textContainer)
let index = layoutManager.characterIndex(for: point, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
return index
}
}
extension NSAttributedString {
func rangesOf(subString: String) -> [NSRange] {
var nsRanges: [NSRange] = []
let ranges = string.ranges(of: subString, options: .caseInsensitive, locale: nil)
for range in ranges {
nsRanges.append(range.nsRange)
}
return nsRanges
}
}
extension String {
func ranges(of substring: String, options: CompareOptions = [], locale: Locale? = nil) -> [Range<Index>] {
var ranges: [Range<Index>] = []
while let range = self.range(of: substring, options: options, range: (ranges.last?.upperBound ?? self.startIndex) ..< self.endIndex, locale: locale) {
ranges.append(range)
}
return ranges
}
}
Related videos on Youtube
Ashley
Updated on May 07, 2022Comments
-
Ashley about 2 years
I have a problem that
boundingRectForGlyphRange
always returnsCGRect.zero
"0.0, 0.0, 0.0, 0.0".For example, I am coding for touching on a part of text of
UILabel
feature. My text has first part is any text and second one is READ MORE.I want the tap recognizer only work when I touch READ MORE. If I touch on any point on
UILabel
,CGRectContainsPoint
always returntrue
, then the action called.Here my code:
override func viewDidLoad() { super.viewDidLoad() // The full string let firstPart:NSMutableAttributedString = NSMutableAttributedString(string: "Lorem ipsum dolor set amit ", attributes: [NSFontAttributeName: UIFont.systemFontOfSize(13)]) firstPart.addAttribute(NSForegroundColorAttributeName, value: UIColor.blackColor(), range: NSRange(location: 0, length: firstPart.length)) info.appendAttributedString(firstPart) // The "Read More" string that should be touchable let secondPart:NSMutableAttributedString = NSMutableAttributedString(string: "READ MORE", attributes: [NSFontAttributeName: UIFont.systemFontOfSize(14)]) secondPart.addAttribute(NSForegroundColorAttributeName, value: UIColor.blackColor(), range: NSRange(location: 0, length: secondPart.length)) info.appendAttributedString(secondPart) lblTest.attributedText = info // Store range of chars we want to detect touches for moreStringRange = NSMakeRange(firstPart.length, secondPart.length) print("moreStringRange\(moreStringRange)") tapRec.addTarget(self, action: "didTap:") lblTest.addGestureRecognizer(tapRec) } func didTap(sender:AnyObject) { // Storage class stores the string, obviously let textStorage:NSTextStorage = NSTextStorage(attributedString: info) // The storage class owns a layout manager let layoutManager:NSLayoutManager = NSLayoutManager() textStorage.addLayoutManager(layoutManager) // Layout manager owns a container which basically // defines the bounds the text should be contained in let textContainer:NSTextContainer = NSTextContainer(size: lblTest.frame.size) textContainer.lineFragmentPadding = 0 textContainer.lineBreakMode = lblTest.lineBreakMode // Begin computation of actual frame // Glyph is the final display representation var glyphRange = NSRange() // Extract the glyph range layoutManager.characterRangeForGlyphRange(moreStringRange!, actualGlyphRange: &glyphRange) // Compute the rect of glyph in the text container print("glyphRange\(glyphRange)") print("textContainer\(textContainer)") let glyphRect:CGRect = layoutManager.boundingRectForGlyphRange(glyphRange, inTextContainer: textContainer) // Final rect relative to the textLabel. print("\(glyphRect)") // Now figure out if the touch point is inside our rect let touchPoint:CGPoint = tapRec.locationOfTouch(0, inView: lblTest) if CGRectContainsPoint(glyphRect, touchPoint) { print("User tapped on Read More. So show something more") } } }
-
Muzahid about 8 yearsHope this will help you read more
-
koen about 8 yearsHow about using two labels?
-
Ashley about 8 years@Koen: It is just a demo. My text has many parts with attachments. I can't use many label.
-
Ashley about 8 years@Md.MuzahidulIslam: As I said, it is just a demo, "read more" (may be something else) may not in the end of string.
-
Muzahid about 8 yearsThen check one stackoverflow.com/questions/32175144/…
-
Ashley about 8 years@Md.MuzahidulIslam. Please check the image. image to understand.
-
koen about 8 yearsAnother possible way to do this: stackoverflow.com/questions/20541676/…
-
-
Photon Point about 7 yearsThank you. This is really helpful. In multiline text, at the bottom line isn't tapped when we implement this extension. Besides, We try
let textContainer = NSTextContainer(size: CGSize(width: (self.label?.frame.width)!, height: (self.label.frame.height)+100))
but no chance. -
brigadir over 6 yearsGood approach. But it doesn't deal with non-left aligned text (ex. center or right). Looks like there is no way to pass alignment from
UILabel
toNSTextContainer
-
Bijender Singh Shekhawat almost 6 yearswhere is the label?
-
Bijender Singh Shekhawat almost 6 yearssame not working for me also. I think that answer for only one line label not for the multiline label.
-
Basheer almost 6 yearsFor Multi-line text, set your label line break mode to "Truncate tail".
-
IKKA over 5 yearsNot getting touch on UITableViewCell custom label text
-
davut dev about 5 yearstry this
self.yourLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(tapLabel(tap:))))
it will work. -
ductran almost 5 years@llesh do you have any idea about multiple subtexts? For example, I have the text like this: "Hello world! hello". Is there any way to detect tap on the 2nd word "hello"?
-
sacred0x01 over 4 yearsYou save my day, dude! The only one correct answer with very important font addition. Thank)
-
Rajasekhar Pasupuleti about 4 yearsIncreasing height of 5 pixel of UILabel is allowing me to detect text in last line.
-
Pierluigi Cifani about 4 yearsNo idea why setting the label's font to the attributedString fixes this, but it does. Thanks a log @DoesData! Saved my day
-
Andrew about 4 yearsshould also add alignment (label.textAlignment) to attributed string for proper working (i.e. centered text) like in stackoverflow.com/a/40946288/1619680
-
Joseph Astrahan about 4 yearsFor some reason for me, the tapping works but it's off by a considerable amount of pixels (like about 10 or 20 in my case). Any ideas why this might be?
-
Joseph Astrahan about 4 yearsI have multiline text with special unicode characters
-
Joseph Astrahan about 4 yearshere is the data for my gesuture variables, LabelSize= (315.0, 43.0) LocationOfTouchInLabel= (235.0, 25.5) TextBoundingBox= (64.8134765625, 0.0, 185.373046875, 13.8) LocationOfTouchInTextContainer (235.0, 10.9) IndexOfCharacter= 32 TargetRange= {28, 5}
-
Ramesh Kumar about 4 yearsYes.. really great!! I spend around 3 hours..finally this solution helped me a lot!!
-
Amin almost 4 yearsOverriding the
shouldInteractWith
is such a goddamn beautiful solution, thank you for this. Most every other solution involves determining the physical location of a tap on a piece of text. -
Chintan Shah over 3 years@JosephAstrahan I'm facing similar issue in multi-language. Have you found any solution for this?
-
Joseph Astrahan over 3 years@chintan Shah Unfortunately I have not... please share if you find a solution though. I found some work arounds... but I'm not sure they are worth sharing.
-
KSR over 3 yearsGood answer. Thanks @LanceSamaria
-
Danny Buonocore about 3 yearsThis should be the accepted answer. Thanks, I was stuck on this for days!
-
mig_loren almost 3 yearsThis works like a charm! Thank you ☑️🙌 Also a more updated implementation of
nsRange
computed property can be found here and works perfectly as this example below.for range in ranges { nsRanges.append(range.nsRange(in: subString)) }
Find it here: stackoverflow.com/questions/43233070/… -
אורי orihpt almost 3 years@Amin is so right! Thank you for this great answer.
-
Asif Bilal over 2 years@JosephAstrahan, I am facing this issue. Did you able to find out some workaround?
-
Pravin Parmar about 2 yearsGreats Work & thanks you . Easy Developer Step by step