[iOS/Swift] TextView - URL (하이퍼링크)클릭해 웹뷰 띄워주기

안녕하세요. UITextView 에 하이퍼링크로 URL 을 나타내기 위해 방법을 찾아본 내용을 정리하러 왔습니다!

 

처음에는 UILabel 에서 적용하려고 했는데 방법이 복잡해서 UITextView 로 바꿨습니다.

- UILabel 을 사용하려면 해당 링크를 참고하면 좋을 것 같아요.

 

📝 목차

1. TextView 의 dataDetectorTypes 속성 설정하기

2. UITextViewDelegate 를 통해 WKWebView 띄워주기

 

이 두가지 과정을 통해 TextView 의 텍스트 중 Http links 를 클릭해 웹뷰를 띄워줄 수 있습니다.

 

1. TextView 의 dataDetectorTypes 속성 설정하기

UITextView 에는 dataDetectorTypes 속성이 있어, phone numbers, http links 등을 자동으로 인식해 URL 로 변환해주고 앱을 실행할 수 있습니다. 편집이 가능한 모드( isEditable == true )에서는 사용할 수 없어요.

👉 공식 문서 : UITextView - dataDetectorTypes

 

UITextView 의 편집과 스크롤이 불가능하게 설정했습니다. 스크롤이 가능하게 설정되어 있으면, 높이를 고정으로 설정해주어야 해요! 

 

dataDetectorTypes 를 link 로 설정하고, text 에 http links 를 작성하면 자동으로 하이퍼링크가 적용됩니다 😳👍 

 

class ViewController: UIViewController {

    let textView = UITextView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupLayout()
        setupAttributes()
    }

    private func setupAttributes() {
        textView.delegate = self
        textView.isEditable = false
        textView.isScrollEnabled = false
        textView.dataDetectorTypes = .link
        textView.text = "Take a look 👇 \n https://developer.apple.com/"
        textView.textAlignment = .center
    }
}

---

2. UITextViewDelegate 를 통해 WKWebView 띄워주기

UITextView 에 있는 하이퍼링크를 누르게 되면, dataDetectorTypes 설명에 나와있는대로 URL 을 핸들링할 사파리 앱을 열어줍니다. 

 

앱 내에서 이동할 수 있도록 WebView 를 띄워주려면, delegate 를 채택해 textView(_:shouldInteractWith:in:interaction:) 메소드를 구현해주면 됩니다 🙂

👉 공식문서 : UITextViewDelegate - textView(_:shouldInteractWith:in:interaction:)

 

해당 메소드의 반환값이 true 이면 기본 동작으로 사파리 앱을 열어주고, false 이면 기본 동작을 하지 않습니다. 

 

메소드 내에서 WebViewController 를 직접 생성하고, text 에서 넘어온 URL 을 인자로 넘겨 화면에 띄워줍니다.

 

extension ViewController: UITextViewDelegate {
    func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool {
        let webViewController = WebViewController(URL)
        present(webViewController, animated: true, completion: nil)
        return false
    }
}

 

참고로 WebViewController 를 만드는 방법은 WKWebView 문서에 나와있습니다.

import UIKit
import WebKit

class WebViewController: UIViewController, WKUIDelegate {
    
    var myURL: URL?
    var webView: WKWebView!
    
    init(_ url: URL?) {
        super.init(nibName: nil, bundle: nil)
        myURL = url
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let myURL = myURL else { return }
        let myRequest = URLRequest(url: myURL)
        webView.load(myRequest)
    }
}

---

UITextView & WKWebView

 

코드를 실행하면 위의 결과를 확인하실 수 있어요! (Autolayout 지정은 하셔야합니다..)

UITextView 와 WKWebView 를 이용해 http links 를 하이퍼링크로 연결하는 방법이었습니다! 🙇‍♀️

 

참고 링크

[SWIFT] TextView에 링크 걸기 및 뷰 컨트롤러 이동

👉 https://g-y-e-o-m.tistory.com/158

 

SwiftRichString 을 통해서는 HTML 처럼 작성해 <a href> 태그를 넣을 수 있습니다.

👉 https://github.com/malcommac/SwiftRichString#customize-xml-rendering-react-to-tags-attributes-and-unknown-tags

* 찾아봤던 검색어? uilabel clickable link / swift hyperlink in label