[iOS] UITextView로 문구를 탭하면 웹페이지에 이동하도록 해보기

안녕하세요! 클래스메소드 CX사업본부 모바일애플리케이션사업부의 정하은입니다?

폭염때문에 일하다가 자꾸 정신을 놓게 되는 요즘인데요ㅠㅠ (방에 에어컨이 없는게 이렇게 힘들줄이야...) 정신을 놓고 있던 새에 7월도 막바지에 다다랐습니다. iOS 개발을 본격적으로 시작한지도 드디어 반년정도가 되었지만 여전히 부족함이 많다고 느끼고 있어 한동안은 iOS 공부에 주력하게 될 것 같네요.

이번 블로그에서는 화면 내 문구를 탭하면 해당 문구에 설정해 둔 웹사이트로 이동하는 기능에 대하여 다루어보도록 하겠습니다!

화면

파란색 글씨부분을 탭하면 웹사이트로 이동하게 되는 단순한 기능입니다.

구현 방법

먼저 스토리보드에 TextView를 추가합니다.

스토리보드 옆에 Assistant를 띄워 textView를 코드 내에서 사용할 수 있도록 끌어와줍니다.

viewDidLoad()에서 텍스트뷰에 넣을 문자열 변수를 선언하고 초기화 해줍니다.

let text = "파란색 문구를 터치하면 구글 홈페이지로 이동합니다"

위 코드를 입력하면 NSMutableAttributedString형의 변수를 선언할 필요가 있는데요.

선언 후, 문자열을 넣어 초기화 해줍니다.

let attributedString = NSMutableAttributedString(string: text)

탭하면 웹사이트로 이동할 수 있도록 주소와 문구 범위를 지정해주세요.

attributedString.addAttribute(.link,
value: "https://www.google.com/",
range: NSString(string: text).range(of: "구글 홈페이지"))

다음은 텍스트뷰에 문자열을 넣어줍니다. 타입명에 AttributedString이 들어가는 것은 text로는 삽입이 되지않으니 attributedText를 사용하는 것을 기억해주세요.

textView.attributedText = attributedString

사실 여기까지 하면 기능 구현 자체는 끝나지만 세 가지 주의해야할 점이 있습니다.

첫 번째는 View Controller를 InterfaceBuilder 또는 코드로 텍스트뷰의 Delegate로 설정할 필요가 있습니다. 그렇기 때문에 아래와 같은 함수를 추가하고 viewDidLoad( ) 에 textView.delegate = self 를 적어주어야 합니다.

func textView(_ textView: UITextView, shouldInteractWith URL: URL, 
in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool {
    UIApplication.shared.open(URL)
    return false
}

두 번째는 텍스트뷰의 내용을 수정하지 못하도록 해야하는데요. 텍스트뷰는 라벨과 다르게 텍스트를 입력하거나 삭제를 할 수 있습니다. 그렇기 때문에 아래의 코드를 추가해주어야 합니다.

textView.isEditable = false

세 번째는 텍스트뷰를 선택할 수 있도록 해주어야 하는 것인데, 이것은 기본적으로 설정이 되어 있기 때문에 굳이 손을 댈 필요는 없습니다. 만약에 코드로 작성한다고 하면 아래와 같이 작성하시면 되니 참고만 해주세요.

textView.isSelectable = true

소스코드

전체 소스코드입니다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var textView: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let text = "파란색 문구를 터치하면 구글 홈페이지로 이동합니다"

        let attributedString = NSMutableAttributedString(string: text)

        attributedString.addAttribute(.link,
        value: "https://www.google.com/",
        range: NSString(string: text).range(of: "구글 홈페이지"))

        textView.attributedText = attributedString
        textView.font = UIFont.systemFont(ofSize: 15)

        textView.isEditable = false
        textView.delegate = self
    }

    func textView(_ textView: UITextView, shouldInteractWith URL: URL, 
     in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool {
         UIApplication.shared.open(URL) 
         return false 
     }
}

부록

Label로는 불가능한가?

사실 TextView는 Swfit로 개발하는 입장에서는 조금 생소하다보니 Label로 구현하고 싶을 수도 있으실텐데요. 위의 방법을 그대로 Label로 바꿔 시도하면 텍스트 색상은 변경되나 문구를 탭하더라도 페이지로 이동하지 않는데요..

Label로 구현하고 싶다하시는 경우는 아래의 링크를 참고해주시면 될 것 같습니다.

Opening hyperlinks in UILabel on iOS

문구의 색상을 바꿀 수는 없는가?

바꿀 수 있습니다. 기본적으로는 파란색으로 지정이 되지만 다른 색상으로 바꾸고 싶은 경우는 아래와 같이 tintColor를 지정해주세요.

textView.tintColor = .orange

참고

How to make tappable links in NSAttributedString