How to create clickable label Like Facebook in ios?

Question

I am developing a social app in which I need show post and sharing etc. I also need to show tag friend.

When post is show on list UI is also similar to Facebook post. Please check below screen shot.

As you can see Clicking Post title is as attributed single line, Where I need to open User Profile when user click on his name that is Person Name Abc and want to open Page when user click on Buzzfeed india,

As we need to use a UILabel to display content like this I am not able to get click on particular word. I have already tried https://github.com/null09264/FRHyperLabel but when there is multiple line Then clicking on word is not perfect.

Answer 1

You can use TTTAttributedLabel to make a particular part or words 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);
}

Answer 2

Try using this:

Add Extension

extension UITapGestureRecognizer {

    func didTapAttributedTextInLabel(label: UILabel, inRange targetRange: NSRange) -> Bool {
        // Create instances of NSLayoutManager, NSTextContainer and NSTextStorage
        let layoutManager = NSLayoutManager()
        let textContainer = NSTextContainer(size: CGSize.zero)
        let textStorage = NSTextStorage(attributedString: label.attributedText!)

        // Configure layoutManager and textStorage
        layoutManager.addTextContainer(textContainer)
        textStorage.addLayoutManager(layoutManager)

        // Configure textContainer
        textContainer.lineFragmentPadding = 0.0
        textContainer.lineBreakMode = label.lineBreakMode
        textContainer.maximumNumberOfLines = label.numberOfLines
        let labelSize = label.bounds.size
        textContainer.size = labelSize

        // Find the tapped character location and compare it to the specified range
        let locationOfTouchInLabel = self.location(in: label)
        let textBoundingBox = layoutManager.usedRect(for: textContainer)
        let textContainerOffset = CGPoint(x:(labelSize.width - textBoundingBox.size.width) * 0.5 - textBoundingBox.origin.x,y:(labelSize.height - textBoundingBox.size.height) * 0.5 - textBoundingBox.origin.y);


        let locationOfTouchInTextContainer = CGPoint(x:locationOfTouchInLabel.x - textContainerOffset.x,y:locationOfTouchInLabel.y - textContainerOffset.y);
        let indexOfCharacter = layoutManager.characterIndex(for: locationOfTouchInTextContainer, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)

        return NSLocationInRange(indexOfCharacter, targetRange)
    }

}

Then Add UITapGestureRecognizer on your UILable. Please make sure UILabel.isUserInteractionEnabled is true

override func viewDidLoad() {
        super.viewDidLoad()

        initialSetup()
    }

func initialSetup(){
    let tap = UITapGestureRecognizer(target: self, action: #selector(self.didTap(_:)))
    lblTitle.addGestureRecognizer(tap)
    lblTitle.isUserInteractionEnabled = true
    lblTitle.numberOfLines = 0
    let personname = "Person Name Abc"
    let buzzIndia = "Buzzfeed india"
    let str = "\(personname) shared \(buzzIndia)'s video"
    let attributedString = NSMutableAttributedString(string:str)

    let range = (str as NSString).range(of: personname)
    attributedString.addAttribute(NSForegroundColorAttributeName, value: UIColor.black, range: range)
    if let font = UIFont(name: "Helvetica Bold", size: 14) {
        attributedString.addAttribute(NSFontAttributeName, value: font, range: range)
    }

    let rangeBuzz = (str as NSString).range(of: buzzIndia)
    attributedString.addAttribute(NSForegroundColorAttributeName, value: UIColor.black, range: rangeBuzz)
    if let font = UIFont(name: "Helvetica Bold", size: 14) {
        attributedString.addAttribute(NSFontAttributeName, value: font, range: rangeBuzz)
    }

    lblTitle.attributedText = attributedString

}

func didTap(_ gesture: UITapGestureRecognizer) {
    let text = (lblTitle.text)!
    let name = (text as NSString).range(of: "Person Name Abc")
    let buzzfeed = (text as NSString).range(of: "Buzzfeed india")

    if gesture.didTapAttributedTextInLabel(label: lblTitle, inRange: name) {
        //Repective "Person Name Abc" action
        print("Person Name Abc")
    }else if gesture.didTapAttributedTextInLabel(label: lblTitle, inRange: buzzfeed) {
        //Repective "Buzzfeed india" action
        print("Buzzfeed india")
    }else {
        print("other tapped")
    }
}

Reference: http://samwize.com/2016/03/04/how-to-create-multiple-tappable-links-in-a-uilabel/