iOSのUITextViewで属性付きテキストのタップを検出する


122

UITextView表示するがありますNSAttributedString。この文字列には、タップ可能にしたい単語が含まれているため、タップするとアクションが実行されるようにコールバックされます。UITextViewURLのタップを検出してデリゲートにコールバックできることはわかっていますが、これらはURLではありません。

iOS 7とTextKitの機能でこれが可能になったように思えますが、例を見つけることができず、どこから始めればよいかわかりません。

文字列にカスタム属性を作成できるようになったことを理解しています(まだ行っていませんが)。おそらく、これらは魔法の単語の1つがタップされたかどうかを検出するのに役立ちますか?いずれにせよ、そのタップを傍受して、どの単語でタップが発生したかを検出する方法はまだわかりません。

iOS 6の互換性は必要ありません。

回答:


118

他の人をもう少し手助けしたかっただけです。Shmidtの応答に続いて、私が元の質問で尋ねたとおりに正確に実行することが可能です。

1)クリック可能な単語にカスタム属性を適用した属性付き文字列を作成します。例えば。

NSAttributedString* attributedString = [[NSAttributedString alloc] initWithString:@"a clickable word" attributes:@{ @"myCustomTag" : @(YES) }];
[paragraph appendAttributedString:attributedString];

2)その文字列を表示するUITextViewを作成し、それにUITapGestureRecognizerを追加します。次に、タップを処理します。

- (void)textTapped:(UITapGestureRecognizer *)recognizer
{
    UITextView *textView = (UITextView *)recognizer.view;

    // Location of the tap in text-container coordinates

    NSLayoutManager *layoutManager = textView.layoutManager;
    CGPoint location = [recognizer locationInView:textView];
    location.x -= textView.textContainerInset.left;
    location.y -= textView.textContainerInset.top;

    // Find the character that's been tapped on

    NSUInteger characterIndex;
    characterIndex = [layoutManager characterIndexForPoint:location
                                           inTextContainer:textView.textContainer
                  fractionOfDistanceBetweenInsertionPoints:NULL];

    if (characterIndex < textView.textStorage.length) {

        NSRange range;
        id value = [textView.attributedText attribute:@"myCustomTag" atIndex:characterIndex effectiveRange:&range];

        // Handle as required...

        NSLog(@"%@, %d, %d", value, range.location, range.length);

    }
}

方法がわかればとても簡単です。


IOS 6でこれをどのように解決しますか?この質問を見てください。stackoverflow.com/questions/19837522/...
Steaphann

実際、characterIndexForPoint:inTextContainer:fractionOfDistanceBetweenInsertionPointsはiOS 6で使用できるので、動作するはずです。知らせて下さい!例えば、このプロジェクトを参照してください。github.com/laevandus/NSTextFieldHyperlinks/blob/master/...
tarmes

ドキュメントには、IOS 7以降でのみ利用できると記載されています:)
Steaphann

1
うん、ごめん。Mac OSに戸惑いました!これはiOS7のみです。
tarmes 2013年

選択できないUITextViewがある場合、機能しないようです
Paul Brewczynski

64

Swiftで属性付きテキストのタップを検出する

初心者にとっては、セットアップを行う方法を知るのが少し難しい場合があります(とにかくそれは私のためでした)。この例は少し充実しています。

UITextViewプロジェクトにを追加します。

出口

という名前のコンセントでUITextViewをに接続します。ViewControllertextView

カスタム属性

Extensionを作成してカスタム属性を作成します。

注:この手順は技術的にオプションですが、行わない場合は、次の部分でコードを編集して、などの標準属性を使用する必要がありますNSAttributedString.Key.foregroundColor。カスタム属性を使用する利点は、属性付きテキスト範囲に格納する値を定義できることです。

で新しいSwiftファイルを追加する File> New> File ...> iOS> Source> Swift File Swiftファイルます。あなたはそれをあなたが望むものと呼ぶことができます。私はNSAttributedStringKey + CustomAttribute.swiftと呼んでいます。

次のコードを貼り付けます。

import Foundation

extension NSAttributedString.Key {
    static let myAttributeName = NSAttributedString.Key(rawValue: "MyCustomAttribute")
}

コード

ViewController.swiftのコードを次のコードに置き換えます。に注意してくださいUIGestureRecognizerDelegate

import UIKit
class ViewController: UIViewController, UIGestureRecognizerDelegate {

    @IBOutlet weak var textView: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create an attributed string
        let myString = NSMutableAttributedString(string: "Swift attributed text")

        // Set an attribute on part of the string
        let myRange = NSRange(location: 0, length: 5) // range of "Swift"
        let myCustomAttribute = [ NSAttributedString.Key.myAttributeName: "some value"]
        myString.addAttributes(myCustomAttribute, range: myRange)

        textView.attributedText = myString

        // Add tap gesture recognizer to Text View
        let tap = UITapGestureRecognizer(target: self, action: #selector(myMethodToHandleTap(_:)))
        tap.delegate = self
        textView.addGestureRecognizer(tap)
    }

    @objc func myMethodToHandleTap(_ sender: UITapGestureRecognizer) {

        let myTextView = sender.view as! UITextView
        let layoutManager = myTextView.layoutManager

        // location of tap in myTextView coordinates and taking the inset into account
        var location = sender.location(in: myTextView)
        location.x -= myTextView.textContainerInset.left;
        location.y -= myTextView.textContainerInset.top;

        // character index at tap location
        let characterIndex = layoutManager.characterIndex(for: location, in: myTextView.textContainer, fractionOfDistanceBetweenInsertionPoints: nil)

        // if index is valid then do something.
        if characterIndex < myTextView.textStorage.length {

            // print the character index
            print("character index: \(characterIndex)")

            // print the character at the index
            let myRange = NSRange(location: characterIndex, length: 1)
            let substring = (myTextView.attributedText.string as NSString).substring(with: myRange)
            print("character at index: \(substring)")

            // check if the tap location has a certain attribute
            let attributeName = NSAttributedString.Key.myAttributeName
            let attributeValue = myTextView.attributedText?.attribute(attributeName, at: characterIndex, effectiveRange: nil)
            if let value = attributeValue {
                print("You tapped on \(attributeName.rawValue) and the value is: \(value)")
            }

        }
    }
}

ここに画像の説明を入力してください

「Swift」の「w」をタップすると、次の結果が得られます。

character index: 1
character at index: w
You tapped on MyCustomAttribute and the value is: some value

ノート

  • ここではカスタム属性を使用しましたが、同じように簡単にできました NSAttributedString.Key.foregroundColorが、の値を持つのは(テキストの色)とでしたUIColor.green
  • 以前はテキストビューを編集または選択することはできませんでしたが、Swift 4.2に対する私の更新された回答では、これらが選択されているかどうかに関係なく、正常に機能しているようです。

さらなる研究

この回答は、この質問に対する他のいくつかの回答に基づいています。これらに加えて、


myTextView.textStorage代わりに使用する myTextView.attributedText.string
fatihyildizhan

iOS 9でのタップジェスチャーによるタップの検出は、連続したタップでは機能しません。更新はありますか?
Dheeraj Jami 2015

1
@WaqasMahmood、私はこの問題について新しい質問を始めまし。スターを付けて、後で回答を確認できます。必要に応じて、その質問を編集したり、コメントを追加したりしてください。
Suragch 2015年

1
@dejix私はTextViewの最後に毎回 ""空の文字列を追加することで問題を解決します。これにより、最後の単語の後で検出が停止します。それがお役に立て
ば幸い

1
複数のタップで完璧に動作します。これを証明するために短いルーチンを入力しました。もし文字インデックス<12 {textView.textColor = UIColor.magenta} else {textView.textColor = UIColor.blue}本当に明確でシンプルなコード
Jeremy Andrews

32

これは少し変更されたバージョンで、@ tarmesの回答を基にしています。value変数が何かを返すことができませんでしたが、null、以下の調整必要です。また、結果のアクションを判別するために、完全な属性ディクショナリを返す必要がありました。私はコメントにこれを入れたでしょうが、担当者がそうするようには見えません。プロトコルに違反した場合は、事前に謝罪します。

特定の調整はのtextView.textStorage代わりに使用することですtextView.attributedText。まだ学習中のiOSプログラマーとして、これがなぜなのか本当にわかりませんが、おそらく他の誰かが私たちを啓蒙することができます。

タップ処理方法の特定の変更:

    NSDictionary *attributesOfTappedText = [textView.textStorage attributesAtIndex:characterIndex effectiveRange:&range];

私のView Controllerの完全なコード

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.textView.attributedText = [self attributedTextViewString];
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(textTapped:)];

    [self.textView addGestureRecognizer:tap];
}  

- (NSAttributedString *)attributedTextViewString
{
    NSMutableAttributedString *paragraph = [[NSMutableAttributedString alloc] initWithString:@"This is a string with " attributes:@{NSForegroundColorAttributeName:[UIColor blueColor]}];

    NSAttributedString* attributedString = [[NSAttributedString alloc] initWithString:@"a tappable string"
                                                                       attributes:@{@"tappable":@(YES),
                                                                                    @"networkCallRequired": @(YES),
                                                                                    @"loadCatPicture": @(NO)}];

    NSAttributedString* anotherAttributedString = [[NSAttributedString alloc] initWithString:@" and another tappable string"
                                                                              attributes:@{@"tappable":@(YES),
                                                                                           @"networkCallRequired": @(NO),
                                                                                           @"loadCatPicture": @(YES)}];
    [paragraph appendAttributedString:attributedString];
    [paragraph appendAttributedString:anotherAttributedString];

    return [paragraph copy];
}

- (void)textTapped:(UITapGestureRecognizer *)recognizer
{
    UITextView *textView = (UITextView *)recognizer.view;

    // Location of the tap in text-container coordinates

    NSLayoutManager *layoutManager = textView.layoutManager;
    CGPoint location = [recognizer locationInView:textView];
    location.x -= textView.textContainerInset.left;
    location.y -= textView.textContainerInset.top;

    NSLog(@"location: %@", NSStringFromCGPoint(location));

    // Find the character that's been tapped on

    NSUInteger characterIndex;
    characterIndex = [layoutManager characterIndexForPoint:location
                                       inTextContainer:textView.textContainer
              fractionOfDistanceBetweenInsertionPoints:NULL];

    if (characterIndex < textView.textStorage.length) {

        NSRange range;
        NSDictionary *attributes = [textView.textStorage attributesAtIndex:characterIndex effectiveRange:&range];
        NSLog(@"%@, %@", attributes, NSStringFromRange(range));

        //Based on the attributes, do something
        ///if ([attributes objectForKey:...)] //make a network call, load a cat Pic, etc

    }
}

textView.attributedTextにも同じ問題がありました!textView.textStorageヒントをありがとう!
Kai Burghardt 2014年

iOS 9でのタップジェスチャーによるタップの検出は、連続したタップでは機能しません。
Dheeraj Jami 2015

25

カスタムリンクを作成して、タップで必要なことを実行することは、iOS 7ではるかに簡単になりました。RayWenderlichには非常に良い例があります


これは、コンテナビューに対する文字列の位置を計算するよりもはるかにクリーンなソリューションです。
クリスC

2
問題は、textViewを選択可能にする必要があることです。この動作はしたくありません。
トーマスCalmon

@ThomásC。UITextViewIB経由でリンクを検出するように設定していても、リンクが検出されなかった理由を示すポインタの+1 。(私も選択
不可にしました

13

WWDC 2013の例

NSLayoutManager *layoutManager = textView.layoutManager;
 CGPoint location = [touch locationInView:textView];
 NSUInteger characterIndex;
 characterIndex = [layoutManager characterIndexForPoint:location
inTextContainer:textView.textContainer
fractionOfDistanceBetweenInsertionPoints:NULL];
if (characterIndex < textView.textStorage.length) { 
// valid index
// Find the word range here
// using -enumerateSubstringsInRange:options:usingBlock:
}

ありがとうございました!私もWWDCのビデオを見ます。
tarmes

@Suragch「テキストキットを使用した高度なテキストレイアウトと効果」。
Shmidt、2015

10

私はこれをNSLinkAttributeNameでかなり簡単に解決することができました

スウィフト2

class MyClass: UIViewController, UITextViewDelegate {

  @IBOutlet weak var tvBottom: UITextView!

  override func viewDidLoad() {
      super.viewDidLoad()

     let attributedString = NSMutableAttributedString(string: "click me ok?")
     attributedString.addAttribute(NSLinkAttributeName, value: "cs://moreinfo", range: NSMakeRange(0, 5))
     tvBottom.attributedText = attributedString
     tvBottom.delegate = self

  }

  func textView(textView: UITextView, shouldInteractWithURL URL: NSURL, inRange characterRange: NSRange) -> Bool {
      UtilityFunctions.alert("clicked", message: "clicked")
      return false
  }

}

あなたのURLをタップしていない別のURLとしていることを確認する必要がありますif URL.scheme == "cs"し、return true外のifように、文のUITextView正常な処理することができhttps://、タップされているリンク
ダニエル・ストームを

私はそれをしました、そして、それはiPhone 6と6+でかなりうまくいきましたが、iPhone 5では全く働きませんでした。iPhone 5がなぜこれに問題があるのか​​わからなかったので、意味がありませんでした。
n13

9

Swift 3で属性付きテキストのアクションを検出するための完全な例

let termsAndConditionsURL = TERMS_CONDITIONS_URL;
let privacyURL            = PRIVACY_URL;

override func viewDidLoad() {
    super.viewDidLoad()

    self.txtView.delegate = self
    let str = "By continuing, you accept the Terms of use and Privacy policy"
    let attributedString = NSMutableAttributedString(string: str)
    var foundRange = attributedString.mutableString.range(of: "Terms of use") //mention the parts of the attributed text you want to tap and get an custom action
    attributedString.addAttribute(NSLinkAttributeName, value: termsAndConditionsURL, range: foundRange)
    foundRange = attributedString.mutableString.range(of: "Privacy policy")
    attributedString.addAttribute(NSLinkAttributeName, value: privacyURL, range: foundRange)
    txtView.attributedText = attributedString
}

そして、あなたはアクションをキャッチすることができます shouldInteractWith URL UITextViewDelegateデリゲートメソッドを使用します。デリゲートを適切に設定していることを確認してください。

func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange) -> Bool {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let vc = storyboard.instantiateViewController(withIdentifier: "WebView") as! SKWebViewController

        if (URL.absoluteString == termsAndConditionsURL) {
            vc.strWebURL = TERMS_CONDITIONS_URL
            self.navigationController?.pushViewController(vc, animated: true)
        } else if (URL.absoluteString == privacyURL) {
            vc.strWebURL = PRIVACY_URL
            self.navigationController?.pushViewController(vc, animated: true)
        }
        return false
    }

同様に、あなたの要件に応じて任意のアクションを実行できます。

乾杯!!


ありがとう!あなたは私の日を救います!
Dmih

4

でそれを行うことが可能characterIndexForPoint:inTextContainer:fractionOfDistanceBetweenInsertionPoints:です。それはあなたが望んだよりも多少異なる動作をします-あなたはタップされたキャラクターが魔法の言葉に属しているかどうかをテストする必要があります。しかし、それは複雑であってはなりません。

ところで、WWDC 2013のテキストキットの紹介をご覧になることを強くお勧めします。


4

Swift 5とiOS 12では、TextKit実装のサブクラスを作成してUITextViewオーバーライドpoint(inside:with:)し、その一部のみをタップ可能にすることができますNSAttributedStrings


次のコードはUITextView、下線が引かれたNSAttributedStringsのタップにのみ反応するを作成する方法を示しています。

InteractiveUnderlinedTextView.swift

import UIKit

class InteractiveUnderlinedTextView: UITextView {

    override init(frame: CGRect, textContainer: NSTextContainer?) {
        super.init(frame: frame, textContainer: textContainer)
        configure()
    }

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

    func configure() {
        isScrollEnabled = false
        isEditable = false
        isSelectable = false
        isUserInteractionEnabled = true
    }

    override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {
        let superBool = super.point(inside: point, with: event)

        let characterIndex = layoutManager.characterIndex(for: point, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
        guard characterIndex < textStorage.length else { return false }
        let attributes = textStorage.attributes(at: characterIndex, effectiveRange: nil)

        return superBool && attributes[NSAttributedString.Key.underlineStyle] != nil
    }

}

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let linkTextView = InteractiveUnderlinedTextView()
        linkTextView.backgroundColor = .orange

        let mutableAttributedString = NSMutableAttributedString(string: "Some text\n\n")
        let attributes = [NSAttributedString.Key.underlineStyle: NSUnderlineStyle.single.rawValue]
        let underlinedAttributedString = NSAttributedString(string: "Some other text", attributes: attributes)
        mutableAttributedString.append(underlinedAttributedString)
        linkTextView.attributedText = mutableAttributedString

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(underlinedTextTapped))
        linkTextView.addGestureRecognizer(tapGesture)

        view.addSubview(linkTextView)
        linkTextView.translatesAutoresizingMaskIntoConstraints = false
        linkTextView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        linkTextView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        linkTextView.leadingAnchor.constraint(equalTo: view.readableContentGuide.leadingAnchor).isActive = true

    }

    @objc func underlinedTextTapped(_ sender: UITapGestureRecognizer) {
        print("Hello")
    }

}

こんにちは、これを1つだけでなく複数の属性に準拠させる方法はありますか?
David Lintin

1

これは、テキストリンクのショートリンク、マルチリンクで問題なく動作する可能性があります。iOS 6、7、8で問題なく動作します。

- (void)tappedTextView:(UITapGestureRecognizer *)tapGesture {
    if (tapGesture.state != UIGestureRecognizerStateEnded) {
        return;
    }
    UITextView *textView = (UITextView *)tapGesture.view;
    CGPoint tapLocation = [tapGesture locationInView:textView];

    NSDataDetector *detector = [NSDataDetector dataDetectorWithTypes:NSTextCheckingTypeLink|NSTextCheckingTypePhoneNumber
                                                           error:nil];
    NSArray* resultString = [detector matchesInString:self.txtMessage.text options:NSMatchingReportProgress range:NSMakeRange(0, [self.txtMessage.text length])];
    BOOL isContainLink = resultString.count > 0;

    if (isContainLink) {
        for (NSTextCheckingResult* result in  resultString) {
            CGRect linkPosition = [self frameOfTextRange:result.range inTextView:self.txtMessage];

            if(CGRectContainsPoint(linkPosition, tapLocation) == 1){
                if (result.resultType == NSTextCheckingTypePhoneNumber) {
                    NSString *phoneNumber = [@"telprompt://" stringByAppendingString:result.phoneNumber];
                    [[UIApplication sharedApplication] openURL:[NSURL URLWithString:phoneNumber]];
                }
                else if (result.resultType == NSTextCheckingTypeLink) {
                    [[UIApplication sharedApplication] openURL:result.URL];
                }
            }
        }
    }
}

 - (CGRect)frameOfTextRange:(NSRange)range inTextView:(UITextView *)textView
{
    UITextPosition *beginning = textView.beginningOfDocument;
    UITextPosition *start = [textView positionFromPosition:beginning offset:range.location];
    UITextPosition *end = [textView positionFromPosition:start offset:range.length];
    UITextRange *textRange = [textView textRangeFromPosition:start toPosition:end];
    CGRect firstRect = [textView firstRectForRange:textRange];
    CGRect newRect = [textView convertRect:firstRect fromView:textView.textInputView];
    return newRect;
}

iOS 9でのタップジェスチャーによるタップの検出は、連続したタップでは機能しません。
Dheeraj Jami 2015

1

Swiftにこの拡張機能を使用します。

import UIKit

extension UITapGestureRecognizer {

    func didTapAttributedTextInTextView(textView: UITextView, inRange targetRange: NSRange) -> Bool {
        let layoutManager = textView.layoutManager
        let locationOfTouch = self.location(in: textView)
        let index = layoutManager.characterIndex(for: locationOfTouch, in: textView.textContainer, fractionOfDistanceBetweenInsertionPoints: nil)

        return NSLocationInRange(index, targetRange)
    }
}

UITapGestureRecognizer次のセレクタを使用してテキストビューに追加します。

guard let text = textView.attributedText?.string else {
        return
}
let textToTap = "Tap me"
if let range = text.range(of: tapableText),
      tapGesture.didTapAttributedTextInTextView(textView: textTextView, inRange: NSRange(range, in: text)) {
                // Tap recognized
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.