[iOS] Atributika 라이브러리 (HTML to NSAttributedString)

1️⃣ 소개

---

 

Atributika 라이브러리란?

---

GitHub - psharanda/Atributika: Convert text with HTML tags, links, hashtags, mentions into NSAttributedString. Make them clickab

 

• Atributika는 HTML 태그, 링크, 전화번호, 해쉬태그(#), 멘션(@) 등이 포함된 텍스트를 NSAttributedString으로 변환해주는 Swift 라이브러리입니다.
• 추가로 AtributikaViews는 하이라이트 처리와 클릭가능한 링크를 표시할 수 있고 커스텀 및 접근성지원등도 함께 지원하는 Custom UILabel/UITextView를 제공하는 라이브러리입니다.

 

주요 기능 및 특징 소개

---

Atributika

• Custom Parser를 이용하여 HTML과 같은 태그를 빠르게 감지하고 스타일을 적용할 수 있습니다.
• 해쉬태그(#), 멘션(@), 링크, 전화번호등을 감지하고 스타일을 적용할 수 있습니다.
• 정규식과 NSDataDetector 패턴을 감지하고 스타일을 적용할 수 있습니다.
  • NSDataDetector는 매칭되는 데이터를 찾도록 도와주는 클래스이고 NSDataDetector 패턴은 해당 클래스에서 사용하는 사전정의된 데이터패턴입니다.
• 문자열 범위를 지정하여 스타일을 지정할 수 있습니다.

AtributikaViews

• 하이라이트처리 및 클릭가능한 링크가 포함되는 커스텀뷰를 제공합니다.
• 텍스트 스타일을 normal/highlighted/disabled 상태별로 지정할 수 있습니다.

 

2️⃣ 설치 방법

---

버전에 대한 설명

---

2024년3월20일기준으로 Atributika라이브러리 문서를 확인해보면 V5버전이 출시되었다고 발표가 되어있습니다.

따라서 5버전으로 설치를 진행하면 될 것 같습니다.

5버전이 출시되면서 Atributika와 AtributikaViews가 독립적인 라이브러리로 분리되고 버그 수정 및 성능이 향상되었다고 합니다.

 

CocoaPods, SPM을 이용한 설치 방법

---

SPM 설치방법

  dependencies: [
    .package(url: "<https://github.com/psharanda/Atributika.git>", .upToNextMajor(from: "5.0.0"))
  ]

CocoaPod 설치방법

pod 'Atributika'
pod 'AtributikaViews'

 

3️⃣ 기본 사용법

---

Atributika 사용방법

---

 

DemoViewController.swift

import UIKit
import Atributika

final class DemoViewController: UIViewController {

    private lazy var textLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0

        return label
    }()

    let text = "@sookim님께 병원에서 연락이 왔다고 전화해주세요. 병원의 전화번호는 02-123-1234 입니다. 웹사이트 주소는 <https://github.com/sookim-1> 입니다. #sookim

준비물:
컴퓨터양말신발"

    override func viewDidLoad() {
        super.viewDidLoad()

        self.view.addSubview(textLabel)

        textLabel.translatesAutoresizingMaskIntoConstraints = false

        textLabel.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20).isActive = true
        textLabel.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
        textLabel.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -20).isActive = true
        textLabel.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

        let links = Attrs().foregroundColor(.blue)
        let phoneNumbers = Attrs().backgroundColor(.yellow)
        let mentions = Attrs().font(.italicSystemFont(ofSize: 12)).foregroundColor(.black)
        let u = Attrs().underlineStyle(.single)
        let b = Attrs().font(.boldSystemFont(ofSize: 12))
        let li = TagTuner(attributes: Attrs().font(.systemFont(ofSize: 12)).foregroundColor(.red),
                          openingTagReplacement: "-",
                          closingTagReplacement: "\n")

        let base = Attrs().font(.systemFont(ofSize: 12)).foregroundColor(.gray)

        let convertText = text
            .style(tags: ["u": u, "b": b, "li": li])
            .styleMentions(mentions)
            .styleHashtags(links)
            .styleLinks(links)
            .stylePhoneNumbers(phoneNumbers)
            .styleBase(base)
            .attributedString

        self.textLabel.attributedText = convertText
    }

}

 

 

위의 예시코드를 참고하여 설명하겠습니다.

1. Atributika를 사용하기 위해서 import를 합니다.
2. Atributika는 NSAttributedString으로 변환해주기 때문에 UILabel에 주입하여 확인할 수 있습니다.
3. 스타일을 정의하기 위해서 Attrs클래스를 사용하여 정의합니다.
4. 정의한 스타일을 원하는 범위에 지정합니다.
   • .style(tags: [String: TagTuning]) : 태그를 찾아서 태그 안의 내용들에 대해서 스타일을 지정합니다.
   • .styleMentions : 멘션을 찾아서 스타일을 지정합니다.
   • .styleHashtags : 해쉬태그를 찾아서 스타일을 지정합니다.
   • .styleLinks : 링크를 찾아서 스타일을 지정합니다.
   • .stylePhoneNumbers : 전화번호형식을 찾아서 스타일을 지정합니다.
   • .styleBase : 전체 문자열의 스타일을 지정합니다.
5. 추가로 TagTuner를 사용하면 스타일이외에 태그를 특정문자열로 변경할 수 있습니다. opening(여는 태그), closing(닫는 태그), content(태그 컨텐츠)

 

AtributikaViews 사용방법

---

1. AtributikaViews를 사용하기 위해서 import를 합니다.
2. AttributedLabel, AttributedTextView등 사용하기를 원하는 커스텀뷰를 생성합니다.
3. 각각의 커스텀뷰 속성을 지정할 수 있고, NSAttributedString 변환방식은 위의 방법과 동일합니다.

예시로 작성한 코드는 gist를 참고해주세요

 

 

4️⃣ 팁과 주의사항

---

Atributika 사용 시 유의할 점

---

HTML을 NSAttributedString으로 변환하는 작업은 기본적으로 NSAttributedString에서도 지원하고 있습니다. 예를 들어, init(data:options:documentAttributes:) 메서드를 사용하여 기본적으로 제공하는 옵션에 DocumentType.html을 제공하여서 data를 NSAttributedString으로 생성을 해줍니다.

또한 특정 범위에서 스타일을 지정하는 것도 enumerateAttribute(_:in:options:using:)로 제공하고 있습니다.

 

효율적인 활용을 위한 팁 제공

---

처음에는 Atributika 라이브러리를 활용하지 않고 NSAttributedString에서 제공하는 메서드를 활용하여 간단한 스타일을 변경해보고 HTML을 변환해보는 작업을 진행해본 후, 상황을 고려하여 Atributika 라이브러리를 활용해보는 것도 좋을 것 같습니다.