UIButton label detect tap on specific text

Question

I have the following UIButton to render a checkbox and label;

To create this, I used a UIButton control with an NSMutableAttributedString to give "Terms & Conditions" a different style to the rest of the text.

Just like with a checkbox on a web page, I want the user to be able to tap either the grey text or the image itself to toggle the checkbox on or off.

But if the user clicks "Terms & Conditions" I want that to perform an action (e.g. load a terms URL).

This is really easy to do in Android as you can use checkbox.setMovementMethod(LinkMovementMethod.getInstance());, but in iOS I'm really struggling to find a way to basically create a checkbox with a label that contains a link.

Has anyone ever done this before and how did you approach?

This links help you. https://stackoverflow.com/questions/20541676/ios-uitextview-or-uilabel-with-clickable-links-to-actions — Aashish, Jun 06 '17 at 12:38
Do you want to click on the label or when the switch is changed? — Gregga17, Jun 06 '17 at 12:39
Just like it would work on a web page - clicking the "label" would also mark the checkbox - unless the user clicked "Terms & Conditions" which would open a link/action. — J.C, Jun 06 '17 at 12:42
You can make a tapgesture on the label and when the label is tapped you can do something. So when the label is tapped the checkbox is marked. @J.C — Gregga17, Jun 06 '17 at 12:49
The "label" in this instance is the label of the button, not a UILabel. Is there any way of doing it with UIButton only? — J.C, Jun 06 '17 at 12:50
You can make an action when the button is clicked. And when it is clicked you can do something. If the button is created programmatically you can say: button.addTarget(self, action: #selector(self.function), for: .touchUpInside). Or when it is in storyboard you can add in you file an action. @J.C — Gregga17, Jun 06 '17 at 12:54
I don't think you understand that the entire thing is a button and I need to determine when the user clicks on different areas of the button. Nevertheless, I think the only way to achieve what I want is to use a different approach as essentially buttons can only perform a single action. — J.C, Jun 06 '17 at 12:58

score 4 · Accepted Answer · answered Jun 06 '17 at 16:27

I ended up doing the following;

Created a UIButton (empty text label) for my actual checkbox and a UITextView for my adjacent checkbox label text.

I then used NSMutableAttributedString like so;

class MyViewController: UIViewController, UITextViewDelegate {

    override func viewDidLoad() {
        let attributedTermsTitle = NSMutableAttributedString()
        attributedTermsTitle.append(NSAttributedString(string: "I have read and accept the ", attributes: [NSFontAttributeName:UIFont(name: "My-Font", size: 14)!]))
        attributedTermsTitle.append(NSAttributedString(string: "Terms & Conditions", attributes: [NSFontAttributeName:UIFont(name: "My-Font", size: 14)!, NSLinkAttributeName: "terms"]))

        termsText.linkTextAttributes = [NSForegroundColorAttributeName: UIColor.blue]
        termsText.attributedText = attributedTermsTitle

        termsText.delegate = self
        termsText.isSelectable = true
        termsText.isUserInteractionEnabled = true
        termsText.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(MyViewController.toggleCheckbox)))
    }

    func toggleCheckbox(sender: UITapGestureRecognizer) {    
        termsButton.isChecked = !termsButton.isChecked
    }

    func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange) -> Bool {

        let link = URL.absoluteString
        if(link == "terms") {
             // link to the Terms web page / screen
        }

        return false
    }

}

and for the UIButton, gave the class;

class CheckBox: UIButton {
    let checkedImage = UIImage(named: "checkbox_on")! as UIImage
    let uncheckedImage = UIImage(named: "checkbox_off")! as UIImage

    var isChecked: Bool = false {
        didSet{
            if isChecked == true {
                self.setImage(checkedImage, for: UIControlState.normal)
            } else {
                self.setImage(uncheckedImage, for: UIControlState.normal)
            }
        }
    }

    override func awakeFromNib() {
        self.addTarget(self, action:#selector(buttonClicked(sender:)), for: UIControlEvents.touchUpInside)
        self.isChecked = false
    }

    func buttonClicked(sender: UIButton) {
        if sender == self {
            isChecked = !isChecked
        }
    }
}

End result is that both the UIButton and the non-linked text of the UITextView will toggle the checkbox on and off. The "Terms & Conditions" text will link to the website or segue somewhere else.

Hopefully this helps someone else out.

score 1 · Answer 2 · answered Jun 06 '17 at 12:40

You can use TTTAttributedLabel to make a particular part or word tappable in a UILabel.

For example

label.text = @"Fork me on GitHub!"; // Repository URL will be automatically detected and linked
NSRange range = [label.text rangeOfString:@"me"];
[label addLinkToURL:[NSURL URLWithString:@"meUrl"] withRange:range];

Here me becomes tappable and on tapping that word delegate method didSelectLinkWithURL gets called and you can check for that link inside that function

(void)attributedLabel:(TTTAttributedLabel *)label didSelectLinkWithURL:(NSURL *)url {
    NSLog(@"link %@", [url absoluteString]);
   if ([url absoluteString] == @"meUrl") {
   //implement your logic here
   }
    NSLog(@"whole label %@", label);
}

If it was a label, then yes I could use TTTAttributedLabel - although I'd more likely use a UITextView - NSAttributedString as a way of defining a link to tap and UITextViewDelegate to catch the press of the link e.g. https://stackoverflow.com/a/36604425/263534 The reason is I thought extending a UIButton would make more sense, as it's a checkbox primarily. — J.C, Jun 06 '17 at 12:46

UIButton label detect tap on specific text

2 Answers2