Create tap-able links in the NSAttributedString of a UILabel

Creating interactive and dynamic user interfaces is crucial for modern app development. One common requirement is embedding tappable links within a UILabel’s text. This functionality allows developers to seamlessly integrate URLs, email addresses, or other actionable elements directly within displayed text, enhancing user experience and providing direct access to relevant information. This post will explore how to create these tappable “links” within an NSAttributedString, offering a step-by-step guide and practical examples to empower you to implement this feature effectively.

Understanding NSAttributedString

NSAttributedString is a powerful class that allows developers to go beyond plain text, enabling the application of various attributes like font, color, and kerning to specific ranges of characters within a string. This flexibility extends to creating interactive elements, including tappable links. By utilizing specific attributes, we can transform sections of text into actionable links, providing a seamless user experience.

The key to creating tappable links lies in leveraging the NSLinkAttributeName attribute. This attribute allows us to associate a URL or other link data with a specific range of characters in the attributed string. When the user taps on this linked text, the system can then open the associated URL in a web browser, initiate an email, or perform other actions.

This capability is essential for displaying rich text content within your app, such as formatted articles, interactive messages, or dynamic user profiles. It eliminates the need for separate buttons or controls for links, creating a more integrated and aesthetically pleasing user interface.

Implementing Tappable Links

Let’s dive into the practical implementation. Here’s how you can create an NSAttributedString with tappable links in Swift:

1. Create a mutable attributed string with your text.
2. Define the range of text you want to make tappable.
3. Create a URL object with the desired link destination.
4. Use NSMutableAttributedString.addAttribute(_:value:range:) to add the NSLinkAttributeName with the URL as the value, applying it to the specified range.
5. Set the attributed string to your UILabel’s attributedText property.

Here’s a Swift code example:

let attributedString = NSMutableAttributedString(string: "Visit our website: courthousezoological.com") let linkRange = (attributedString.string as NSString).range(of: "courthousezoological.com") let url = URL(string: "https://courthousezoological.com/n7sqp6kh?key=e6dd02bc5dbf461b97a9da08df84d31c")! attributedString.addAttribute(.link, value: url, range: linkRange) yourLabel.attributedText = attributedStringHandling Link Taps with UITapGestureRecognizer

While setting the NSLinkAttributeName creates the visual appearance of a link, it doesn’t automatically handle the tap action. For this, we need a UITapGestureRecognizer.

Add a tap gesture recognizer to your UILabel, and in its action method, check if the tapped location corresponds to a link within the attributed string. You can use the UITextView.characterIndex(at:) method (using a dummy UITextView with the same attributed text) to find the character index and then check for the NSLinkAttributeName at that index.

This approach offers fine-grained control over link handling, allowing you to perform custom actions or even handle different types of links differently within a single UILabel.

Advanced Customization and Styling

Beyond basic functionality, you can further customize the appearance of your tappable links. Use attributes like NSForegroundColorAttributeName and NSUnderlineStyleAttributeName to change the link color and add underlines. This level of control allows you to seamlessly integrate links into your app’s overall design.

• Customize link colors to match your brand.
• Add underlines for improved visibility.

For example, to change the link color to blue:

attributedString.addAttribute(.foregroundColor, value: UIColor.blue, range: linkRange)Best Practices and Considerations

When implementing tappable links, consider these best practices:

• Clearly indicate tappable elements: Use visual cues like underlines or distinct colors.
• Handle link taps gracefully: Provide appropriate feedback to the user, such as opening the link in a new tab or displaying a loading indicator.

Featured Snippet: To create a tappable link in a UILabel using an NSAttributedString, combine the NSLinkAttributeName with a UITapGestureRecognizer to handle user interaction.

[Infographic illustrating the process of creating and handling tappable links]

By understanding the intricacies of NSAttributedString and gesture recognizers, you can significantly enhance the usability and interactivity of your app’s text content. This powerful combination empowers you to create rich, engaging interfaces that seamlessly blend information and action. Explore the provided code examples and adapt them to your specific needs, unlocking new possibilities for user interaction within your iOS applications. Check out Apple’s official documentation for a deeper dive. You can also find valuable resources on Stack Overflow and through various tutorials available online. Remember to consider accessibility and ensure your implementation caters to users with diverse needs.

FAQ

Q: Can I open different types of links (e.g., URLs, email addresses) within the same UILabel?

A: Yes, you can. By checking the URL scheme within your tap gesture recognizer’s action method, you can differentiate between different link types and handle them accordingly.

Implementing tappable links within UILabels opens up a world of possibilities for crafting dynamic and user-friendly interfaces. Whether it’s linking to external resources, navigating within your app, or triggering specific actions, this technique offers a seamless way to enhance user engagement and create a more intuitive experience. Start experimenting with these techniques today and elevate your app’s user interface to the next level.

Question & Answer :
Many applications have text and in this text are web hyperlinks in rounded rect. When I click them UIWebView opens. What puzzles me is that they often have custom links, for example if words starts with # it is also clickable and the application responds by opening another view. How can I do that? Is it possible with UILabel or do I need UITextView or something else?

In general, if we want to have a clickable link in text displayed by UILabel, we would need to resolve two independent tasks:

1. Changing the appearance of a portion of the text to look like a link
2. Detecting and handling touches on the link (opening an URL is a particular case)

The first one is easy. Starting from iOS 6 UILabel supports display of attributed strings. All you need to do is to create and configure an instance of NSMutableAttributedString:

NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@"String with a link" attributes:nil]; NSRange linkRange = NSMakeRange(14, 4); // for the word "link" in the string above NSDictionary *linkAttributes = @{ NSForegroundColorAttributeName : [UIColor colorWithRed:0.05 green:0.4 blue:0.65 alpha:1.0], NSUnderlineStyleAttributeName : @(NSUnderlineStyleSingle) }; [attributedString setAttributes:linkAttributes range:linkRange]; // Assign attributedText to UILabel label.attributedText = attributedString; 

That’s it! The code above makes UILabel to display String with a link

Now we should detect touches on this link. The idea is to catch all taps within UILabel and figure out whether the location of the tap was close enough to the link. To catch touches we can add tap gesture recognizer to the label. Make sure to enable userInteraction for the label, it’s turned off by default:

label.userInteractionEnabled = YES; [label addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapOnLabel:)]]; 

Now the most sophisticated stuff: finding out whether the tap was on where the link is displayed and not on any other portion of the label. If we had single-lined UILabel, this task could be solved relatively easy by hardcoding the area bounds where the link is displayed, but let’s solve this problem more elegantly and for general case - multiline UILabel without preliminary knowledge about the link layout.

One of the approaches is to use capabilities of Text Kit API introduced in iOS 7:

// Create instances of NSLayoutManager, NSTextContainer and NSTextStorage NSLayoutManager *layoutManager = [[NSLayoutManager alloc] init]; NSTextContainer *textContainer = [[NSTextContainer alloc] initWithSize:CGSizeZero]; NSTextStorage *textStorage = [[NSTextStorage alloc] initWithAttributedString:attributedString]; // Configure layoutManager and textStorage [layoutManager addTextContainer:textContainer]; [textStorage addLayoutManager:layoutManager]; // Configure textContainer textContainer.lineFragmentPadding = 0.0; textContainer.lineBreakMode = label.lineBreakMode; textContainer.maximumNumberOfLines = label.numberOfLines; 

Save created and configured instances of NSLayoutManager, NSTextContainer and NSTextStorage in properties in your class (most likely UIViewController’s descendant) - we’ll need them in other methods.

Now, each time the label changes its frame, update textContainer’s size:

- (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; self.textContainer.size = self.label.bounds.size; } 

And finally, detect whether the tap was exactly on the link:

- (void)handleTapOnLabel:(UITapGestureRecognizer *)tapGesture { CGPoint locationOfTouchInLabel = [tapGesture locationInView:tapGesture.view]; CGSize labelSize = tapGesture.view.bounds.size; CGRect textBoundingBox = [self.layoutManager usedRectForTextContainer:self.textContainer]; CGPoint textContainerOffset = CGPointMake((labelSize.width - textBoundingBox.size.width) * 0.5 - textBoundingBox.origin.x, (labelSize.height - textBoundingBox.size.height) * 0.5 - textBoundingBox.origin.y); CGPoint locationOfTouchInTextContainer = CGPointMake(locationOfTouchInLabel.x - textContainerOffset.x, locationOfTouchInLabel.y - textContainerOffset.y); NSInteger indexOfCharacter = [self.layoutManager characterIndexForPoint:locationOfTouchInTextContainer inTextContainer:self.textContainer fractionOfDistanceBetweenInsertionPoints:nil]; NSRange linkRange = NSMakeRange(14, 4); // it's better to save the range somewhere when it was originally used for marking link in attributed string if (NSLocationInRange(indexOfCharacter, linkRange)) { // Open an URL, or handle the tap on the link in any other way [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"https://stackoverflow.com/"]]; } }