6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

UITextViewでリンクを挿入して色を変更したい

Last updated at Posted at 2020-12-02

これはSOUSEI Technology アドベントカレンダー2日目の記事です!
普段はiOS開発をメインに活動しています。そこからのミニTIPSを投稿していきます💪

UITextViewでリンクを挿入する

UITextViewのattributedTextプロパティを使用してリンクを挿入することができます。

guard let url = URL(string: "http://qiita.com") else { return }

let attributes: [NSAttributedString.Key: Any] = [
    .link: url
]
        
let attributedString = NSMutableAttributedString()
attributedString.append(NSAttributedString(string: "Qiita", attributes: attributes))
attributedString.append(NSAttributedString(string: "アドベントカレンダー2020"))
        
textView.attributedText = attributedString

こちらを実装するとこのような見た目になります。
Simulator Screen Shot - iPhone 11 Pro - 2020-12-01 at 19.41.54.png

ご覧のように勝手にリンク色(この記事ではこの色をリンク色と定義します)に変更してくれます。

リンク色を変える

ここから本題ですが、要件によってはリンク色を変えたいというようなこともあると思います。
その時はUITextViewのlinkTextAttributesプロパティを使用することで実現できます。

guard let url = URL(string: "http://qiita.com") else { return }

// リンク色を変更
let linkAttributes: [NSAttributedString.Key: Any] = [
    .foregroundColor: UIColor.red
]
textView.linkTextAttributes = linkAttributes
        
let attributes: [NSAttributedString.Key: Any] = [
    .link: url
]
        
let attributedString = NSMutableAttributedString()
attributedString.append(NSAttributedString(string: "Qiita", attributes: attributes))
attributedString.append(NSAttributedString(string: "アドベントカレンダー2020"))
        
textView.attributedText = attributedString

Simulator Screen Shot - iPhone 11 Pro - 2020-12-01 at 19.42.16.png

このようにバッチリとリンク色が変わってくれました。
色を変更したい場合は、.foregroundColorで好きな色を指定してください。

ついでに下線も付けたい

ここからはおまけです。
リンクっぽく下線を付けてみましょう。
linkAttributesに下線の項目を付け足せばOKです。

let linkAttributes: [NSAttributedString.Key: Any] = [
    .foregroundColor: UIColor.red,
    .underlineColor: UIColor.red,                     // 下線の色
    .underlineStyle: NSUnderlineStyle.single.rawValue // 下線のスタイル
]
textView.linkTextAttributes = linkAttributes
        
let attributes: [NSAttributedString.Key: Any] = [
    .link: url
]
        
let attributedString = NSMutableAttributedString()
attributedString.append(NSAttributedString(string: "Qiita", attributes: attributes))
attributedString.append(NSAttributedString(string: "アドベントカレンダー2020"))
        
textView.attributedText = attributedString

Simulator Screen Shot - iPhone 11 Pro - 2020-12-01 at 19.57.20.png

下線の色は.underlineColorで好きな色を指定してください。
下線のスタイルもsingle以外にたくさんあるので公式ドキュメントを参考に試してみると良いと思います。
NSUnderlinestyleについて

foregroundColorの注意点

linkAttributesではなく、attributedTextでforegroundColorを指定してもリンク色は変わってくれません。.linkを指定したら該当の箇所はリンク色になり、好きな色に変化してくれません。

let attributes: [NSAttributedString.Key: Any] = [
    .link: url,
    .foregroundColor: UIColor.red // .linkがあるとこの指定は無効
]

リンクをタップして外部ブラウザ以外で遷移させたい

こちらもおまけですが、UITextViewをタップした時にはこれまで書いた実装をすると、外部ブラウザでリンクが開きます。
しかし、アプリによってはWebViewやSafariViewControllerで開かせたいということもあると思います。
その場合はUITextViewDelegateを使用しましょう。
今回はSafariViewControllerで開くパターンを例とします。

import UIKit
import SafariServices

class ViewController: UIViewController {

    @IBOutlet weak var textView: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()

        textView.delegate = self
    }
}

extension ViewController: UITextViewDelegate {

    func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool {
        let safariViewController = SFSafariViewController(url: URL)
        present(safariViewController, animated: true, completion: nil)
        return false
    }

}

こちらでSafariViewControllerで開くことができると思います。
return falseにしているところがポイントで、return trueにすると外部ブラウザが開きます。
この例でtrueにするとアプリ内ではSafariViewControllerが開き、外部ブラウザでも同じページが二重で開きます。
注意してください。

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?