iOS: Add Button over NSAttributedString

Question

I want to know if is possible to put a UIButton over a exactly coordinate of a piece of text.

For example, my UILabel have this text:

"Dont have an account? Sign In"

In the italic content, I need to put a button over then, the touch over this button will trigger an action that will open a Sign In View

Is very important to make this feature well, to work with same in other languages without do anything :)

Thanks

Answer 1

I'll respond my answer because this can be helpful for other developers that got the same problem.

1: You need to implement UITextViewDelegate method: - (BOOL)textView:shouldInteractWithURL:inRange:

The implementation is very simple, basically, you will compare the received link in NSURL. I like to compare by host using the NSURL components when I have many links, for example:

- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange
{
  NSString *urlScheme     = URL.scheme;
  NSString *host          = URL.host;

  if([urlScheme isEqualToString:@"myapp"])
  {
    if([host isEqualToString:@"/signin"])
      [self.onSignRequest( self )];
  }

  return YES;
}

This method will be called when user touch over link.

2: Create two NSString instances, one for the string "Don't have an account?" and another one for string "Sign Up"

NSString *labelText = @"Don't have an account? ";
NSString *linkedText = @"Sign Up";

3: Create a NSMutableAttributedString instance with both strings concated:

NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithAttributedString:[AttributedText attributedStringWithText:[NSString stringWithFormat:@"%@%@", labelText, linkedText]
                                                                                                                                          font:[UIFOnt systemFontOfSize:14.f]
                                                                                                                                         color:[UIColor blueColor]]];

4: Create a range for a linked text from the mutable attributed string created before:

NSRange range = [[attributedString  string] rangeOfString:linkedText];

5: Create an string to

5: Add a new NSLinkAttributeName for the mutable string with the range created in step 4

[attributedString addAttribute:NSLinkAttributeName value:URLStringLink range:range];

6: Add the mutable string to UILabel using attributedText property of UILabel

_label.attributedText = attributedText;

7: Set the delegate of label:

_label.delegate = textViewDelegate;

And that's it. I hope this can be helpful for anyone needs to add "touchable" links in UILabel

Cheers,

Answer 2

The easiest way would be to make them into two different labels and set the button frame to the second label's frame. The harder way would be to go through creating string sizes and manually create the CGRect for the button. That method would be something like this:

CGSize dontSize = [@"Dont have an account?" sizeWithFont:label.font];
CGSize signinSize = [@"Sign In" sizeWithFont:label.font];

//Originate to the whole label's frame
CGRect buttonFrame = label.frame;
buttonFrame.origin.x += dontSize.width;
buttonFrame.size.width = signinSize.width;

Answer 3

I've implemented something similar. You can simply add a Tap Gesture Recognizer to the View Controller in Interface Builder and link it with the label.

The Tap Gesture Recognizer has an IBAction method you can put your code in. The area of the tap gesture recognizer will automatically match the label.

You can also use Attributed Text on the label to make it appear like a link (with color and underline).

Answer 4

If you simply want to trigger an action from your italic text you should add an NSLinkAttributeNameadditionally to your NSFontAttributeName. Choose whatever you want as link, like myapp://action1.

Then use a UITextView instead of a UILabel and assign your class as delegate and implement

- (BOOL)textView:(UITextView *)textView shouldInteractWithURL:(NSURL *)URL inRange:(NSRange)characterRange

Do whatever action you want to do in there and return NO, which will prevent Safari do get started.

Answer 5

Covering part of UILabel

• Separate into 2 UILabels and then set the frame to match Sign In Label:

[button setFrame:signinLabel.frame];
[button setCenter:signinLabel.center];

OR

• Guess the coordinates until you set the (hard-coded) frame properly of UIButton

OR

• Remove "Sign In" from UILabel and make it be the title of UIButton