How to customize UILabel clickable

Question

What I want:

In an iPhone app, I'd like to show information in a tableView. In each cell, the text is like: John recently listen to music abcdefg.mp3. and if needed, the text can have two lines.

In the text, a.mp3 should be clickable so when the user touches the abcdefg.mp3 part, another page will be invoked. When user touches abcdefg.mp3, it will also have some effects, just like touching a button.

What I do:

I calculate the frame of the text, and I use a UIButton for abcdefg.mp3.

My Problem:

Sometimes abcdefg.mp3 may be in multiline, like:

abc is at the end of the first line

defg.mp3 is in second line.

What should I do in this case?

I've already searched about: Create tap-able "links" in the NSAttributedString of a UILabel? However I think it is not suitable here as the clickable text is all in one line in the sample.

Solution 1

The most simple way is to just add a gesture recognizer to the actual view (be it a UILabel or some custom view of your own). In order for the gesture recognizer to work, the view must be set userInteractionEnabled.

Here's an example, assuming that your label view (or whatever it is) is called labelView:

UITapGestureRecognizer* gesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(userTappedOnLink:)];
// if labelView is not set userInteractionEnabled, you must do so
[labelView setUserInteractionEnabled:YES];
[labelView addGestureRecognizer:gesture];

In this example, an action message will be sent to self and the message would be defined as

- (void)userTappedOnLink:(UIGestureRecognizer*)gestureRecognizer;

This works the same as wiring up any other UIControl subclass, such as a button.

Other notes: don't try to add the same gesture recognizer to multiple views, it won't work. Don't add more than one copy of the gesture recognizer to multiple views (it doesn't replace them, it just stacks them up and wastes memory). You should add the gesture recognizer when you initially create and configure your view.

For more information, see the documentation for UIGestureRecognizer.

Solution 2

Swift 4.2 Version:

var labelView = UILabel()
let gesture = UITapGestureRecognizer(target: self, action: #selector(userTappedOnLink))
// if labelView is not set userInteractionEnabled, you must do so
labelView.isUserInteractionEnabled = true
labelView.addGestureRecognizer(gesture)


@objc func userTappedOnLink() {
    print("clicked!")
}

Solution 3

Swift 2.0 version:

  func userTappedOnLink() {
    print("clicked!")
  }

///tap and link to FB page
let gesture = UITapGestureRecognizer(target: self, action: "userTappedOnLink")
// if labelView is not set userInteractionEnabled, you must do so
lblStaff.userInteractionEnabled = true
lblStaff.addGestureRecognizer(gesture)

Solution 4

Sounds similar to what they accomplished in Twitteriffic with Fancy UILabels. Basically, Craig Hockenberry made his own custom "data detector", so that he could insert links within labels and multi-line text. See this question: Is there a way to create custom UIDataDetectorTypes?

Solution 5

You could also just put an "invisible Button" above, by using a custom button without text and images.

View more solutions

Comments

[scorpiozj]

thanks~however, I think it is complicated if the clickable area is in two lines.

[Jason Coco]

@scorpiozj: Nope, not as long as it's all part of the same view.

[scorpiozj]

I tried FancyLabel, but I think it failed when the clickable part is in multiline. thanks all the same

[scorpiozj]

@Jason:I also want there will be some effect when user touches the clickable part. if there is line-break in the clickable part, it is not easy to handle it, is it? Or can you explain a little more? thanks.

[Jason Coco]

@scorpiozj: I guess I don't fully understand what you mean by 'line-break'. When you have a line-break, do you write the second line in a totally separate view? Can you post a screen shot?

[scorpiozj]

@Jason: your solution is easy to some extent. But I met another one: I separate the text"John recently listen to music abcdefg.mp3" into two:"John recently listen to music" and "abcdefg.mp3". if "abcdefg.mp3" must be shown in two-line, how can I use one control to hold it so that it can add a gestureRecognizer?

[scorpiozj]

@jason: OK~ it just like below: John recently listen to music i-like -sun.mp3 so it is not in a whole line, and the text "i-like-sun.mp3" should be clickable.

[Jason Coco]

@scorpiozj: Well, if you need that functionality and you're laying out these views yourself, simply add another UIGestureRecognizer instance to your second-line view that has the same target. So, if the user hits either bit, she will create the same action message.

[Mike Lambert]

This is not valid Swift code, looks like you forgot some bits in your attempt to convert the above Objective C code.

[Ted Hopp]

In Swift 3, userInteractionEnabled has been renamed isUserInteractionEnabled .

[Mazz]

Please explain this

[lucius degeer]

What about when the gesture recognizer is in a custom label within a tableview cell? In my case this breaks tableview scrolling. I have tried tapGesture.cancelsTouchesInView = false but it doesn't fix tableview scrolling. Any suggestions?