วิธีสร้าง UILabel URL / โทรศัพท์ที่คลิกได้


116

ฉันต้องการสร้างป้ายกำกับที่คลิกได้บนแอปของฉันซึ่งนำฉันไปสู่หน้าเว็บ Safari ฉันยังต้องการให้ผู้ใช้สามารถโทรหาหมายเลขได้โดยคลิกที่พวกเขาเท่านั้น?

ขอบคุณสำหรับคำแนะนำของคุณ


คำตอบ:


134

คุณสามารถใช้UITextViewและเลือกการตรวจหาลิงก์หมายเลขโทรศัพท์และสิ่งอื่น ๆ ในตัวตรวจสอบ


2
ฉันมีป้ายปรับขนาดตัวเองซึ่งสามารถรองรับข้อความได้ N บรรทัด ฉันจะทำให้ลิงก์ในป้ายกำกับนี้คลิกได้โดยไม่ต้องใช้ UITextView
bibscy

@bibscy จากนั้นคุณสามารถใช้ NSAttributedText ดูที่stackoverflow.com/questions/1256887/…
Basel

95

ใช้UITextViewแทนUILabelและมีคุณสมบัติในการแปลงข้อความของคุณเป็นไฮเปอร์ลิงก์

Objective-C:

yourTextView.editable = NO;
yourTextView.dataDetectorTypes = UIDataDetectorTypeAll;

สวิฟท์:

yourTextView.editable = false; 
yourTextView.dataDetectorTypes = UIDataDetectorTypes.All;

การดำเนินการนี้จะตรวจจับลิงก์โดยอัตโนมัติ

ดูรายละเอียดในเอกสารประกอบ


5
สีนี้จะเป็นสีฟ้าและขีดเส้นใต้ แต่ดูเหมือนว่าจะทำให้คลิกได้อย่างน้อยใน iOS 7
Ben H

1
รหัส Swift: yourTextView.editable = false; yourTextView.dataDetectorTypes = UIDataDetectorTypes all;
Thiago Arreguy

5
คำถามเกี่ยวกับ UILabel ไม่ใช่ UITextView
swift2geek

28

https://github.com/mattt/TTTAttributedLabel

นั่นคือสิ่งที่คุณต้องการอย่างแน่นอน คุณยังสามารถใช้แอตทริบิวต์สำหรับป้ายกำกับของคุณเช่นขีดเส้นใต้และใช้สีที่ต่างกัน เพียงตรวจสอบคำแนะนำสำหรับ URL ที่คลิกได้

โดยหลักแล้วคุณจะทำสิ่งต่อไปนี้:

NSRange range = [label.text rangeOfString:@"me"];
[label addLinkToURL:[NSURL URLWithString:@"http://github.com/mattt/"] withRange:range]; // Embedding a custom link in a substring

12

คุณสามารถสร้าง UIButton และ setText ที่คุณต้องการและเพิ่มวิธีการได้

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(kLeftMargin, 10, self.view.bounds.size.width - kLeftMargin - kRightMargin, 52)];
[sampleButton setTitle:@"URL Text" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];


[sampleButton addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton];


-(void)buttonPressed:(id)sender{
  // open url
}

การตั้งค่าแบบอักษรทำได้แล้วโดย: button.titleLabel.font = [UIFont systemFontOfSize: size];
Leon

10

หากคุณต้องการให้ UILabel จัดการสิ่งนี้และไม่ใช่ UITextView คุณสามารถสร้างคลาสย่อย UILabel ได้เช่นนี้:

class LinkedLabel: UILabel {

fileprivate let layoutManager = NSLayoutManager()
fileprivate let textContainer = NSTextContainer(size: CGSize.zero)
fileprivate var textStorage: NSTextStorage?


override init(frame aRect:CGRect){
    super.init(frame: aRect)
    self.initialize()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.initialize()
}

func initialize(){

    let tap = UITapGestureRecognizer(target: self, action: #selector(LinkedLabel.handleTapOnLabel))
    self.isUserInteractionEnabled = true
    self.addGestureRecognizer(tap)
}

override var attributedText: NSAttributedString?{
    didSet{
        if let _attributedText = attributedText{
            self.textStorage = NSTextStorage(attributedString: _attributedText)

            self.layoutManager.addTextContainer(self.textContainer)
            self.textStorage?.addLayoutManager(self.layoutManager)

            self.textContainer.lineFragmentPadding = 0.0;
            self.textContainer.lineBreakMode = self.lineBreakMode;
            self.textContainer.maximumNumberOfLines = self.numberOfLines;
        }

    }
}

func handleTapOnLabel(tapGesture:UITapGestureRecognizer){

    let locationOfTouchInLabel = tapGesture.location(in: tapGesture.view)
    let labelSize = tapGesture.view?.bounds.size
    let textBoundingBox = self.layoutManager.usedRect(for: self.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 = self.layoutManager.characterIndex(for: locationOfTouchInTextContainer, in: self.textContainer, fractionOfDistanceBetweenInsertionPoints: nil)


    self.attributedText?.enumerateAttribute(NSLinkAttributeName, in: NSMakeRange(0, (self.attributedText?.length)!), options: NSAttributedString.EnumerationOptions(rawValue: UInt(0)), using:{
        (attrs: Any?, range: NSRange, stop: UnsafeMutablePointer<ObjCBool>) in

        if NSLocationInRange(indexOfCharacter, range){
            if let _attrs = attrs{

                UIApplication.shared.openURL(URL(string: _attrs as! String)!)
            }
        }
    })

}}

คลาสนี้สร้างขึ้นโดยการนำโค้ดกลับมาใช้ซ้ำจากคำตอบนี้ ในการสร้างสตริงที่เป็นแหล่งที่มาให้ตรวจสอบคำตอบนี้ และที่นี่คุณสามารถหาวิธีที่จะทำให้ URL ของโทรศัพท์


6

ใช้สิ่งนี้ฉันชอบมันมากตั้งแต่สร้างลิงค์ด้วยสีฟ้าไปยังข้อความเฉพาะเท่านั้นไม่ใช่ในข้อความป้ายกำกับทั้งหมด: FRHyperLabel

การใช้ไฮเปอร์ลิงก์อย่างชาญฉลาดในเงื่อนไขการใช้งาน

ทำ:

  1. ดาวน์โหลดได้จากลิงค์ด้านบนและสำเนาFRHyperLabel.h, FRHyperLabel.mโครงการของคุณ

  2. ลากลดลงUILabelในของคุณStoryboardชื่อชั้นที่กำหนดเองและกำหนดที่จะFRHyperLabelในการระบุการตรวจสอบตามที่แสดงในภาพ

ใส่คำอธิบายภาพที่นี่

  1. เชื่อมต่อ UILabel ของคุณจากสตอรี่บอร์ดไปยังไฟล์ viewController.h ของคุณ

@property (weak, nonatomic) IBOutlet FRHyperLabel *label;

  1. ตอนนี้ในไฟล์ viewController.m ของคุณเพิ่มรหัสต่อไปนี้

`NSString * string = @" การอัปโหลดแสดงว่าฉันยอมรับข้อกำหนดการใช้งาน "; NSDictionary * แอตทริบิวต์ = @ {NSFontAttributeName: [UIFont recommendedFontForTextStyle: UIFontTextStyleHeadline]};

_label.attributedText = [[NSAttributedString alloc]initWithString:string attributes:attributes];
[_label setFont:[_label.font fontWithSize:13.0]];

[_label setLinkForSubstring:@"Terms of Use" withLinkHandler:^(FRHyperLabel *label, NSString *substring){
    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://www.google.com"]];
}];`
  1. และเรียกใช้

6

ใช้ UITextView แทน UILabel และมีคุณสมบัติในการแปลงข้อความของคุณเป็นไฮเปอร์ลิงก์

รหัส Swift:

yourTextView.editable = false
yourTextView.dataDetectorTypes = UIDataDetectorTypes.All
//or
yourTextView.dataDetectorTypes = UIDataDetectorTypes.PhoneNumber
//or
yourTextView.dataDetectorTypes = UIDataDetectorTypes.Link

4
คำถามวิธีใช้ใน UILabel แทนที่จะเป็น TextViews ขอบคุณ
swift2geek

0
extension UITapGestureRecognizer {

    func didTapAttributedTextInLabel(label: UILabel, inRange targetRange: NSRange) -> Bool {

        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
        textContainer.size = label.bounds.size

        // main code
        let locationOfTouchInLabel = self.location(in: label)

        let indexOfCharacter = layoutManager.characterIndex(for: locationOfTouchInLabel, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
        let indexOfCharacterRange = NSRange(location: indexOfCharacter, length: 1)
        let indexOfCharacterRect = layoutManager.boundingRect(forGlyphRange: indexOfCharacterRange, in: textContainer)
        let deltaOffsetCharacter = indexOfCharacterRect.origin.x + indexOfCharacterRect.size.width

        if locationOfTouchInLabel.x > deltaOffsetCharacter {
            return false
        } else {
            return NSLocationInRange(indexOfCharacter, targetRange)
        }
    }
}

0

ทำไมไม่ใช้NSMutableAttributedString ?

let attributedString = NSMutableAttributedString(string: "Want to learn iOS? Just visit developer.apple.com!")
        attributedString.addAttribute(.link, value: "https://developer.apple.com", range: NSRange(location: 30, length: 50))

        myView.attributedText = attributedString

สามารถดูรายละเอียดเพิ่มเติมได้ที่นี่


ฉันเพิ่งลองโทรออกจาก UILabel วันนี้และรหัสด้านบนใช้ไม่ได้ ฉันได้แทนที่dev.appl.comด้วยโทร: // 1234567 อาจต้องมีการอัปเดตคำตอบนี้
Pratik Somaiya

-1

เวอร์ชัน Swift 4.2, Xcode 9.3

class LinkedLabel: UILabel {

    fileprivate let layoutManager = NSLayoutManager()
    fileprivate let textContainer = NSTextContainer(size: CGSize.zero)
    fileprivate var textStorage: NSTextStorage?


    override init(frame aRect:CGRect){
        super.init(frame: aRect)
        self.initialize()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.initialize()
    }

    func initialize(){

        let tap = UITapGestureRecognizer(target: self, action: #selector(self.handleTapOnLabel))
        self.isUserInteractionEnabled = true
        self.addGestureRecognizer(tap)
    }

    override var attributedText: NSAttributedString?{
        didSet{
            if let _attributedText = attributedText{
                self.textStorage = NSTextStorage(attributedString: _attributedText)

                self.layoutManager.addTextContainer(self.textContainer)
                self.textStorage?.addLayoutManager(self.layoutManager)

                self.textContainer.lineFragmentPadding = 0.0;
                self.textContainer.lineBreakMode = self.lineBreakMode;
                self.textContainer.maximumNumberOfLines = self.numberOfLines;
            }

        }
    }

    @objc func handleTapOnLabel(tapGesture:UITapGestureRecognizer){

        let locationOfTouchInLabel = tapGesture.location(in: tapGesture.view)
        let labelSize = tapGesture.view?.bounds.size
        let textBoundingBox = self.layoutManager.usedRect(for: self.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 = self.layoutManager.characterIndex(for: locationOfTouchInTextContainer, in: self.textContainer, fractionOfDistanceBetweenInsertionPoints: nil)


        self.attributedText?.enumerateAttribute(NSAttributedStringKey.link, in: NSMakeRange(0, (self.attributedText?.length)!), options: NSAttributedString.EnumerationOptions(rawValue: UInt(0)), using:{
            (attrs: Any?, range: NSRange, stop: UnsafeMutablePointer<ObjCBool>) in

            if NSLocationInRange(indexOfCharacter, range){
                if let _attrs = attrs{

                    UIApplication.shared.openURL(URL(string: _attrs as! String)!)
                }
            }
        })

    }}

-3

โซลูชันที่เป็นไปได้ของ Swift 4.0 โดยใช้ UIButton

     phoneButton = UIButton(frame: CGRect(x: view.frame.width * 0, y: view.frame.height * 0.1, width: view.frame.width * 1, height: view.frame.height * 0.05))
     phoneButton.setTitle("333-333-3333", for: .normal )
     phoneButton.setTitleColor(UIColor(red: 0 / 255, green: 0 / 255, blue: 238 / 255, alpha: 1.0), for: .normal)
     phoneButton.addTarget(self, action: #selector(self.callPhone), for: .touchUpInside )

     @objc func callPhone(){

         UIApplication.shared.open(URL(string:"tel://3333333333")!, options: [:] , completionHandler: nil)


    }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.