如何创建可点击的标签像ios中的Facebook一样?

时间:2017-09-14 07:25:15

标签: ios user-interface uilabel clickablespan

我正在开发一个社交应用,我需要在其中展示帖子和分享等。 我还需要显示标签朋友。

当帖子在列表上显示时,UI也类似于Facebook帖子。请检查下面的屏幕截图。 enter image description here

正如您所见,点击帖子标题是属于单行,我需要在用户点击人名Abc 的名称时打开用户个人资料,并希望在用户点击时打开页面 Buzzfeed india

由于我们需要使用UILabel来显示这样的内容,我无法点击特定的单词。我已经尝试了https://github.com/null09264/FRHyperLabel但是当有多行时点击单词并不完美。

2 个答案:

答案 0 :(得分:1)

您可以使用TTTAttributedLabel在UILabel中制作特定的部分或单词。

例如

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];

在这里我变得可以点击并且点击那个单词委托方法didSelectLinkWithURL被调用,你可以检查该函数内的那个链接

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

答案 1 :(得分:0)

尝试使用:

添加扩展程序

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)
    }

}
  

然后在您的UILable上添加UITapGestureRecognizer。请确保UILabel.isUserInteractionEnabled为真

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")
    }
}

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