Turn some parts of UILabel to act like a UIButton?

Question

I have an attributed string UILabel, I was able to color some parts of the text

let text = "Why did \(event) give \(event2) a 5 stars review? Details here. "
let linkTextWithColor = "Why did"
let range = (text as NSString).rangeOfString(linkTextWithColor)

let attributedString = NSMutableAttributedString(string:text)
attributedString.addAttribute(NSForegroundColorAttributeName, value: UIColor.blackColor() , range: range)

labelEvent.attributedText = attributedString

Now I want to make some parts of the text tappable, like a UIButton, how to do this ?

Example 1

Example 2

I need to have blue text to be responding to touch, and to run a specific function, like a UIButton. help is really appreciated, thanks.

Here is a link to a couple solutions, I didn't want to take credit :) http://stackoverflow.com/questions/20541676/ios-uitextview-or-uilabel-with-clickable-links-to-actions — Olivier Wilkinson, Jun 21 '16 at 11:18
http://stackoverflow.com/questions/21629784/make-a-clickable-link-in-an-nsattributedstring-for-a-uitextfield-or-uilabel — Abhay Singh Naurang, Jun 21 '16 at 11:21
http://stackoverflow.com/questions/1256887/create-tap-able-links-in-the-nsattributedtext-of-a-uilabel look at once — Pushp, Jun 21 '16 at 11:35

score 15 · Answer 1 · edited Jan 06 '19 at 01:53

What you want to do is use an attributed string with a text view to make a link that will act as a button.

let attributedString = NSMutableAttributedString(string: "Some string with link", attributes: [<attributes>])

Then set a part of it as a link, and customize it's appearance using the linkAttributes property of the Text View. Because this is a button and not an actual link we just put a dummy url in for the link so we can handle it in our delegate later.

attributedString.setSubstringAsLink(substring: "link", linkURL: "CUSTOM://WHATEVER")
let linkAttributes: [String : AnyObject] = [NSForegroundColorAttributeName : .redColor(), NSUnderlineColorAttributeName : .redColor(), NSUnderlineStyleAttributeName : NSUnderlineStyle.StyleSingle.rawValue]
textView.linkTextAttributes = linkAttributes
textView.attributedText = attributedString
textView.selectable = true
textView.editable = false
textView.userInteractionEnabled = true

Finally in text view delegate we will check for the scheme and perform some action.

func textView(textView: UITextView, shouldInteractWithURL URL: NSURL, inRange characterRange: NSRange) -> Bool {
    if URL.scheme == "CUSTOM" {
       // Do your button actions here
    }
    return true
}

Extension for setSubstringAsLink:

extension NSMutableAttributedString {
    // Set part of string as URL
    public func setSubstringAsLink(substring substring: String, linkURL: String) -> Bool {
        let range = self.mutableString.rangeOfString(substring)
        if range.location != NSNotFound {
            self.addAttribute(NSLinkAttributeName, value: linkURL, range: range)
            return true
        }
        return false
    }
}

setSubstringAsLink doesn't exist in whole ios library, this is weird, anybody tried this? — DeyaEldeen, Jun 30 '16 at 08:58
also, this will require a long tap, which is not good for all cases :( — DeyaEldeen, Jun 30 '16 at 11:00
Edited with an extension for setting the substring. It does not require a long press. — Max, Jun 30 '16 at 12:41
I'm getting "Result of call to 'setSubstringAsLink(substring:linkURL:) is unused and therefor shouldInteractWithURL is not being fired. — Felecia Genet, Jul 25 '17 at 21:59
This has some side effects. When the link is long pressed it show link text over UITextView which seems to be a UIKit native feature. — Bigair, May 31 '20 at 06:47

Code · Answer 2 · 2016-06-30T11:43:52.137

Let's say you have a UILabel with text "abc123", and you want "abc" to function as a UIButton.

Calculate and store the rectangle that contains "abc".
Add a UITapGestureRecognizer to the UILabel.
When the UILabelis tapped, check if the tap is within the rectangle.

static func getRect(str: NSAttributedString, range: NSRange, maxWidth: CGFloat) -> CGRect {
    let textStorage = NSTextStorage(attributedString: str)
    let textContainer = NSTextContainer(size: CGSize(width: maxWidth, height: CGFloat.max))
    let layoutManager = NSLayoutManager()       
    layoutManager.addTextContainer(textContainer)
    textStorage.addLayoutManager(layoutManager)     
    textContainer.lineFragmentPadding = 0       
    let pointer = UnsafeMutablePointer<NSRange>.alloc(1)
    layoutManager.characterRangeForGlyphRange(range, actualGlyphRange: pointer)     
    return layoutManager.boundingRectForGlyphRange(pointer.move(), inTextContainer: textContainer)
}

let rect1 = getRect(label.attributedText!, range: NSMakeRange(0, 3), maxWidth: label.frame.width)

label.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(MyClass.tappedLabel(_:))))

func tappedLabel(sender: UITapGestureRecognizer) {
    if rect1.contains(sender.locationInView(sender.view)) {
        // ...
    }
}

the calculations are off, it only recognizes above the wanted letters ! — DeyaEldeen, Jun 30 '16 at 11:25
@DeyaEldeen Works fine for me. You probably did something wrong. — Code, Jun 30 '16 at 11:52

AdamM · Accepted Answer · 2016-06-30T13:33:50.803

9

I recommend you try this library out

https://github.com/null09264/FRHyperLabel

Great library, easy to use and has few built in examples for you to try out. Examples are in both Objective-c and Swift

Example in Swift

 let str = "This is a random bit of text"
        let attributes = [NSForegroundColorAttributeName: UIColor.blackColor(),
                          NSFontAttributeName: UIFont.systemFontOfSize(15)]
        confirmLabel.attributedText = NSAttributedString(string: str, attributes: attributes)

        let handler = {
            (hyperLabel: FRHyperLabel!, substring: String!) -> Void in

            //action here
        }
        //Step 3: Add link substrings
        confirmLabel.setLinksForSubstrings(["random"], withLinkHandler: handler)

Edit:

If you want to get rid of the underline, best way to do this is to follow the advice that DeyaEldeen gave in the comment.

If you go to the .m file of FRHyperLabel, go to this method

- (void)checkInitialization {
    if (!self.handlerDictionary) {
        self.handlerDictionary = [NSMutableDictionary new];
    }

    if (!self.userInteractionEnabled) {
        self.userInteractionEnabled = YES;
    }

    if (!self.linkAttributeDefault) {
        self.linkAttributeDefault = @{NSForegroundColorAttributeName: FRHyperLabelLinkColorDefault,
                                      NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle)};
    }

    if (!self.linkAttributeHighlight) {
        self.linkAttributeHighlight = @{NSForegroundColorAttributeName: FRHyperLabelLinkColorHighlight,
                                        NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle)};
    }
}

And you can just remove this

NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle)

from the attributes

edited Jun 30 '16 at 13:33

answered Jun 23 '16 at 12:45

AdamM

4,400
5
49
95

1

Why was this downvoted? This library does exactly what the OP asks, I have used this in my projects and it works great – AdamM Jun 23 '16 at 14:33
3

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/12789471) – Swift Sharp Jun 23 '16 at 14:38
Answer updated with example – AdamM Jun 23 '16 at 14:44
This is the best answer, but how do I change the style of the linked parts of the label ? for example I don't want it underlined. – DeyaEldeen Jun 30 '16 at 11:55
1

to remove underline, just comment lines in FRHyperLabel like this /*NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle)*/ – DeyaEldeen Jun 30 '16 at 12:05
this doesn't work for swift 3 – caldera.sac Nov 10 '16 at 06:02
tap is not working on bottom line(swift 3) – Mawoon Apr 17 '17 at 13:28
This particular pod is out of date. Would love to know any other alternatives. – Karthik Kannan Jan 25 '18 at 12:53
This label not working in swift 4. Any update of thid label ? – Birju Feb 08 '18 at 12:42

score 3 · Answer 4 · answered Jun 29 '16 at 08:46

The idea is to use library such as TTTAttributedLabel and using it this way :

Consider the following string "I want to be touchable here" where here will perform a segue on touch.

Create TTTAttributedLabel (UILabel subclass), and put text content in it, as if it was a UILabel. Set its delegate to self. Then, add a link to a word this way :

Objective C

NSRange rangeWord = [attributedLabel.text rangeOfString:@"here"];
[attributedLabel addLinkToURL:[NSURL URLWithString:@"anActionOnClickHere"] withRange:rangeUser];

Swift

NSRange rangeWord = attributedLabel.text.rangeOfString("here")
attributedLabel.addLinkToURL(NSURL(string: "anActionOnClickHere"), withRange:rangeUser)

On clicking words it will call this method in which you can handle the click :

Objective C

- (void)attributedLabel:(__unused TTTAttributedLabel *)label
   didSelectLinkWithURL:(NSURL *)url {
    NSString *urlToString = [url absoluteString];

    if ([urlToString containsString:@"anActionOnClickHere"]) { //perform segue for example
        [self performSegueWithIdentifier:@"hereSegue" sender:self];
    }
}

Swift

func attributedLabel(label: TTTAttributedLabel!, didSelectLinkWithURL url: NSURL!) {
    NSString *urlToString = url.absoluteString()
    if (urlToString.containsString("anActionOnClickHere")) { //perform segue for example 
        self.performSegueWithIdentifier("hereSegue",sender:self)
    } 
}

With the default link style, you'll get the blue color that you're looking for.

Turn some parts of UILabel to act like a UIButton?

4 Answers4

Linked