web-dev-qa-db-ja.com

UILabelの一部をUIButtonのように機能させるには？

属性付き文字列UILabelがあります。テキストの一部に色を付けることができました

let text = "Why did \(event) give \(event2) a 5 stars review? Details here. "
let linkTextWithColor = "Why did"
let range = (text as NSString).rangeOfString(linkTextWithColor)

let attributedString = NSMutableAttributedString(string:text)
attributedString.addAttribute(NSForegroundColorAttributeName, value: UIColor.blackColor() , range: range)

labelEvent.attributedText = attributedString

UIButtonのように、テキストの一部をタップ可能にしたいのですが、どうすればよいですか？

例1

example 1

例2

example 2

タッチに反応し、UIButtonのような特定の関数を実行するには、青色のテキストが必要です。ヘルプは本当に感謝しています。

iosswiftuibuttonuilabel
19
DeyaEldeen

このライブラリを試すことをお勧めします

https://github.com/null09264/FRHyperLabel

優れたライブラリ、使いやすく、試してみるための組み込みサンプルはほとんどありません。例はObjective-cとSwiftの両方にあります

Swiftの例

 let str = "This is a random bit of text"
        let attributes = [NSForegroundColorAttributeName: UIColor.blackColor(),
                          NSFontAttributeName: UIFont.systemFontOfSize(15)]
        confirmLabel.attributedText = NSAttributedString(string: str, attributes: attributes)

        let handler = {
            (hyperLabel: FRHyperLabel!, substring: String!) -> Void in

            //action here
        }
        //Step 3: Add link substrings
        confirmLabel.setLinksForSubstrings(["random"], withLinkHandler: handler)

編集：

下線を取り除きたい場合、これを行う最良の方法は、DeyaEldeenがコメントで提供したアドバイスに従うことです。

FRHyperLabelの.mファイルに移動する場合は、このメソッドに移動します

- (void)checkInitialization {
    if (!self.handlerDictionary) {
        self.handlerDictionary = [NSMutableDictionary new];
    }

    if (!self.userInteractionEnabled) {
        self.userInteractionEnabled = YES;
    }

    if (!self.linkAttributeDefault) {
        self.linkAttributeDefault = @{NSForegroundColorAttributeName: FRHyperLabelLinkColorDefault,
                                      NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle)};
    }

    if (!self.linkAttributeHighlight) {
        self.linkAttributeHighlight = @{NSForegroundColorAttributeName: FRHyperLabelLinkColorHighlight,
                                        NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle)};
    }
}

そして、あなたはこれを取り除くことができます

NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle)

属性から

8
AdamM

あなたがしたいことは、ボタンとして機能するリンクを作成するためにテキストビューで属性付き文字列を使用することです。

let attributedString = NSMutableAttributedString(string: "Some string with link", attributes: [<attributes>])

次に、その一部をリンクとして設定し、テキストビューのlinkAttributesプロパティを使用して外観をカスタマイズします。これはボタンであり、実際のリンクではないため、後でデリゲートで処理できるように、リンクにダミーURLを挿入します。

attributedString.setSubstringAsLink(substring: "link", linkURL: "CUSTOM://WHATEVER")
let linkAttributes: [String : AnyObject] = [NSForegroundColorAttributeName : .redColor(), NSUnderlineColorAttributeName : .redColor(), NSUnderlineStyleAttributeName : NSUnderlineStyle.StyleSingle.rawValue]
textView.linkTextAttributes = linkAttributes
textView.attributedText = attributedString
textView.selectable = true
textView.editable = false
textView.userInteractionEnabled = true

最後に、テキストビューデリゲートで、スキームを確認し、いくつかのアクションを実行します。

func textView(textView: UITextView, shouldInteractWithURL URL: NSURL, inRange characterRange: NSRange) -> Bool {
    if URL.scheme == "CUSTOM" {
       // Do your button actions here
    }
    return true
}

SetSubstringAsLinkの拡張：

extension NSMutableAttributedString {
    // Set part of string as URL
    public func setSubstringAsLink(substring substring: String, linkURL: String) -> Bool {
        let range = self.mutableString.rangeOfString(substring)
        if range.location != NSNotFound {
            self.addAttribute(NSLinkAttributeName, value: linkURL, range: range)
            return true
        }
        return false
    }
}
11
Max

「abc 123」というテキストを含むUILabelがあり、「abc "をUIButtonとして機能させたいとします。

  • 「abc」を含む長方形を計算して保存します。
  • UITapGestureRecognizerをUILabelに追加します。
  • UILabelがタップされたら、タップが長方形内にあるかどうかを確認します。
static func getRect(str: NSAttributedString, range: NSRange, maxWidth: CGFloat) -> CGRect {
    let textStorage = NSTextStorage(attributedString: str)
    let textContainer = NSTextContainer(size: CGSize(width: maxWidth, height: CGFloat.max))
    let layoutManager = NSLayoutManager()       
    layoutManager.addTextContainer(textContainer)
    textStorage.addLayoutManager(layoutManager)     
    textContainer.lineFragmentPadding = 0       
    let pointer = UnsafeMutablePointer<NSRange>.alloc(1)
    layoutManager.characterRangeForGlyphRange(range, actualGlyphRange: pointer)     
    return layoutManager.boundingRectForGlyphRange(pointer.move(), inTextContainer: textContainer)
}

let rect1 = getRect(label.attributedText!, range: NSMakeRange(0, 3), maxWidth: label.frame.width)

label.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(MyClass.tappedLabel(_:))))

func tappedLabel(sender: UITapGestureRecognizer) {
    if rect1.contains(sender.locationInView(sender.view)) {
        // ...
    }
}
11
Code

アイデアは TTTAttributedLabel などのライブラリを使用し、次のように使用することです。

次の文字列を考えてみます。「タッチ可能にしたい here 」 here はタッチ時にセグエを実行します。

  • TTTAttributedLabel（UILabelサブクラス）を作成し、UILabelであるかのようにテキストコンテンツを入れます。デリゲートを自分に設定します。次に、この方法でWordへのリンクを追加します。

目的C

NSRange rangeWord = [attributedLabel.text rangeOfString:@"here"];
[attributedLabel addLinkToURL:[NSURL URLWithString:@"anActionOnClickHere"] withRange:rangeUser];

Swift

NSRange rangeWord = attributedLabel.text.rangeOfString("here")
attributedLabel.addLinkToURL(NSURL(string: "anActionOnClickHere"), withRange:rangeUser)
  • 単語をクリックすると、クリックを処理できる次のメソッドが呼び出されます。

目的C

- (void)attributedLabel:(__unused TTTAttributedLabel *)label
   didSelectLinkWithURL:(NSURL *)url {
    NSString *urlToString = [url absoluteString];

    if ([urlToString containsString:@"anActionOnClickHere"]) { //perform segue for example
        [self performSegueWithIdentifier:@"hereSegue" sender:self];
    }
}

Swift

func attributedLabel(label: TTTAttributedLabel!, didSelectLinkWithURL url: NSURL!) {
    NSString *urlToString = url.absoluteString()
    if (urlToString.containsString("anActionOnClickHere")) { //perform segue for example 
        self.performSegueWithIdentifier("hereSegue",sender:self)
    } 
}

デフォルトのリンクスタイルでは、探している青色が表示されます。

2
AnthoPak