Swift - How to make UILabel clickable like hashtag and distinguish the same text?

Question

I have a UIlabel and it's text like following

label.text = "#fun #fun #google #youtube"

I want to make the UILabel clickable and open it's url.

I also make the dictionary to set it's keys&values.

var dic:[String:String] = ["https://www.yahoo.com.tw/"   :"fun",
                           "https://www.facebook.com.tw/":"fun",
                           "https://www.google.com.tw/"  :"Google",
                           "https://www.youtube.com/"    :"Youtube"
                          ]  
//How about change it's type to array?
var arr:[[String:String]] = [["https://www.yahoo.com.tw/"   :"fun"],
                             ["https://www.facebook.com.tw/":"fun"],
                             ["https://www.google.com.tw/"  :"Google"],
                             ["https://www.youtube.com/"    :"Youtube"]
                            ] 

How to seprate "fun" to load different url When I click "#fun"?

I use third-library ActiveLabel.swift to achieve UILabel clickable.

label.handleHashtagTap({ (string) in 
    //do something.

    let keys = self.dic.allKeys(forValue: "#\(string) ")        
    print("--> keys: \(keys)")

})

extension Dictionary where Value: Equatable {
    func allKeys(forValue val: Value) -> [Key] {
        return self.filter { $1 == val }.map { $0.0 }
    }
}

Answer 1

Use array of dictionary and then do something like this

let dataArray = [["https://www.yahoo.com.tw/"   :"fun"],
                         ["https://www.facebook.com.tw/":"fun"],
                         ["https://www.google.com.tw/"  :"Google"],
                         ["https://www.youtube.com/"    :"Youtube"]
                        ] 

And you can run a for loop to show all the values on your label :

for i in 0..<dataArray.count{
    let label = UILabel()
    label.tag = i
    for (key,value) in dataArray[i]{
        print(key, value)
        label.text = "#\(value)"
    }
    // then add tap gesture to that label
}

You have to create labels dynamically and each label will have a tap gesture.

On tap gesture you can get the tag of the label and thus you can get the tapped value from your dataArray based on your tag.

Answer 2

You can use UICollectionView. Make Cells for all words. As you have 4 word Use 4 Cells And give UICollectionView Direction According to that Vertical or Horizontal. It also help you as Archive Great Layout and you can customise how you want.

Answer 3

You can achieve what you're describing by using an UITextView with a NSAttributedString containing tags with links.

You can look at the example below or copy/paste into a new playground using Xcode to test it.

You can also override the default URL interaction behavior of UITextView if you want to use the URL different than the default action.

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController, UITextViewDelegate {

    // Assign a webView to this to override the default url interaction from the tagView
    var webView: UIWebView?

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

        // Check if a webView is set to be used to load URLs
        guard let webView = webView else {

            // Proceeds with default url interaction if no webview is assigned
            return true
        }

        // Load URL into the webview instead
        webView.loadRequest(URLRequest(url: URL))

        // Stops the default url interaction and uses the webView instead
        return false
    }

    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        let tagView = UITextView()
        // Disable editing of the UITextView, this stops users from changing the UITextView content
        tagView.isEditable = false
        // Make self handle events raised by the tagView, this is required to receive the shouldInteractWith URL event
        tagView.delegate = self

        tagView.frame = CGRect(x: 100, y: 200, width: 200, height: 20)

        let dic:[String:String] = ["https://www.yahoo.com.tw/"   :"fun",
                                   "https://www.facebook.com.tw/":"fun",
                                   "https://www.google.com.tw/"  :"Google",
                                   "https://www.youtube.com/"    :"Youtube"
        ]

        let attributedString = NSMutableAttributedString()

        // Iterate through the dictionary containing tags with links
        // and create a NSAttributedString for every tag
        for (link, tag) in dic {

            // Skip tags that have a malformed link
            guard let url = URL(string: link) else { continue }

            // Create the NSAttributedString with the tag and link
            let tagString = NSAttributedString(string: "#\(tag) ", attributes: [NSAttributedStringKey.link: url])

            attributedString.append(tagString)
        }

        // Set the tags string to the tagView
        tagView.attributedText = attributedString

        view.addSubview(tagView)
        self.view = view
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
// Enjoy your tags with links

NSAttributedString - Apple Documentation

Answer 4

You can use NSAttributedString with documentType html. Please refer this example:

class ViewController: UIViewController, UITextViewDelegate {

    @IBOutlet weak var textView: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        let attrText = htmlAttributedString("<span style=\"font-family: 'NotoSans'; font-size: 16; color: #666666\">ĐÃ CÀO TRÚNG <a href=\"google.com.vn\">Link here</a></span>")
        textView.delegate = self
        textView.isEditable = false
        textView.attributedText = attrText
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool {
        print(URL.absoluteString)
        return false
    }

    func htmlAttributedString(_ templateString: String) -> NSAttributedString? {
        do {
            if let data = templateString.data(using: .unicode, allowLossyConversion: true) {
                let options = [
                    NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html,
                    ]
                let str = try NSAttributedString(data: data, options: options, documentAttributes: nil)
                return str
            }
        } catch let error {
            print(error.localizedDescription)
        }


        return nil
    }

}

With html documentType, you can freely to style your text. And also, to detect which url is clicked, you can use func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool delegate from UITextView

To remove delay on link click, you can also refer to this gist: https://gist.github.com/benjaminbojko/c92ac19fe4db3302bd28