[Swift] Atributika, HTML 코드를 Swift 코드에 녹이기

안녕하세요 욱승입니당 ㅋ

이번 포스팅에서는 Atributika 외부 라이브러리를 사용해서 HTML 소스코드를 Swift 소스코드에 적용시켜볼게요!

이 라이브러리는 뱅크샐러드가 사용중이라고 합니다!

간단한 예제를 통해 사용해볼까 합니다!

 

그럼 드가쟈

 

Podfile

pod 'Atributika' # Swift 언어로 작성된 iOS 및 macOS 앱에서 텍스트 스타일링 및 강조 효과를 적용하는 데 사용되는 라이브러리

 

import

import Atributika

 

GitHub Atributika

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

 

 

문자열을 HTML코드로 작성한 후에 뒤에 라이브러리에서 제공하는 함수만 사용하면 됭닝당

 

예제

func styledTextWithAtributika() {
        // Define styles for tags
        let boldStyle = Style("b").font(.boldSystemFont(ofSize: 16))
        let linkStyle = Style("a").foregroundColor(.blue).underlineStyle(.single)
        let customTagStyle = Style("customTag").font(.italicSystemFont(ofSize: 14)).foregroundColor(.red)
        
        // 여러줄에 걸쳐 문자열(HTML코드)을 작성
        let attributedText = """
            Hello, <b>World!</b>
            
            Visit our website: <a href="https://www.example.com">example.com</a>
            
            This is a <customTag>custom tag</customTag> example.
            """.style(tags: boldStyle, linkStyle, customTagStyle)
        label.attributedText = attributedText.attributedString
}

 

전체 예제코드

import Foundation
import Atributika

final class AtributikaViewController: UIViewController, UIViewControllerAttribute {
    
    var navTitle: String?
    
    lazy var testLabel = UILabel().then {
        $0.numberOfLines = 0
        $0.sizeToFit()
        $0.textAlignment = .center
        $0.textColor = .black
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setNavigationBar()
        setUI()
        setAttributes()
        
        styledTextWithAtributika()
    }
    
    func setNavigationBar() {
        self.navigationItem.title = navTitle ?? ""
    }
    
    func setUI() {
        self.view.backgroundColor = .white
        self.view.addSubview(testLabel)
    }
    
    func setAttributes() {
        testLabel.snp.makeConstraints {
            $0.top.equalTo(self.view.safeAreaLayoutGuide).offset(50)
            $0.centerX.equalToSuperview()
        }
    }
    
    func styledTextWithAtributika() {
        // Define styles for tags
        let boldStyle = Style("b").font(.boldSystemFont(ofSize: 16)) // b 태그의 폰트는 boldSystemFont 16사이즈로
        let linkStyle = Style("a").foregroundColor(.blue).underlineStyle(.single) // a 태그의 폰트 color는 파란색, 밑줄
        let customTagStyle = Style("customTag").font(.italicSystemFont(ofSize: 14)).foregroundColor(.red) // customTag 태그의 폰트는 italicSystemFont 14 사이즈, fontcolor는 빨간색
        
        // 여러줄에 걸쳐 문자열(HTML코드)을 작성
        let attributedText = """
            Hello, <b>World!</b>
            
            Visit our website: <a href="https://www.example.com">example.com</a>
            
            This is a <customTag>custom tag</customTag> example.
            """.style(tags: boldStyle, linkStyle, customTagStyle)
        testLabel.attributedText = attributedText.attributedString
    }
}

Style("{태그}"). ~~~~ 로 style을 지정한다.

style뒤로 font, backgroundcolor, foregroundcolor 등... 순서는 관계 없는듯 보임! 

 

결과

 

결론

오랜만에 HTML코드를 이용해 Swift에 적용 해보았다.

웹뷰를 띄우기는 부담스럽고 HTML 소스코드를 사용해야한다면 해당 라이브러리를 사용해도 좋을듯하다.

사실상 Style(css)는 Swift속성을 이용하지만 HTML코드를 네이티브 소스(iOS 혹은 Android)에 녹여낼때 쓰기 좋은 라이브러리 같아서 나중에 HTML코드를 네이티브 소스에 넣을일이 있다면 활용하기 좋은 라이브러리 같다.