Create tap-able links in the NSAttributedString of a UILabel?
In general, if we want to have a clickable link in text displayed by UILabel, we would need to resolve two independent tasks:
- Changing the appearance of a portion of the text to look like a link
- 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/"]];
}
}
Turn some parts of UILabel to act like a UIButton?
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
Add a tap gesture to a part of a UILabel
I think, the best way is adding the UIGestureRecognizer
to your UILabel
and validate the frame that you would like.
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
[_yourLabel addGestureRecognizer:singleTap];
- (void)handleTap:(UITapGestureRecognizer *)tapRecognizer
{
CGPoint touchPoint = [tapRecognizer locationInView: _yourLabel];
//Modify the validFrame that you would like to enable the touch
//or get the frame from _yourLabel using the NSMutableAttributedString, if possible
CGRect validFrame = CGRectMake(0, 0, 300, 44);
if(YES == CGRectContainsPoint(validFrame, touchPoint)
{
//Handle here.
}
}
Tap Gesture on part of UILabel
You could try https://github.com/mattt/TTTAttributedLabel and add a link to the label. When the link is pressed you get a action, so part of the label click works only thing you have to would be customizing the link part of the label. I tried this in the past and it worked flawlessly but my client was not interested in using a third party component so duplicated this functionality using UIWebView and HTML.
Related Topics
iOS Autolayout: Two Buttons of Equal Width, Side by Side
Uiview Vertical Flip Animation
How to Make iPhone Vibrate Using Swift
How to Display the Default iOS 6 Share Action Sheet with Available Share Options
Ask for User Permission to Receive Uilocalnotifications in iOS 8
Xcode 8.3/Xcode 9.0 Refresh Provisioning Profile Devices
Is There a Public Way to Force Mpnowplayinginfocenter to Show Podcast Controls
Completion Handler for Uinavigationcontroller "Pushviewcontroller:Animated"
Notificationcenter Issue on Swift 3
How to Draw Border Around a Uilabel
Xcode 8/Swift 3: "Expression of Type Uiviewcontroller? Is Unused" Warning
Handling Touch Event in Uilabel and Hooking It Up to an Ibaction
How to Get the Height and Width of an Uiimage
How to Implement a Swiping/Sliding Animation Between Views
Open Link to Facebook Page from iOS App
"Your Binary Is Not Optimized for iPhone 5" (Itms-90096) When Submitting